Question

我正在尝试通过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也只选择值yes。任何人都可以请更正我的代码

Answer 1

试试这个。

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是（“：checked”）你得到一个真或假，所以我把它解析为是或否，跟着你的代码。

Answer 2

以下是供您参考的示例代码

<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();
    });
}

Answer 3

由于其复选框而非无线电用户可以有多个选择，例如：

<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)
});

Demo here

Answer 4

您根本无法选择复选框元素，因为您未在选择器中包含EndDateTime。您可以按照this 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(); }); }。

Answer 5

我认为你应该使用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>

Answer 6

<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'必须是一个包含多个值的对象，就像你说用户可以选择YES和NO一样。并将复选框类从重定位[]更改为重定位。

通过javascript提交复选框的值

6 个答案: