Javascript updating form control not working

[rogerte]

Have form that has a select list, change button, textarea and submit button. When page is loaded PHP sets up variables, and the textarea and submit button are disabled with the textarea displaying placeholder text.

What should happen is when the user selects an item from the list and then presses the change button, a javasript function inserts the selected text into a previously declared PHP variable, enables the textarea and submit button and inserts the variable into the text area.

This worked fine yesterday, but today, although nothing has changed all that happens is the textarea flashes and returns to the initial load state. The Firefox debugger shows the js function does change the variable.

Can someone who understands JS point me in the correct direction please? Thank you

Initial PHP:

<?php
// Was it called correctly?
if (!isset($_GET["wl_id"])) {
    header('location: home.php');
} else {
    $wl_id = $_GET["wl_id"];
}
require_once 'session.php';
require_once 'conn.php';
require_once 'account_name.php';
$counter = 0;

if ($counter == 0) {
   //SELECT statements and setup variable done here
    ++$counter;
    $posted = false;
}
?>

The form code

                            <div class="alert alert-success">
                                <a class = "btn btn-success" href = "wl_fulllist.php"><span class = "fa fa-arrow-left"></span> Back</a>
                                <form id="frmInvite" name="frmInvite" class="form-horizontal" method = "POST">
                                    <br />

                                    <div class="form-group sm row alert alert-success">
                                        <label class="col-md-2 offset-md-1 control-label" for="classday">Day:</label>  
                                        <div class="col-md-3">
                                            <select class="form-control" id="classSelect">
                                               <?php
                                               while ($row = $c_query->fetch_assoc()) {
                                                   echo "<option value = " . $row['class_name'] . ">" . $row['class_name'] . "</option>";
                                               }
                                               ?>
                                            </select>
                                        </div>
                                        <button  id= "btnSelect"  name= "btnSelect" class="btn btn-primary btn-sm"><span class = "fa fa-check"></span> Select</button>  
                                    </div>           
                                    <div class="form-group sm row alert alert-success">
                                        <label class="col-md-2 control-label" for="email">Email to:</label>  
                                        <div class="col-md-4">
                                            <input id="invite_email" required name="invite_email" class="form-control input-sm" type="text" value="<?php echo $Email; ?>">
                                        </div>
                                        <label class="col-md-2 control-label" for="email">Subject:</label>  
                                        <div class="col-md-4">
                                            <input id="Invite_subject" required name="Invite_subject" class="form-control input-sm" type="text" value="<?php echo $offertitle; ?>">
                                        </div>
                                    </div>           
                                    <div class="form-group sm row alert alert-success">

                                        <textarea class="form-control" id="invite_txt" name="invite_txt" rows="7" placeholder = "Please select session" disabled = "disabled"></textarea>                                        
                                    </div>
                                    <div class="modal-footer">
                                        <button type="submit" id= "invite_btn" name="invite_btn" value = "invite" class="btn btn-primary" disabled = "disabled"><span class = "fa fa-upload"></span> Send</button>
                                    </div>
                                </form>
                            </div>

The Javasript

        <script src = "js/jquery-3.1.1.js"></script>
        <script src = "js/bootstrap.js"></script>
        <script src = "js/script.js"></script>
        <script>
            $("#btnSelect").click(function () {
                var e = document.getElementById("classSelect");
                var x = e.options[e.selectedIndex].text;
<?php
echo 'var str ="' . $invitetext . '";';
?>
                var res = str.replace("[****]", x);
                document.getElementById("invite_txt").disabled = false;
                document.getElementById("invite_btn").disabled = false;
                $("#invite_txt").val(res);
                return false;
            });

        </script>

 

[rogerte]

Have found what the problem is: It's the php variable $invitetext.

If it contains any line breaks (which it should do because the text is going to be an email body) then it doesn't work. If a single line of text it works ok.

Have to insert a unique a unique code (llbb) in the PHP variable where a line break is required, and use res = res.replace(/llbb/g,"\n"); in the javascript function to insert a javascript line break.

 

[feherke]

Hi

Line breaks are not your only problem with that code. Check what happens when $invitetext contains double quotes ( " ) or ends with a backslash ( \ ).

[gray]// instead of this + replace :[/gray]
[teal]<?php[/teal]
[b]echo[/b] [i][green]'var str ="'[/green][/i] [teal].[/teal] [navy]$invitetext[/navy] [teal].[/teal] [i][green]'";'[/green][/i][teal];[/teal]
[teal]?>[/teal]

[gray]// ask PHP to output JSON with this :[/gray]
[teal]<?php[/teal]
[b]echo[/b] [i][green]'var str ='[/green][/i] [teal].[/teal] [COLOR=orange]json_encode[/color][teal]([/teal][navy]$invitetext[/navy][teal]) .[/teal] [i][green]';'[/green][/i][teal];[/teal]
[teal]?>[/teal]

[gray]// or the equivalent of above, but in my opinion more readable :[/gray]
var str = [teal]<?=[/teal][COLOR=orange]json_encode[/color][teal]([/teal][navy]$invitetext[/navy][teal])?>[/teal];

Feherke.
feherke.github.io

 

[rogerte]

Thanks for the response feherke,

As you have probably guessed I am new to Javascript/PHP, in the process of (slowly) converting a desktop, Delphi, system to web-based.

Had never even thought about the situation you describe, and haven't looked at JSON before.

Must admit web programming is more involved than Delphi was.