Question

我怎么知道我点击的形式？可以使用按钮类而不是带有id？

的按钮

$(document).ready(function () {
    $(".form-buttons").click(function () {
        //I only want the form wich corresponds to the button i clicked
        var formDates = $(form).serialize()
        alert ("You clicked "+formDates)
    })
})

<form id="form1">
    <input type="text" value="date1" name="name1"/>
    <input type="text" value="date2" name="name2"/>
    <input type="text" value="date3" name="name3"/>
    <button type="button" class="form-button"></button>
</form>
<form id="form2">
    <input type="text" value="date4" name="name1"/>
    <input type="text" value="date5" name="name2"/>
    <input type="text" value="date6" name="name3"/>
    <button type="button" class="form-button"></button>
</form>

Answer 1

是的，对于类似的元素，请使用class代替id。请试试这个。

注意：form-button是HTML中的类名，而不是form-buttons

$(document).ready(function () {
    $(".form-button").click(function () {
        var formDates = $(this).closest('form').serialize();
        alert ("You clicked "+formDates)
    })
})

Answer 2

您可以使用{DOM}事件中引用cibled元素的this关键字来获取元素的名称：

$(document).ready(function () {
    $(".form-buttons").click(function () {
        alert('You clicked the form' + this.parentElement.getAttribute('id'));
    })
})

Answer 3

我认为你在寻找

$('.form-button').on('click', function () {
    alert($(this).parents('form').attr('id')); // Check the ID of the form clicked
});

可能像上面提到的那样。

Answer 4

您可以通过几种不同的方式完成此操作。您可以遍历DOM并查看使用的表单或 - 这是我最喜欢的 - 您可以提交表单！

解决方案1：遍历DOM

<script>
        $(document).ready(function () {
            $(".form-button").click(function () {
                var clicked_form = $(this).parent();
                var formDates = clicked_form.serialize(); 
                alert ("You clicked "+formDates);
            })
        })
    </script>
</head>

<body>
    <form id="form1">
        <input type="text" value="date1" name="name1"/>
        <input type="text" value="date2" name="name2"/>
        <input type="text" value="date3" name="name3"/>
        <button type="button" class="form-button"></button>
    </form>
    <form id="form2">
        <input type="text" value="date4" name="name1"/>
        <input type="text" value="date5" name="name2"/>
        <input type="text" value="date6" name="name3"/>
        <button type="button" class="form-button"></button>
    </form>
</body>

解决方案2：提交表单

您已使用该表单，为什么不提交呢？将按钮更改为输入元素类型为submit并截取提交事件，如下所示。这就是我认为应该完成的方式。它对用户体验也更好，因为用户只需按Enter即可提交表单。

<script>
        $(document).ready(function () {
            $("form").on('submit', function (e) {
                e.preventDefault();                    
                var formDates = $(this).serialize() 
                alert ("You clicked "+formDates)
            })
        })
    </script>
</head>

<body>
    <form id="form1">
        <input type="text" value="date1" name="name1"/>
        <input type="text" value="date2" name="name2"/>
        <input type="text" value="date3" name="name3"/>
        <input type="submit" class="form-button"></input>
    </form>
    <form id="form2">
        <input type="text" value="date4" name="name1"/>
        <input type="text" value="date5" name="name2"/>
        <input type="text" value="date6" name="name3"/>
        <input type="submit" class="form-button"></input>
    </form>
</body>

Answer 5

检查这个小提琴我将如何做。

https://jsfiddle.net/xtfeugav/

简单使用

$("form").submit(function(e) {

听取您拥有的所有表格的每次提交。要获取您使用的表单的ID

var formid = $(this).attr('id');

我使用e.preventDefault();来阻止表单不更新页面。

请务必在表单上使用<input type="submit" value="Submit">来完成此工作。

它是一个简单的代码，希望它有所帮助。

如何知道我用按钮类点击了哪个表单

5 个答案: