通过javascript提交复选框的值
Submit value of a checkbox through javascript
我正在尝试通过javascript提交表单的值,它包含文本和两个复选框。
<script>
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = $(".relocation").val();
$.post("r_two.php", { preffered_loc: preffered_loc,relocation: relocation },
function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
}
</script>
<form id="myForm2" method="post" style="margin-left: -10%;">
<input type="text" class="form-control" id="preffered_loc" name="preffered_loc">
<input type="checkbox" name="relocation[]" class="relocation[]" value="Yes">
<input type="checkbox" name="relocation[]" class="relocation[]" value="No" >
<input type="button" id="submitFormData2" onclick="SubmitFormData2();" value="Submit" />
</form>
r_two.php
<?
$preffered_loc = $_POST['preffered_loc'];
$relocation = $_POST['relocation'];
?>
我能够保存第一个值,但我无法保存搬迁值,任何人都可以告诉我如何保存搬迁。这里重要的一点是,用户也可以选择这两个复选框
问题是,即使我选择第二个选择框,$relocation也只选择值是。 任何人都可以更正我的代码
试试这个。
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = $("#relocation").is(":checked");
var relyn = "";
if(relocation){
relyn = "Yes";
}else{
relyn = "No";
}
$.post("r_two.php", { preffered_loc: preffered_loc,relocation: relyn },
function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
alert("{ preffered_loc: "+preffered_loc+",relocation: "+relyn+" }");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm2" method="post" style="margin-left: -10%;">
<input type="text" class="form-control" id="preffered_loc" name="preffered_loc">
<input type="checkbox" name="relocation[]" id="relocation" />
<input type="button" id="submitFormData2" onclick="SubmitFormData2();" value="Submit" />
</form>
正如萨帕尔所说:
- 您不需要两个复选框,也许您想要一个单选按钮,但是可以选中一个复选框=是,未选中=否。我删除了其中一个。
- 您没有 ID 重定位。我改了。
- 使用 jQuery is(":checked"),你会得到一个 true 或 false,所以我按照你的代码将其解析为是或否。
由于它是一个复选框而不是单选机用户可以有多个选择,例如:
<input type="checkbox" name="relocation[]" class="relocation" value="Yes">
<input type="checkbox" name="relocation[]" class="relocation" value="No" >
<input type="checkbox" name="relocation[]" class="relocation" value="Both" >
尝试使用:checked
选择器,
$( ".relocation:checked" ).each(function(i,v){
alert(v.value)
});
在这里演示
我认为您应该为复选框使用 class 而不是 id,因为每个字段的 id 必须是唯一的。你应该试试这个:
<form id="myForm2" method="post" style="margin-left: -10%;">
<input type="text" class="form-control" id="preffered_loc" name="preffered_loc">
<input type="checkbox" name="relocation[]" class="relocation" value="Yes">
<input type="checkbox" name="relocation[]" class="relocation" value="No" >
<input type="button" id="submitFormData2" onclick="SubmitFormData2();" value="Submit" />
</form>
<script>
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = '';
var sap = '';
$( ".relocation" ).each(function() {
if($( this ).is(':checked')){
relocation = relocation+''+sap+''+$( this ).val();
sap = ',';
}
});
alert(rel);
$.post("r_two.php", { preffered_loc: preffered_loc,relocation: relocation },
function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
}
</script>
下面是一个示例代码供您参考
<form id="myForm" method="post">
Name: <input name="name" id="name" type="text" /><br />
Email: <input name="email" id="email" type="text" /><br />
Phone No:<input name="phone" id="phone" type="text" /><br />
Gender: <input name="gender" type="radio" value="male">Male
<input name="gender" type="radio" value="female">Female<br />
<input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
</form>
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var gender = $("input[type=radio]:checked").val();
$.post("submit.php", { name: name, email: email, phone: phone, gender: gender },
function(data) {
$('#results').html(data);
$('#myForm')[0].reset();
});
}
您根本无法选择复选框元素,因为您没有在选择器中包含[]
。您可以按照本 SO Q/A 中所述转义括号,也可以简单地删除括号(下面的示例代码执行后者)
我建议使用单选按钮,因为用户可以立即看到选项是什么。(两者都有第三种选择)
下面的代码使用复选框,并将所有选定的选项放入一个传递的数组中。这将允许用户同时使用这两个选项
<script>
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = [];
$(".relocation:checked").each(function () {
relocation.push ($this.vak ();
}); // :checked is provided by jquery and will only select a checkbox/radio button that is checked
$.post("r_two.php", { preffered_loc: preffered_loc,relocation: relocation },
function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
}
并且不要忘记从复选框类中删除[]
。
<script>
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = {};
$('.relocation').each(function(index) {
if ($(this).is(':checked')) {
relocation[index] = $(this).val();
}
});
relocation = JSON.stringify(relocation);
$.post("r_two.php", { preffered_loc: preffered_loc, relocation: relocation }, function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
}
</script>
变量"relocation"必须是一个包含多个值的对象,就像您所说的用户可以同时选择"是"和"否"一样。并将复选框类从 relocation[] 更改为 relocation。
相关文章:
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 如何获取所有选中复选框的所有值,然后将其提交到表单中
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- ASP MVC复选框表单提交问题
- 如何在将鼠标悬停在提交/锚点上时检查复选框是否已选中,并显示提示用户这样做的警报
- Rails 4:动态添加的复选框未提交
- 高级表单提交-单选、复选框和重定向
- 如何在提交时验证多个复选框
- 提交前验证超链接和复选框
- 为什么复选框在未选中时不提交任何数据
- 如何提交未选中复选框的值
- 如何使用javascript自动提交保存/重新填充的复选框
- 如何在提交时防止粘性复选框重置?(一页上有多个表格)
- HTML5/Javascript验证复选框提交URL重定向
- 使用复选框提交表单
- 使用复选框提交表单
- 使未选中的HTML复选框提交选中的值
- 通过取消选中复选框提交表单
- 可以't使用jQuery+Rails点击复选框提交表单
- Yahoo YUI2 datatable复选框提交