Javascript: вернуть false из асинхронной функции

У меня есть реальная проблема, пытаясь заставить эту форму работать должным образом. Форма должна проверять каждое поле и успешно снимать средства с кредитной карты перед отправкой.

Проблема в том, что я не могу передать возвращаемое значение родительской функции, чтобы предотвратить отправку формы. Я прочитал этот пост и попытался использовать отложенные объекты, функцию обратного вызова и разместить операторы возврата повсюду, но я что-то упустил. Я занимаюсь этим около недели, и разочарование доходит до меня. Может ли кто-нибудь помочь мне с этим? Я был бы очень признателен, и спасибо!

HTML:

<form onSubmit="return billingfunction1();" name="form5" method="post" action="" id="newform">
    </form>

JS: (обрезается по размеру)

function billingfunction1() {
var first_name = $.trim($("#first_name").val());
var last_name = $.trim($("#last_name").val());
var cardtype = $.trim($("#cardtype").val());

var maxlen = 16;


var digits = cardnumber.toString().length;
var submiteval;


if (cardtype == '') {
   // alert("Enter Card Type");
    $('#cardtype_msg').html('Enter Card Type.');
   $('#cardtype').css('border','1px solid #28a616');
   $('#cardtype').css('box-shadow','0 0 3px 0 #28a616');
    return false;
} else if (nameoncardfirst == '') {
    //alert("Enter Name On Card");
     $('#nameoncardfirst_msg').html('Enter First Name On Card.');
   $('#nameoncardfirst').css('border','1px solid #28a616');
   $('#nameoncardfirst').css('box-shadow','0 0 3px 0 #28a616');
    return false;
} else if (nameoncardlast == '') {
    //alert("Enter Name On Card");
     $('#nameoncardlast_msg').html('Enter Last Name On Card.');
   $('#nameoncardlast').css('border','1px solid #28a616');
   $('#nameoncardlast').css('box-shadow','0 0 3px 0 #28a616');
    return false;
} else {    
     function foo(callback) {
        return $.ajax({
        url: 'edit_billing2.php',
        data: "nameoncardfirst=" + nameoncardfirst+ "&nameoncardlast=" + nameoncardlast + "&street_address2=" + street_address2 +"&city2=" + city2 +"&state=" + state +"&zip=" + zip + "&cardnumber=" + cardnumber + "&expirationdate=" + expirationdate + "&cvv=" + cvv + "&cardtype=" + cardtype+ "&amount=" + amount + "&gender=" + gender + "&first_name=" + first_name + "&last_name=" + last_name + "&address=" + address + "&address2=" + address2 + "&city=" + city + "&post_code=" + post_code + "&country=" + country + "&mobile=" + mobile + "&email=" + email + "&newsletter=" + newsletter + "&make=" + vehicle + "&model=" + model + "&model_year=" + model_year,

        success: callback                
        });
    }
    function myCallback(response) {
        console.log("Success response. Attempting to authorize payment.");
            //alert(response);
            result = response.split('_');
            //alert("Successfully Saved");
            alert(result[0]);
           if(result[0]=="Your Payment has completed successfully")
           {
            console.log("Payment Success");

            submiteval = true;   
           }
           else
           { 
            console.log("Payment Failed, Aborting form submission.");
            submiteval = false;
           }
            return submiteval;
    }
    console.log("Valid inputs: attempting to pass via AJAX");
    foo(myCallback).done(function(response) {
        return submiteval;
    });
}

РЕДАКТИРОВАТЬ:

Я попытался использовать event.preventDefault(), чтобы остановить отправку и обработать отправку вручную, но затем форма перезагрузит текущую страницу и пропустит какой-то PHP, который был у меня до кода формы, о котором я не упомянул:

if  (isset($_POST[Submit]))
{
//    do registration things
}

В итоге я изменил $_POST[Submit] на

if  ($_SERVER['REQUEST_METHOD'] == 'POST')
{ 
//    do registration things
}

удаление атрибута onsubmit из моей формы:

<form name="form5" method="post" action="" id="newform">

и переместить его в мою кнопку отправки:

<input onClick="return billingfunction1();" type="submit" value="Submit" 
name="Submit" class="submit_btn">

Моя новая функция обратного вызова отправит форму вручную при условии успеха:

function myCallback(response) {
    console.log("Success response. Attempting to authorize payment.");
    result = response.split('_');
    alert(result[0]);
    if(result[0]=="Your Payment has completed successfully") {
           console.log("Payment Success");
           document.forms["form5"].submit();
    } else { 
        console.log("Payment Failed, Aborting form submission.");
    }
}

Кажется, все работает как надо. Большое спасибо за Вашу помощь!

Источник

3 ответа

Вы можете просто добавить слушателя отправки в форму

$("#newform").submit(function(){...})

Запретить действие по умолчанию

event.preventDefault()

И отправьте форму вручную

$("#newform").submit()

если условие выполняется, когда ответ на вызов AJAX возвращается.

Источник

выделенный текст

function billingfunction1() {
var first_name = $.trim($("#first_name").val());
var last_name = $.trim($("#last_name").val());
var cardtype = $.trim($("#cardtype").val());

var maxlen = 16;


var digits = cardnumber.toString().length;
var submiteval;


if (cardtype == '') {
   // alert("Enter Card Type");
    $('#cardtype_msg').html('Enter Card Type.');
   $('#cardtype').css('border','1px solid #28a616');
   $('#cardtype').css('box-shadow','0 0 3px 0 #28a616');
    return false; //show error to the user instead of returning false
} else if (nameoncardfirst == '') {
    //alert("Enter Name On Card");
     $('#nameoncardfirst_msg').html('Enter First Name On Card.');
   $('#nameoncardfirst').css('border','1px solid #28a616');
   $('#nameoncardfirst').css('box-shadow','0 0 3px 0 #28a616');
    return false; //show error to the user instead of returning false
} else if (nameoncardlast == '') {
    //alert("Enter Name On Card");
     $('#nameoncardlast_msg').html('Enter Last Name On Card.');
   $('#nameoncardlast').css('border','1px solid #28a616');
   $('#nameoncardlast').css('box-shadow','0 0 3px 0 #28a616');
    return false; //show error to the user instead of returning false
} else {    
        $.ajax({
        url: 'edit_billing2.php',
        data: "nameoncardfirst=" + nameoncardfirst+ "&nameoncardlast=" + nameoncardlast + "&street_address2=" + street_address2 +"&city2=" + city2 +"&state=" + state +"&zip=" + zip + "&cardnumber=" + cardnumber + "&expirationdate=" + expirationdate + "&cvv=" + cvv + "&cardtype=" + cardtype+ "&amount=" + amount + "&gender=" + gender + "&first_name=" + first_name + "&last_name=" + last_name + "&address=" + address + "&address2=" + address2 + "&city=" + city + "&post_code=" + post_code + "&country=" + country + "&mobile=" + mobile + "&email=" + email + "&newsletter=" + newsletter + "&make=" + vehicle + "&model=" + model + "&model_year=" + model_year,

        success: myCallback                
        });
    function myCallback(response) {
        console.log("Success response. Attempting to authorize payment.");
            //alert(response);
            result = response.split('_');
            //alert("Successfully Saved");
            alert(result[0]);
           if(result[0]=="Your Payment has completed successfully")
           {
            console.log("Payment Success");

            submiteval = true; 
            document.forms["form5"].submit();
           }
           else
           { 
            console.log("Payment Failed, Aborting form submission.");
            submiteval = false; //show error to the user instead of returning false
           }
            return submiteval;
    }
}
<form  name="form5" method="post" action="" id="newform">
<input type="button" value ="submit" onClick="billingfunction1();" />
    </form>

Назначьте billingfunction1 событию onclick вместо отправки. используйте document.forms["form5"].submit(), чтобы вручную отправить форму после проверки ответа от сервера.

Источник

У $.ajax есть опция с именем beforeSend(func). Вы можете проверить ваши данные в этой функции и вернуть false, чтобы отменить ajax.

Источник
Другие вопросы по тегам