php - jQuery Ajax request only works for single form submission -
i new jquery , ajax, put little system see if produce form various features new me, in hopes can use techniques in future. simple form submitting name, last name, email , phone no.
everything works fine when fill out form , submit, , response works fine. however, after response message disappears , form's fields cleared, entering new data , submitting form results in ajax request executing successfully, nothing sent action file, response area (where response message show normally) expanded if there message, nothing displayed. not sure how can better illustrate problem can see code:
<div id="wrap"> <div id="response"> <span></span> <div id="ri1"></div> <div id="ri2" class="r_user"></div> </div> <span class="wraptitle">form standard</span> <form method="post" action="process.php" id="mainform" name="mainform"> <table width="605" cols="3" border="0"> <tr> <td width="155"> first name <br /><span class="error" id="fname_error"></span> </td> <td width="450" colspan="2"><input type="text" name="firstname" id="firstname" class="input" /></td> </tr> <tr> <td width="155"> second name <br /><span class="error" id="sname_error"></span> </td> <td width="450" colspan="2"><input type="text" name="secondname" id="secondname" class="input" /></td> </tr> <tr> <td width="155"> email address <br /><span class="error" id="email_error"></span> </td> <td width="450" colspan="2"><input type="text" name="emailaddr" id="emailaddr" class="input" /></td> </tr> <tr> <td width="155"> phone number <br /><span class="error" id="phoneno_error"></span> </td> <td width="450" colspan="2"><input type="text" name="phoneno" id="phoneno" class="input" /></td> </tr> <tr> <td width="155"></td> <td width="390"><input type="submit" name="submit" id="submit" value="submit form" class="input button" /></td> <td width="60" id="loader"></td> </tr> </table> </form> </div> process.php:
if(!empty($_post['firstname']) &&!empty($_post['secondname']) &&!empty($_post['emailaddr']) &&!empty($_post['phoneno'])) { $response_array = array( 'status' => 'success', 'message' => 'congratulations, went fine.'); header('content-type: application/json'); echo(json_encode($response_array)); } else { $response_array = array( 'status' => 'fail', 'message' => 'massive fail.'); header('content-type: application/json'); echo(json_encode($response_array)); } jquery (last thing before </body>)
$(document).on('submit','#mainform',function(e) { //e.preventdefault(); $('#submit').attr('disabled','disabled'); var form = $(this); var post_url = form.attr('action'); var is_error = false; $('#loader', form).html('<img src="load_big_grey.gif" border="0" width="48" height="15" style="margin:6px auto;display:block;" />'); var firstname = $('#firstname').val(); var secondname = $('#secondname').val(); var emailaddr = $('#emailaddr').val(); var phoneno = $('#phoneno').val(); var post_data = 'firstname='+firstname+'&secondname='+secondname+'&emailaddr='+emailaddr+'&phoneno='+phoneno; $('.error').attr('style','display:none;'); if(firstname==''){ $('#fname_error').html('required field').attr('style','display:block;'); is_error = true;} // more client-side validation above if(is_error) { $('#loader', form).html(''); return false; } else { $.ajax({ type: "post", url: post_url, data: post_data, datatype: 'json', cache: 'false', success: function(ret) { if(ret != '') { /* dealing server response */ var m_status = ret.status; var m_message = ret.message; var empty_fld = true; $('#loader', form).html(''); // part displays appropriate response if(m_status=='success') { $('#response').removeclass().addclass('r_pos'); $('#ri1').removeclass().addclass('r_check');} else if(m_status=='fail') { $('#response').removeclass().addclass('r_neg'); $('#ri1').removeclass().addclass('r_cross'); empty_fld = false;} $('#response span').html(m_message); $('#response').css('display','block'); settimeout(function() { $('#response').fadeto(500,0); settimeout(function() { $('#response').css('display','none'); $('#submit').removeattr('disabled'); if(empty_fld) { $('#firstname').val(''); $('#secondname').val(''); $('#emailaddr').val(''); $('#phoneno').val(''); } },500); },4000); } else { /* response server undefined */ $('#loader', form).html(''); $('#response').removeclass().addclass('r_neg'); $('#response span').html('there problem communicating server!'); $('#ri1').removeclass().addclass('r_cross'); $('#response').css('display','block'); settimeout(function() { $('#response').fadeto(500,0); settimeout(function() { $('#response').css('display','none'); $('#submit').removeattr('disabled'); },500); },4000); } } }); return false; } }); (kinda feel shouldn't have included much.. :p) have looked around , have seen things on rebinding events (which think i've done using on() instead of submit()) , few other mentions of things try nothing seems have worked. appreciated! luke
after changing success function:
success: function(ret, textstatus) { console.log(ret); console.log(textstatus); ... } i discovered there no problem response server , submitting , responding , in manner expecting. cannot directly identify issue was, adding wrapper response section , using .html() update instead of toggling classes, have desired result:
<div id="rwrap"> <div id="response"> <span></span> <div id="ri1"></div> <div id="ri2"></div> </div> </div> jquery:
var m_status = ret.status; var m_message = ret.message; var empty_fld = true; $('#loader').html(''); if(m_status=='success') { $('#rwrap').html('<div id="response" class="r_pos"><span>'+m_message+'</span><div id="ri1" class="r_check"></div><div id="ri2" class="r_user"></div></div>'); } else if(m_status=='fail') { $('#rwrap').html('<div id="response" class="r_neg"><span>'+m_message+'</span><div id="ri1" class="r_cross"></div><div id="ri2" class="r_user"></div></div>'); empty_fld = false; } thanks contributed!
Comments
Post a Comment