Retain textbox visible after the form is submitted

Question

When I click the Send button (when the form is submitted) the text box disappears. How do I retain the text box visible even if the form is submitted?

<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#subject').change(function (){
    if($('#subject').val()=='newSub')
        $('#newSubtxt').show();
    else
        $('#newSubtxt').hide();
    });
});
</script>
<meta charset="UTF-8">
<title>Untitled Document</title>

</head>
<body>
<form method="post" action="" name="cq">
   <select name="subject" id="subject">
      <option value="biology">Biology</option>
      <option value="maths">Maths</option>
      <option value="economics">Economics</option>
      <option value="newSub"> Add New Subject </option>
   </select> 
   <input type="text" name="newSubtxt" ID="newSubtxt" style='display:none;'> 
   <input type="submit" value="Send" >
</form>

</body>
</html>

See David's answer below for solution to your problem. For more information about AJAX, see here: http://stackoverflow.com/questions/17973386/ajax-request-callback-using-jquery/17974843#17974843 — cssyphus, Sep 09 '14 at 02:11

Teddybugs · Accepted Answer · 2014-09-09T02:43:24.870

try this:

<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#subject').change(function (){
    if($('#subject').val()=='newSub')
        $('#newSubtxt').show();
    else
        $('#newSubtxt').hide();
    });

    $('#submitBTN').click(function(){
        alert("post to data_handler.php");
        var subject_id = $("#subject").val();
        var newSubtxt = $("#newSubtxt").text();

        $.ajax
        ({ 
            url: 'data_handler.php',
            data: {"subject_id": subject_id, "newSubtxt":newSubtxt},
            type: 'post',
            success: function(result)
            {
                alert("Data submitted!");
            }
        });
    }); 

});
</script>
<meta charset="UTF-8">
<title>Untitled Document</title>

</head>

<form method="post" action="" name="cq">
   <select name="subject" id="subject">
      <option value="biology">Biology</option>
      <option value="maths">Maths</option>
      <option value="economics">Economics</option>
      <option value="newSub"> Add New Subject </option>
   </select> 
   <input type="text" name="newSubtxt" id="newSubtxt" style='display:none;'>    
   <button type="button" id="submitBTN">Send</button> 
</form>

</body>
</html>

JSFiddle Here

data will be submitted to data_handler.php after Send clicked

UPDATE on OP request,

<?php
$style = "";
$theInputText = "";
if(isset($_POST['submit'])) {
    $subject_val = $_POST['subject'];
    if ($subject_val == "newSub"){
      $newSubtxt_val = $_POST['newSubtxt'];
      $theInputText = $newSubtxt_val;

    } else {
        $style = "display:none;";       
    }

}

?>
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#subject').change(function (){
    if($('#subject').val()=='newSub')
        $('#newSubtxt').show();
    else
        $('#newSubtxt').hide();
    });
});
</script>
<meta charset="UTF-8">
<title>Untitled Document</title>

</head>

<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>" name="cq">
   <select name="subject" id="subject">
      <option value="biology">Biology</option>
      <option value="maths">Maths</option>
      <option value="economics">Economics</option>
      <option value="newSub"> Add New Subject </option>
   </select> 
   <input type="text" name="newSubtxt" id="newSubtxt" style='<?php echo $style;?>' value="<?php echo $theInputText;?>">    
   <input type="submit" value="Send" name="submit" >
</form>

</body>
</html>

this will work according your comment, please add filter accordingly to prevent xss and sql injection.

this works fine. However I'm wondering if there is a solution to keep the 'submit' button as it is without replacing with a 'button'. Im validating few other fields with PHP SELF and I'm printing the error messages on the same page. — user3762389, Sep 09 '14 at 02:17

Retain textbox visible after the form is submitted

1 Answers1