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

Javascript function not showing second form name

本文关键字：表单 第二个 显示 函数 Javascript      更新时间：2023-10-29

我有两个不同id的表单，在javascript函数中，我将在变量名称中获取表单id，但在名称变量中，只有第一个表单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表单。

请帮帮我。

您编写的javascript不知道如何区分这两个表单，因为您在$("form")上调用serialize()——您有两个表单——所以它会选择找到的第一个。这只是问题的一部分。您有两个具有相同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示例

相关文章：