두 개의 제출 단추와 함께 jQuery agax 양식 제출

두 개의 제출 단추와 함께 jQuery agax 양식 제출

다음과 같은 양식이 있습니다.

<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.stopPropation(); 또는
• event.proventDefault();

왜냐하면 그것들은 모두 형식적인 사건이기 때문입니다.

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!?
});

에밋의 답변에 따르면, 이에 대한 제 이상적인 해결책은 다음과 같이 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)
    });
});

또 다른 해결책은 숨겨진 필드를 사용하여 클릭 시 이벤트의 값을 업데이트하는 것입니다.그러면 숨겨진 필드가 게시될 서버뿐만 아니라 Javascript에서 액세스할 수 있습니다.

영상을 클릭하면 양식 제출을 트리거할 수 있습니다.이는 기본값 방지()와 함께 작동합니다.

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();
});

어떻게 하는지 모르겠어요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;
});

양식에 submit="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>

아약스를 통해 양식을 제출하기 위한 모든 종류의 좋은 도구인 플러그인에서 jquery를 사용할 수도 있습니다.

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

양식 플러그인(사용해야 하는)에 의존하지 않고 제출 이벤트를 대신 처리해야 합니다.코드는 원본에 상당히 가깝게 유지됩니다.

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

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

언급URL : https://stackoverflow.com/questions/1365059/submitting-a-jquery-ajax-form-with-two-submit-buttons