0

I have a problem with my $.post query. Here is my code :

function verif_subscribe_sale() {
var URL_ROOT = "http://my_website.com/";

var email_sale = document.getElementById('email-sale');
var name_sale = document.getElementById('name-sale');
var url_sale = document.getElementById('url-sale');
var password_sale = document.getElementById('password-sale');
var token = document.getElementsByName('_token');

test = 0;

$.post(URL_ROOT + 'check-url', { url: url_sale.value, token: token.value } ).done(function( data ) {

    if(data == "notok" || data.length < 4){
        document.getElementById('error_url').style.display="block";
        test = 1;                                       
    }                                           
});

if(name_sale.value.length < 4){
        document.getElementById('error_name_length').style.display="block";
        test = 1;
}

 if(check_email(email_sale) != true) {          
        document.getElementById('error_mail').style.display="block";        
        test = 1;
}   

if(test == 0){      
    return true;
}else{      
    return false;
}}

This code is called from an HTML form:

 <form action="{{{ URL::to('create_my_sale') }}}" method="post" onsubmit="return    verif_subscribe_sale();">

The problem is, as post is asynchronous, the form can be submited even if the post return doesn't satisfy the condition. Is it possible to wait the end of the post loop before to submit the form? I tried some stackoverflow solution (like a callback), but it doesn't work...

Edit part:

I tried this way in the JS :

function verif_subscribe_sale(callback) {
var URL_ROOT = "http://www.mysite.com/";    

var url_sale = document.getElementById('url-sale'); 
var token = document.getElementsByName('_token');

test = 0;

$.post(URL_ROOT + 'check-url', { url: url_sale.value, token: token.value }   ).done(function( data ) {

    if(data == "notok" || data.length < 4){
        document.getElementById('error_url').style.display="block";
        test = 1;                                       
    }                                           
});

callback(test);  
}

function test_callback(test){

var name_sale = document.getElementById('name-sale');
var email_sale = document.getElementById('email-sale');
var password_sale = document.getElementById('password-sale');

if(name_sale.value.length < 4){
    document.getElementById('error_name_length').style.display="block";
    test = 1;
}

 if(check_email(email_sale) != true) {          
        document.getElementById('error_mail').style.display="block";        
        test = 1;
}   

if(test == 0){      
    return true;
}else{      
    return false;
}     
}

and i called it like that :

<form action="{{{ URL::to('create_my_sale') }}}" id="form-sale" method="post" onsubmit="return verif_subscribe_sale(test_callback);">

But it doesn't work too...

Vincent J.
  • 35
  • 7
  • 1
    Callbacks do work, and they're the only practical solution where you have asynchronous code. Your function won't work because your validation executes before the AJAX call returns. You probably need to restructure your code to make this work, but that will affect more than just the function you have here. –  Jan 29 '14 at 10:45
  • A callback is the solution to this problem. It's the only solution. If it didn't work for you, then you need to show us your callback code and ask for help with fixing it; the code you've shown us here is never going to work without being turned into a callback simply due to the nature of the post being async. – Spudley Jan 29 '14 at 10:49
  • Thanks for your answer. I'm not an expert in javascript This is not my code, and i don't know how to restructure it... – Vincent J. Jan 29 '14 at 10:53

2 Answers2

0

You shall better using ajax, and control your responses (works asynchronously): Here is sample code:

    var tout;
// ...

// some code ...

// ...

        function setExpressCheckout() {
            'use strict';
            var xmlhttp;

            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                var s;
                if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                    if (tout) {
                        clearTimeout(tout);
                    }
                    s = xmlhttp.responseText;
                    // put your own code here
                }
            };

            function ajaxTimeout() {
                xmlhttp.abort();
// put some message here, or whatever ...
                clearTimeout(tout);
            }

            clearTimeout(tout);

            tout = setTimeout(function () {
                ajaxTimeout();
            }, 15000);  // 15000 miliseconds = 15 seconds. you can choose your own timeout.

            xmlhttp.open("POST", "yourPage.php", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send("");
        }

Good luck!!!

Eitan
  • 1,286
  • 2
  • 16
  • 55
0

$.post is simply a shortcut for $.ajax({type: "POST", ...}).

With $.ajax you can use the parameter {async: false} to wait any amount of time before going on with the execution (timeout parameter is also available).

Jazain
  • 1
  • 1