issue with my form submission and jquery

Question

I have called a jquery function in form onSubmit if the status is false, then don't allow form submission but currently, it is going to submitted page

here is my whole code php form

echo "<form name='formulaire' id='my_form' method='POST' action='presale_pay.php' onSubmit='return veriftel();'>";
echo "<input type='text' name='promocode' placeholder='Enter Promo Code' id='promo'><div id='result'></div>";

echo "<p> <input type='submit' value='CONFIRM'></form>";

promocheck.php

<?php
include("include/control.php");


if (SessionValide ($session, $bd))
{
   $data=array();
    $promo=$_POST["promo"];

    $party=$bd->ligneSuivante($bd->execRequete("SELECT * FROM promocodes WHERE promocode='$promo' AND used_nbr<=valid_nbr"));
  if(!empty($party))
  {

   $data["status"]=true;
   $data["percentage"]=$party["percentage"];

  }
 else {
       $data["status"]=false;
  }
  echo json_encode($data);
}
?>

function veriftel(e)


    {

            $.ajax({
            type: 'post',
            url: 'promocheck.php',
            data:{promo:$("#promo").val()}, 
            dataType: 'json',
            success: function (data) {

             if(data.status==false)
             {
                $("#result").html("<font color=red>Invalid promocode</font>");
            return false;

             }
             else 
             {
                 return true;
             }
            }
          });
}

please help me to prevent form submit

Possible duplicate of [Using JQuery - preventing form from submitting](https://stackoverflow.com/questions/9347282/using-jquery-preventing-form-from-submitting) — Pradeep, May 05 '18 at 17:59
Please post the HTML and the code where you set the event on the button. — RWRkeSBZ, May 05 '18 at 18:04
the answer that padeep gave you should solve your problem why dont use an event for trigering the submit? — Geomorillo, May 05 '18 at 18:19
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/170433/discussion-between-susana-and-geomorillo). — susana, May 05 '18 at 18:20

score 2 · Answer 1 · answered May 05 '18 at 18:29

The problem is that the following ajax call is asynchronous one. Your code will not wait till you get response from the server, hence the function returns before the completion of ajax call and response.

To avoid the following problem, you'll have to make your ajax call synchronous. Add aysnc:false to make it syncronous

    $.ajax({
    type: 'post',
    async: false, //syncronous call
    url: 'promocheck.php',
    data:{promo:$("#promo").val()}, 
    dataType: 'json',
    success: function (data) {

    }

Please note that making the call synchronous will cause the javascript execution to freeze in the webpage.

yes that may solve the issue i did not think of that – Geomorillo May 05 '18 at 18:36 — Geomorillo, May 05 '18 at 18:36

Geomorillo · Accepted Answer · 2018-05-05T19:31:53.680

should work like this

function veriftel(e)
{
e.preventDefault(); 
$.ajax({
type: 'post',
async: false, 
url: 'promocheck.php',
data:{promo:$("#promo").val()}, 
    dataType: 'json',
    success: function (data) {
        console.log(data);
     if(data.status==false)
     {
        $("#result").html("<font color=red>Invalid promocode</font>");
        console.log("false");
      return false;

     }
     else 
     {
         console.log("true");
         return true;
     }
    }

  });

}

also the php code should pass the event to the function

echo "<form name='formulaire' id='my_form' method='POST' action='presale_pay.php' onSubmit='return veriftel(event);'>";

issue with my form submission and jquery

2 Answers2