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())。これは、試行するかどうかに関係なく、常にフォームを送信します。

  • false を返します。
  • 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

エメットの答えに基づいて、これに対する私の理想的な修正は、次のようにフォームの送信を 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

もう 1 つの解決策は、隠しフィールドを使用し、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(...
});

submit イベントにバインドすることで、フォームが送信されないようにすることができます。

$('#vote_form').submit(function() {
    return false;
});
于 2009-09-01T23:10:38.547 に答える
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 に答える
0

また、ajax 経由でフォームを送信するためのあらゆる種類の便利なツールである jquery From Plugin を試すこともできます。

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

于 2009-09-02T00:05:22.977 に答える
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

Form プラグイン (使用する必要があります) に頼らずに、代わりに送信イベントを処理する必要があります。コードは元のコードにかなり近いままです。

$("form").submit(function()) {
  $.post($(this).attr("action"), $(this).serialize(), function(data) {
    // work with the response
  });
  return false;
});
于 2009-09-02T01:27:28.197 に答える