Jquery doesn't prevent the submit button action

Question

could you help me with these please:

I'm working on a PHP-Jquery-AJAX-JSON search, the idea is to have a php form where to type the ID of a specific employee and then via AJAX show the name in a div always in the same php form.

My problem is that I can show the message I would like to display in the div because when I press the submit button it always redirects to the action page specified in the form instead of just show the message into the div, so could you please tell me what is my problem? as you will see I specified e.preventDefault() in the code as show below:

$(document).ready(function() {
 $("#submit_id").click(function (e) {
   e.preventDefault();
   var id = $("input#ID_id");   

  if(validaForm(id)){ 

  $("#submit_id").hide();
  var url = $("#form_id").attr('action'); 
  var data = $("#form_id").serialize();   
  var type = $("#form_id").attr('method');

  $("#LoadingImage").show();
  $("#ajax_id").html("<div class='cargando'> realizando busqueda</div>");

$.ajax({
    url:url,          
    data:data,       
    type:type,      
    cache: false,  
    contentType: "application/x-www-form-urlencoded", 
    dataType: 'json', 
    encode: true

    .done(function(data) {   // using the done promise callback
       if ( ! data.success) {
        $("#LoadingImage").fadeOut();
          if (data.errors.ID_name) {
           $("#ajax_id").html("<div class='cargando'> Debe especificar el ID</div>");           
            } // if

        } // if 
        else {
            $("#ajax_id").html("<div class='cargando'> Tudo Ben</div>");
        } // else
    }) // done-promise


    .fail(function(data) {   // using the fail promise callback

        console.log(data);
    }); // fail-promise

    }); // AJAX call

  } // validaForm*/
            });
    });

    function validaForm(id){
        var id_val = id.val().trim();
        if((id_val=="") || id_val.replace(/s+/,'') == ''){
            alert("Favor ingrese el ID");
            id.addClass("posicionamiento");
            $("#div_id").html("<div class='error'>Debe especificar el nombre</div>");
            return false;
        }else{  
        id.removeClass("posicionamiento");
        $("#div_id").empty();
        }
        return true;
    }

HTML:

<html>
  <head>
    <title>BUSCADOR</title>
  </head>
  <body>
    <form method="post" id="form_id" action="process.php">
      <fieldset>
        <legend>Buscador Asincrono</legend>
        <p>ID a buscar: <input type="text" name="ID_name" id="ID_id"/>
          <div id="estado_id"></div></p>
        <p><input type="submit" id="submit_id" value="Buscar"/></p>
        <img src="imagenes/cargando.gif" id="LoadingImage" style="display:none" align="center"/> <div id="ajax_id" align="center"></div>
      </fieldset>
    </form>
  </body>
</html>

Try to return FALSE in $("#submit_id").click function or use the "button" instead of "submit" component in your HTML form. — Darian
– Darian, Commented May 15, 2015 at 15:11
thanks, I just tried but still send me to the action specified php page — Pablo Tobar
– Pablo Tobar, Commented May 15, 2015 at 15:21
Also I'm pretty sure the done and fail are in the wrong place? Why are they inside the object you pass to $.ajax? — Crembo
– Crembo, Commented May 15, 2015 at 15:30
Darian, this is the html code(I'm so sorry I don't know how to post it the right way) <title>BUSCADOR</title> </head> <form method="post" id="form_id" action="process.php"> <fieldset> <legend> Buscador Asincrono</legend> <p>ID a buscar: <input type="text" name="ID_name" id="ID_id"/><div id="estado_id"></div></p> <p><input type="submit" id="submit_id" value="Buscar"/></p> <img src="imagenes/cargando.gif" id="LoadingImage" style="display:none" align="center"/> <div id="ajax_id" align="center"></div> </fieldset> </form> </html> — Pablo Tobar
– Pablo Tobar, Commented May 15, 2015 at 15:33

Marc · Accepted Answer · 2015-05-15 16:43:36Z

6

You are trying to prevent the click event instead of the submission itself.

Use .submit (doc) instead of .click in your event handler (and bind the event to the form instead of the submit button):

$(document).ready(function() {
 $("#form_id").submit(function (e) {
   e.preventDefault();
   // ...

If you want to submit the form at a specific point, you can use then $("#form_id").submit();

Update: I made a fiddle to find out what was wrong:

You closed your .ajax() too late :-)

$.ajax({
// ... 
    .done(function(data) {   // using the done promise callback
    // ...
    }) // done-promise
    .fail(function(data) {   // using the fail promise callback
    // ...
    }); // fail-promise
}); // AJAX call

Change this to:

$.ajax({
   // ... 
}) // AJAX call
.done(function(data) {   // using the done promise callback
   // ...
}) // done-promise
.fail(function(data) {   // using the fail promise callback
    // ...
}); // fail-promise

It's corrected in the fiddle.

edited May 15, 2015 at 16:43

answered May 15, 2015 at 15:08

Marc

3,7198 gold badges37 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cliff Burton Over a year ago

@PabloTobar what is the error you get with this solution?

Collectives™ on Stack Overflow

Jquery doesn't prevent the submit button action

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related