JQuery: AJAX POST внутри формы - предотвратить отправку формы при вызове AJAX

Question

Я пытаюсь выполнить ajax-вызов внутри формы (форма редактирования узла Drupal), но кажется, что при выполнении вызова он отправляет форму по какой-то причине.Вот пример кода:

jQuery.ajax({
     type: "POST",
     url: "my_custom/url",
     dataType: "html",
     data: {"text": jQuery("#edit-body").html()
      },
     success: function(result){
        console.log(result);
     }
    });  

Я могу повторить это, просто выполнив его в консоли, но я прикрепляю это к функции нажатия кнопки внутри формы.Есть ли какие-либо советы по предотвращению отправки формы при вызове ajax POST?

Вот полный запрашиваемый код

        jQuery("#edit-body").before('<div id="proofread_bot-button-holder"><button type="button"  id="proofread_bot-submit" onclick="return false;">Check with Proofread Bot</button></div>'); 
    jQuery("#proofread_bot-submit").click(function(event){
      event.preventDefault();
      jQuery("#proofread_bot-button-holder").append("<img id=\"proofread_bot_throbber\" src=\"sites/all/modules/proofread_bot/images/throbber.gif\" />");

      jQuery.ajax({
         type: "POST",
         url: "proofread_bot/check",
         dataType: "html",
         data: {"text": jQuery("#edit-' . variable_get('proofread_bot_field') . '").html()
          },
         success: function(proofread_result){
            jQuery("#proofread_bot-submit").after(proofread_result);
            jQuery("#proofread_bot_throbber").remove(); 
         }
        });    
      });

Answer 1

Вам нужно переопределить событие onsubmit формы, чтобы предотвратить отправку:

$("formSelector").bind('submit', function (e) {
    var isValid = someYourFunctionToCheckIfFormIsValid();
    if (!isValid) {
        e.preventDefault();
        return false;
    }
    else {
        jQuery.ajax({
            type: "POST",
            url: "my_custom/url",
            dataType: "html",
            data: { "text": jQuery("#edit-body").html()
            },
            success: function (result) {
                console.log(result);
            }
        });
        e.preventDefault();
        return false;
    }
});

Позвонив

e.preventDefault();
return false;

Вы предотвращаете синхронную обратную передачу.

UPDATE: Если вы не хотите переопределять отправку формы, возможно, вы можете поместить свою кнопку вне тега формы (вы можете отрегулировать положение с помощью css, если необходимо)?

Answer 2

Если вы используете кнопку input type = "submit" , то вам нужно выполнить return false; в конце функции, чтобы предотвратить ее отправку.

Другое решение - e.preventDefault () при нажатии кнопки

$(".button").click(function(e){
    e.preventDefault();
    return false;
});

Answer 3

Вы можете изменить тип кнопки отправки на просто тип кнопки и добавить событие «onclick» к этой кнопке. input type = "button" value = "savebutton" onclick = "return doThisOnClick ();"

function doThisOnClick(){
jQuery.ajax({
        type: "POST",
        url: "my_custom/url",
        dataType: "html",
        data: { "text": jQuery("#edit-body").html()
        },
        success: function (result) {
            console.log(result);
        }
    });

}

Я думаю, что это наиболее просто.