21

我有一个看起来像这样的表格：

<form action="/vote/" method="post" class="vote_form">
    <input type="hidden" name="question_id" value="10" />
    <input type="image" src="vote_down.png" class="vote_down" name="submit" value="down" />
    <input type="image" src="vote_up.png" class="vote_up" name="submit" value="up" />
</form>

当我绑定到表单的提交 ( $("vote_form").submit()) 时，我似乎无法访问用户单击的图像。所以我试图绑定到点击图像本身（$(".vote_down, .vote_up").click()），它总是提交表单，不管我是否尝试

  • 返回假；
  • event.stopPropogation(); 或者
  • event.preventDefault();

因为所有这些都是表单事件。

  1. 我应该将我的 $.post() 附加到 form.submit() 事件，如果是，我如何判断用户点击了哪个输入，或者

  2. 我应该将我的 $.post() 附加到图像点击，如果是这样，我如何防止表单也提交。

这是我的 jQuery 代码现在的样子：

$(".vote_up, .vote_down").click(function (event) {
    $form = $(this).parent("form");
    $.post($form.attr("action"), $form.find("input").serialize() + {
        'submit': $(this).attr("value")
    }, function (data) {
        // do something with data
    });
    return false; // <--- This doesn't prevent form from submitting; what does!?
});
4

8 回答 8

29

根据 Emmett 的回答，我对此的理想解决方法就是用 Javascript 本身终止表单的提交，如下所示：

$(".vote_form").submit(function() { return false; });

这完全奏效了。

为了完整起见，我在原帖中的一些 JS 代码需要一点爱。例如，我添加到序列化函数的方式似乎不起作用。这做到了：

    $form.serialize() + "&submit="+ $(this).attr("value")

这是我的整个 jQuery 代码：

$(".vote_form").submit(function() { return false; });
$(".vote_up, .vote_down").click(function(event) {
    $form = $(this).parent("form");
    $.post($form.attr("action"), $form.serialize() + "&submit="+ $(this).attr("value"), function(data) {
        // do something with response (data)
    });
});
于 2009-09-02T15:43:39.537 回答
4

另一种解决方案是使用隐藏字段，并让 onclick 事件更新其值。这使您可以从 javascript 以及将在其中发布隐藏字段的服务器上进行访问。

于 2010-07-02T22:21:32.913 回答
2

您可以在单击图像时触发表单提交。这将与 preventDefault() 一起使用。

var vote;
$(".vote_up, .vote_down").click(function(event) {
    vote = $(this).attr("class");
    $(".vote_form").trigger("submit");
});

$(".vote_form").submit(function(event) { 
    $form = $(this);
    $.post($form.attr("action"), $form.serialize() + "&submit="+ vote, function(data) {
        // do something with response (data)
    });     
    event.preventDefault();
});
于 2013-02-14T12:13:23.820 回答
1

我不明白怎么做return false，也preventDefault没有做好他们的工作。也许尝试用链接图像替换图像按钮：

<a href="#" class="vote_down"><img src="vote_down.png"/></a>

$('#vote_form > a').click(function(e) {
    e.preventDefault();

    //one way to know which image was clicked
    alert($(this).attr('class'));

    $.post(...
});

您始终可以通过绑定到提交事件来确保表单不提交，例如：

$('#vote_form').submit(function() {
    return false;
});
于 2009-09-01T23:10:38.547 回答
0

尝试添加 onsubmit="return false;" 到您的表单，然后使用 javascript 提交您的表单：

<form action="/vote/" method="post" name="vote_form" class="vote_form" onsubmit="return false;">
    <input type="hidden" name="question_id" value="10" />
    <input type="image" src="vote_down.png" class="vote_down" name="submit" value="down" onclick="imageClicked(this)"/>
    <input type="image" src="vote_up.png" class="vote_up" name="submit" value="up" onclick="imageClicked(this)"/>
</form>

<script>
function imageClicked(img) {
    alert(img.className);
    document.forms["vote_form"].submit();
}
</script>
于 2009-09-01T23:23:52.717 回答
0

您还可以尝试使用 jquery From Plugin 作为通过 ajax 提交表单的各种不错的工具。

http://malsup.com/jquery/form/

于 2009-09-02T00:05:22.977 回答
0

如果不求助于表单插件（您应该使用），您应该处理提交事件。代码将非常接近原始代码：

$("form").submit(function()) {
  $.post($(this).attr("action"), $(this).serialize(), function(data) {
    // work with the response
  });
  return false;
});
于 2009-09-02T01:27:28.197 回答
0 
var form = jQuery('#myform');

var data = form.serialize();

// add the button to the form data
var btn = jQuery('button[name=mybuttonname]').attr('value');
data += '&yourpostname=' + btn;

var ajax = jQuery.ajax({
    url: url,
    type: 'POST',
    data: data,
    statusCode: {
        404: function () {
            alert("page not found");
        }
    }
});
... rest of your code ...
于 2013-02-28T19:37:45.610 回答