通过javascript提交复选框的值

Submit value of a checkbox through javascript

本文关键字:复选框 提交 javascript 通过      更新时间:2023-09-26

我正在尝试通过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。