在提交表单后保留可见的文本框
Retain textbox visible after 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>
试试这个:
<!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注入。
相关文章:
- 在mvc应用程序中,在回发时保留最初隐藏的文本框的隐藏或可见状态
- 当设置addFromAutocompleteOnly时,剩余文本将保留在输入字段中
- 离开页面导航后保留文本区域内容
- 在文本区域中保留换行符.value
- 在文本中保留撇号
- 单击提交按钮后如何保留文本框值
- 防止Javascript注入(但保留文本格式和图像)
- Jquery:如何在保留文本的同时打开字符串的所有span标记
- 替换*variable*文本,但保留大小写
- 用javascript更改文本并保留src
- 通过javascript保留文本区域换行符
- 使用链接截断html中的文本以显示更多/更少并将元素保留在里面
- 如何在文本节点中保留空格
- 键入时保留占位符的文本输入
- 如何从保留换行符的 window.prompt() 返回文本
- 保留单击其单选按钮的文本框的值
- 使用 javascript 动态更改文本时保留 CSS
- 如何使文本在重新加载后保留
- 提交后,将用户输入文本保留在输入框中
- 将所选文本保留在输入焦点上