Question

我有2个不同ID的表单，在javascript函数中我将在变量名中获取表单id，但在名称变量中只有第一个表单id正在运行，而不是表单2 id我的代码是。

HTML

<form name="form" id="filterMemberByFamNum" class="form-horizontal" role="form">
  <div class="form-group">
    <label>Family Number</label> <input type="text" name="familyNumber" placeholder="Family Number" class="form-control">
  </div>
  <button type="button" class="btn btn-primary" onclick="filterMembers();return false;">Submit</button>
</form>

<form name="form" id="filterMemberByMemName" class="form-horizontal" role="form">
  <div class="form-group">
    <label>Member Name</label> <input type="text" name="member" placeholder="Member Name" class="form-control">
  </div>
  <button type="button" class="btn btn-primary" onclick="filterMembers();return false;">Submit</button>
</form>

JS

function filterMembers() {
  //alert("Submitted");
  var str = $("form").serialize();
  var name = $(this.form).attr('id');

  console.log(name);

  $.post("model/handler.php?name=" + name + "&op=formSubmit", {
    'data': str
  }, function(data) {
    $('#members').html(data);
  }, "json");

  return false;
}

控制台标签中的任何时候输出结果都是filterMemberByFamNum，我提交filterMemberByMemName表单。

请帮帮我。

Answer 1

您编写的javascript不知道如何区分这2个表单，因为您在serialize()上调用$("form") - 您有2个表单，因此它会选择它找到的第一个表单。这只是问题的一部分。您有2个具有相同name属性的表单。那些应该是独一无二的。

由于您已经在使用jQuery，因此将其重写为

$(".form-horizontal").on( "submit", function( event ) {
  var str = $(this).serialize();
  var name = $(this).attr('id');
  console.log(name);
  $.post("model/handler.php?name="+name+"&op=formSubmit",
    {
        'data':str
    },function(data){
        $('#members').html(data);
    },"json");
  return false;
});

并删除按钮上的onclicks。您实际上也需要按下type="submit"按钮。

jsfiddle example

Javascript函数没有显示第二个表单名称

1 个答案: