JQuery does not prevent submit button action
Could you please help me with this:
I am working on a PHP-JQuery-AJAX-JSON search, the idea is to have a php form where to enter the id of a particular employee and then via AJAX show the name in the div always in the same php form.
My problem is that I can show the message that I would like to display in the div because when I click on the submit button it always redirects to the action page specified in the form, instead of just showing the message in the div, so please tell me what is my problem? as you will see I have specified e.preventDefault () in the code as shown 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>
source to share
You are trying to prevent a click event instead of the view itself.
Use .submit
( doc ) instead .click
in your event handler (and bind the event to the form instead of submitting the button):
$(document).ready(function() {
$("#form_id").submit(function (e) {
e.preventDefault();
// ...
If you want to submit the form to a specific point, you can use it $("#form_id").submit();
Update: I did a fiddle to find out what is wrong:
You closed yours .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
This is fixed in the violin.
source to share