×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Javascript updating form control not working

Javascript updating form control not working

Javascript updating form control not working

(OP)
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:

CODE --> 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

CODE --> HTML/PHP

<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

CODE --> Javascript

<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> 

RE: Javascript updating form control not working

(OP)
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.

RE: Javascript updating form control not working

Hi

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

CODE --> PHP ( fragment )

// instead of this + replace :
<?php
echo 'var str ="' . $invitetext . '";';
?>

// ask PHP to output JSON with this :
<?php
echo 'var str =' . json_encode($invitetext) . ';';
?>

// or the equivalent of above, but in my opinion more readable :
var str = <?=json_encode($invitetext)?>; 

Feherke.
feherke.github.io

RE: Javascript updating form control not working

(OP)
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.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close