从按钮单击侦听器上的不同表单中选择的 jquery 元素答案

【问题标题】：jquery elements selecting from diffrent forms on button click listners从按钮单击侦听器上的不同表单中选择的 jquery 元素
【发布时间】：2011-12-22 21:44:47
【问题描述】：

好的，所以我在我的网站的首页上有三个表单，我不是最好的 jquery 选择器或 .each 函数....所以我将 j 查询 ui 按钮链接到发送 ajax 的事件侦听器发布但问题是我不能只指定我想要的形式！这是我的代码

<form>
fields......
fields......
fields......
fields......
<button>register</button>
</form>
<form>
fields......
fields......
fields......
fields......
fields......
<button>login</button>
</form>
<form>
fields......
fields......
fields......
fields......
fields......
<button>book</button>
</form>
$(function(){
    $('button').click(function(event) {
        $('form .... i wanna hide all forms once clicked .. working!!!').hide();
        event.preventDefault();
        $('pload').html('<img src="source/image/lbl.gif">');
             // heres where i get the data from all forms i just want one....
        var page = 'form.'+$('form').serialize();
        var huh = $('input:hidden').val();
        var data = 'pop='+huh+'&page='+page;
        $.post('source/php/bots/authorize.php',data,function(data){
                $('#pager_master_div').html(data);
                $('pload').html('');
            });
    });
});

【问题讨论】：

标签： jquery jquery-ui button jquery-selectors

【解决方案1】：

要选择被点击的按钮所在的表单：

$('button').on('click', function (event) {

    //stop the form from submitting normally since you are handling the submission with AJAX
    event.preventDefault();

    var $parentForm = $(this).parents('form'),//get this button's form
        page        = 'form.' + $parentForm.serialize(),//serialize the selected form
        huh         = $parentForm.find('input:hidden').val();//get the value of the hidden input in the selected form
});

这是一个演示：http://jsfiddle.net/vrjxr/

【讨论】：

我无法让表单停止刷新页面？？？？我应该在按钮中附加返回 false
@YoungnateDaGreat 是的，如果您自己使用 AJAX 处理表单的提交，那么您想使用 event.preventDefault() 或 return false（请注意，在 jQuery 事件处理程序中 return false 是和调用event.preventDefault();event.stopPropagation()一样。

【解决方案2】：

所以，替换：

var page = 'form.'+$('form').serialize();

为：

var page = "form."+$(this).closest('form').serialize();

所以你会得到哪个是单击按钮（this）的最近父级。

$('input:hidden') 选择器有问题吗？我无法确定这个问题，但如果是这样，您可以将$(this).closest('form') 放入变量中，然后使用variable.find('input:hidden')。

【讨论】：