获取选择值而不刷新表单
[英]Get the select value without refreshing the form
问题描述
With this code I can see each option value printed but the page is refreshed every time I select an option. 
使用此代码，我可以看到每个选项值都已打印，但是每次选择一个选项时都会刷新页面。 The server get the post data correctly, so I just need to do it without refreshing. 服务器正确获取了发布数据，所以我只需要不刷新即可。 Thanks. 谢谢。 Regards. 问候。
<form action="" method="post">
<select name="day" onchange="this.form.submit();">
<option>Please select a date</option>
<option value="Mon">Monday</option>
<option value="Tue">Tuesday</option>
<option value="Wed">Wednesday</option>
<option value="Thu">Thursday</option>
<option value="Fri">Friday</option>
</select>
</form>
<script type="text/javascript">
$('#day').change(function()
{
$.ajax({
type: 'post',
url: "day.php",
data: $("form.day").serialize(),
});
return false;
});
</script>
<?php
include 'day.php'; ?>
day.php day.php
<?php
$day = $_POST['day'];
echo $day;
?>
3 个解决方案
解决方案1
0 2015-08-23 02:06:22
Update the onchange to call a Javascript function that copies the data to a hidden field in another form, and use Ajax to submit that one instead. 更新onchange以调用Javascript函数，该Javascript函数将数据复制到另一种形式的隐藏字段中，然后使用Ajax提交该表单。
Optionally, you could also submit the data through Ajax directly, without the additional form, but for things that might be done with high frequency, I find it useful to minimize the bandwidth as much as possible. （可选）您也可以直接通过Ajax提交数据，而无需其他形式，但是对于可能需要高频处理的事情，我发现尽可能减小带宽非常有用。
解决方案2
0 2015-08-23 02:07:03
I think you need this:
e.preventDefault(); e.preventDefault（）;
//add your id="day" //添加您的id =“ day”
<select name="day" id="day" onchange="this.form.submit();">
$('#day').change(function(e)
{
e.preventDefault();
$.ajax({
type: 'post',
url: "day.php",
data: $("form.day").serialize(),
});
return false;
});
解决方案3
0 2015-08-23 17:10:33
I could see every option value printed by the <p id=..> without refreshing the page. 我可以看到<p id=..>打印的每个选项值，而无需刷新页面。 But the post data is not passed to day.php.. 但是帖子数据没有传递给day.php。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<head>
<script>
function postSelection(selectObject) {
var day = window.dateForm.day.value = selectObject.options[selectObject.selectedIndex].value;
var dataString = "day=" + day;
$.ajax ({
type:"post",
url: "day.php",
data:dataString,
success: function (response) {
$("#list").html(response);
}
});
return false;
}
</script>
</head>
<body>
<form name="displayForm">
<select name="day" onchange="return postSelection(this)">
<option>Please select a date</option>
<option value="Mon">Monday</option>
<option value="Tue">Tuesday</option>
<option value="Wed">Wednesday</option>
<option value="Thu">Thursday</option>
<option value="Fri">Friday</option>
</select>
</form>
<form action="" method="post" name="dateForm">
<input type="hidden" name="day">
</form>
<?php include 'day.php'; ?>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.