在提交表单后保留可见的文本框 - Retain textbox visible after the form is submitted

Retain textbox visible after the form is submitted

本文关键字：文本保留提交表单 | 更新日期: 2023-09-27

当我单击发送按钮时（提交表单时），文本框将消失。即使提交了表单，我如何保持文本框可见？

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

试试这个：

<!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此处

点击发送后，数据将提交到data_handler.php

OP请求更新，

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

这将根据您的评论工作，请相应地添加过滤器以防止xss和sql注入。