Menu
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>
595
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.
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
