Передача формы ajax jQuery с двумя кнопками отправки

У меня есть форма, которая выглядит так:

<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>

Когда я привязываюсь к форме submit ($("vote_form").submit()), у меня нет доступа к тому изображению, на которое пользователь нажал. Поэтому я пытаюсь привязать себя к самому клику ($(".vote_down, .vote_up").click()), который всегда отправляет форму, независимо от того, пытаюсь ли я

  • return false;
  • event.stopPropogation(); или
  • event.preventDefault();

потому что все они являются событиями формы.

  • Должен ли я присоединить свой $.post() к событию form.submit(), и если да, то как мне определить, какой вход пользователь нажал, или

  • Должен ли я прикреплять мой $.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!?
});

Ответы

Ответ 1

Основываясь на ответе Эммета, мое идеальное решение для этого было просто для того, чтобы убить форму submit с помощью 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)
    });
});

Ответ 2

Другое решение - использовать скрытое поле и обновить событие onclick. Это дает вам доступ от javascript, а также на сервере, где скрытое поле будет опубликован.

Ответ 3

Вы можете инициировать отправку формы по щелчку изображений. Это будет работать с 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();
});

Ответ 4

Я не понимаю, как 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;
});

Ответ 5

Попробуйте добавить 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>

Ответ 6

Вы также можете попробовать jquery From Plugin, который, как и всевозможные красивые инструменты для отправки форм через ajax.

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

Ответ 7

Не прибегая к плагину формы (который вы должны использовать), вы должны обрабатывать событие submit. Код оставался бы очень близким к оригиналу:

$("form").submit(function()) {
  $.post($(this).attr("action"), $(this).serialize(), function(data) {
    // work with the response
  });
  return false;
});

Ответ 8

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 ...