Question

我的html中有4个表单，并且需要提交的表单ID。但每次不断第一次形成的id都会出现在输出中。我的HTML是：

<form name="form" id="filterHeadByFamNum" 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="filterByFamNum();return false;">Submit</button>
</form>

<form name="form" id="filterHeadByMemName" class="form-horizontal" role="form">
    <div class="form-group">
        <label>Head Name</label> <input type="text" name="head" placeholder="Head Name" class="form-control">
    </div>
    <button type="button" class="btn btn-primary" id="head" onclick="filterByMemName();return false;">Submit</button>
</form>

<form name="form" id="filterMemberByPhone" class="form-horizontal" role="form">
    <div class="form-group">
        <label>Phone Number</label> <input type="text" name="phone" placeholder="Phone Number" class="form-control">
    </div>
    <button type="button" class="btn btn-primary" onclick="filterByPhone();return false;">Submit</button>
</form>

<form name="form" id="filterMemberByCNIC" class="form-horizontal" role="form">
    <div class="form-group">
        <label>CNIC</label> <input type="text" name="cnic" placeholder="CNIC" class="form-control">
    </div>
    <button type="button" class="btn btn-primary" onclick="filterByCNIC();return false;">Submit</button>
</form>

我的js是

function filterByFamNum(){
    var name = $(this.form).attr('id');
    console.log(name);
}

function filterByMemName(){
    var name = $(this.form).attr('id');
    console.log(name);
}

function filterByPhone(){
    var name = $(this.form).attr('id');
    console.log(name);
}

function filterByCNIC(){
    var name = $(this.form).attr('id');
    console.log(name);
}

每个表单提交的Ouptut始终是filterHeadByFamNum

Answer 1

不要在按钮上添加事件监听器，只需在submit上听取form事件：

$('form').on('submit', function () {
    var id = this.id;
    console.log(id);
});

..或没有jQuery：

Array.prototype.forEach.call(document.querySelectorAll('form'), function (el) {
    el.addEventListener('submit', function () {
        var id = el.id;
        console.log(id);
    });
});

Answer 2

我会使用@JoshCrozier解决这个问题的方法，但仅仅是为了完成和/或如果你坚持使用你的解决方案。这是：

jsbin DEMO - ＆gt; http://jsbin.com/yiteludomu/2

在每个javascript函数中添加this作为参数，以发送您点击的按钮。

<button type="button" class="btn btn-primary" onclick="filterByFamNum(this);return false;">Submit</button>

这是你如何处理按钮点击..观察btn这是点击的按钮。

function filterByFamNum(btn){
    var name = $(btn).parent('form').attr('id');
    alert(name);
}

Answer 3

var submittedForms = [];
$('form').on('submit', function () {
    submittedForms.push(this.id);
});

submittedForms数组将保存所有提交表单的ID。

如何获取表单的ID，仅提交

3 个答案: