javascript - 如何获取表单的id，只有提交的

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

每个表单提交的输出都是不断的 filterHeadByFamNum

Answer 1

与其向按钮添加事件监听器，不如监听 form 上的 submit 事件:

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