Javascript函数未显示第二个表单名称 [英] Javascript function not showing second form name

问题描述

我有2个具有不同ID的表单，在javascript函数中，我将获得变量名称中的表单ID，但在name变量中，仅第一个表单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;
}

实际上，我正在提交filterMemberByMemName表单.

请帮助我.

解决方案

您编写的JavaScript不知道如何区分这两种形式，因为您正在$("form")上调用serialize()-您有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示例

I have 2 forms with different ids, in javascript function I'm going to get form id in variable name, but in name variable only first forms id is going, not going form 2 id my code is.

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

Any time output result in console tab is filterMemberByFamNum infact I'm submitting filterMemberByMemName form.

Please help me.

解决方案

Your javascript as written doesn't know how to differentiate between the 2 forms because you are calling serialize() on $("form") - you have 2 forms, so it's gonna pick the first it finds. That's just part of the problem. You have 2 forms with the same name attribute. Those should be unique.

Since you are already using jQuery, rewrite this as

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

and remove the onclicks on the buttons. You'll actually need to also make the button type="submit" as well.

jsfiddle example

这篇关于Javascript函数未显示第二个表单名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！