Question

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

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

Answer 1

试试这个：

<!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_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注入。

提交表单后保留文本框可见

1 个答案: