当页面上有多个表单时，Jquery获取所提交表单的文本字段的值

Question

    <form class="userControl">
        <input type="hidden" class="userName" name="userName" value="john759">
        <button class="action">Block</button>
    </form>

    <form class="userControl">
        <input type="hidden" class="userName" name="userName" value="dDuck">
        <button class="action">Block</button>
    </form>

    <form class="userControl">
        <input type="hidden" class="userName" name="userName" value="cCrow">
        <button class="action">Block</button>
    </form>

    $(".userControl").submit(function(e){
        e.preventDefault();

        var user = $(".userName").val();

        alert(user);

if(user) {
        $.ajax({
            type:"GET",
             url:"/user-control/",
            data:data,
        dataType:'json',

        beforeSend:function(html) {

        },

//etc

    });

在页面上有多个表单的情况下，要仅获取所提交表单的文本字段的值，正确且最可靠的方法是什么？

现在，即使我单击最后一个表单，我也会得到第一个表单的值。

表单是使用GET提交的，userName是传递给php脚本的内容。

Answer 1

你给它一些上下文。在提交处理程序中，您可以使用this变量引用表单。所以你可以简单地这样做：

$(".userControl").submit(function(e){
    e.preventDefault();

    var user = $(this).find(".userName").val();
    // other stuff
});