Ajax for submit button not working
Question
I'm trying to submit inputs from my multistep form to database (temporary table) but nothing happens when i click on Submit button. I can't figure out what's wrong as it doesn't show any errors on Console Logs on different browsers. I need it to save form inputs to temporary table first before asking the users to login at the last part of the form.
Here's the code of my multistep form.
Index.html
<!doctype HTML>
<html>
<head>
<!-- jQuery easing plugin -->
<script src="http://sandbox.lookingfour.com/forms/multistepform/jquery.easing.min.js" type="text/javascript"></script>
<script src="http://sandbox.lookingfour.com/forms/multistepform/script.js" type="text/javascript"></script>
<script src="http://www.lookingfour.com/js/temporary_buyinfo.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://sandbox.lookingfour.com/forms/multistepform/style.css">
</head>
<body>
<table>
<tr class='popupbox-header'>
<td>
<span id='buytitle'></span>
<a href='' onclick='buyform_back(); return false;'>x</a>
</td>
</tr>
<!-- multistep form -->
<tr>
<td>
<div id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Account Setup</li>
<li>Social Profiles</li>
<li>Personal Details</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">First Step</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<label>Quantity</label>
<?php echo input_textbox('buyqty', 1, "class='numeric'",'number'); ?><span class="formdata-required">*</span><br>
<label>Condition </label>
<select id = 'buycondition'>
<option value = "New">New</option>
<option value = "Used">Used</option>
</select><br>
<table>
<tr>
<td id='buyerexamples' ></td></br>
</tr>
</table>
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Second Step</h2>
<h3 class="fs-subtitle">This is step 2</h3>
<label>Deadline</label>
<?php echo input_datebox('buydeadline', date('m/d/Y', strtotime("+7 days")), 1); ?>
<span class="formdata-required">*</span><br>
<label>Notes / Message</label>
<textarea id='buynotes' style='width: 70%; height:90px;'></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Third Step</h2>
<h3 class="fs-subtitle">This is step 3</h3>
<div id='response'></div>
<label>Location/Area</label>
<select id = 'buylocation'>
<option value = "Metro Manila">Metro Manila</option>
<option value = "Abra">Abra</option>
<option value = "Agusan del Norte">Agusan del Norte</option>
<option value = "Agusan del Sur">Agusan del Sur</option>
</select>
<span class="formdata-required">*</span><br>
<label>Budget</label>
<?php echo input_textbox('buybudget','','placeholder="i.e. 5000 or 3500" style="width: 65%;"', '','text'); ?><br>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type='submit' value='Submit' />
<?php
if (util_getuserid() == 0) {
echo input_button('Save-In', '', 'id="buyloginbtn" class="popup-button" style="background-color: #ea6e38;"');
echo input_button('Sign-In', 'buyform_login("buyuser_login","buyuser_password","buyloginmsg");', 'id="buyloginbtn" class="popup-button" style="background-color: #ea6e38;"');
} else {
echo input_button('Look for Suppliers', 'buyerform_post();', ' class="popup-button" style="background-color: #ea6e38;"');
}
?>
</fieldset>
</div>
<div class='menu-loginform' id='buyloginform' style="display:none;">
<table width=100%>
<tr>
<td>
<label style='text-align: left;'>Sign-In to proceed</label>
</td>
</tr>
<tr>
<td>
<label style='text-align: left;'>Username / e-mail</label>
<?php echo input_textbox('buyuser_login', '', 'class="popup-inputbox"', 'buyloginbtn'); ?>
</td>
</tr>
<tr>
<td>
<label style='text-align: left;'>Password</label>
<?php echo input_textbox('buyuser_password', '', 'class="popup-inputbox"', 'buyloginbtn','password'); ?>
<a href='' OnClick='user_createtoplogin(); return false;' style='float: left;' id='buyform-createaccount'>Create a new account</a>
</td>
</tr>
<tr>
<td align=center>
<div id='buyloginmsg' class="formdata-required" style="display:none;"></div>
</td>
</tr>
<tr>
<td>
<?php
if (util_getuserid() == 0) {
echo input_button('Sign-In', 'buyform_login("buyuser_login","buyuser_password","buyloginmsg") && buyerform_post();', 'id="buyloginbtn" class="popup-button" style="background-color: #ea6e38;"');
echo input_button('Sign-In FB', 'Login()', 'id="status" class="popup-button" style="background-color: #ea6e38;"');
} else {
echo input_button('Look for Suppliers', 'buyerform_post();', ' class="popup-button" style="background-color: #ea6e38;"');
}
?>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script>
$(document).ready(function(){
$('#msform').submit(function(){
// show that something is loading
$('#response').html("<b>Loading response...</b>");
/*
* 'post_receiver.php' - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type: 'POST',
url: 'http://www.lookingfour.com/jquery/serialize.php',
data: $(this).serialize()
})
.done(function(data){
// show the response
$('#response').html(data);
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
</body>
</html>
Serialize.php
<?php
require_once(dirname(dirname(__FILE__))."/templates/initialize.inc");
$global_connection = db_connect();
if($_POST["buylocation"] != '') {
$buyinfo_temp = db_saverecord("buyinfo_temp", array(
'buyinfo_location'=>$_POST['buylocation'],
'buyinfo_notes'=>$_POST['buynotes'],
'buyinfo_condition'=>$_POST['buycondition'],
), 0, $global_connection);
}
?>
2 answers
solution1
1 2015-12-14 07:59:15
You are trying to submit a div . You can only submit a form . Replace
<div id="msform">
...
</div>
with
<form id="msform">
....
</form>
solution2
0 2015-12-14 08:32:16
I think you should include jquery library <script src="https://code.jquery.com/jquery-2.1.4.js"></script> before
<script src="http://sandbox.lookingfour.com/forms/multistepform/jquery.easing.min.js" type="text/javascript"></script>
in PHP file, use $_POST instead of $_REQUEST
After i added jquery lib, it working
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Flask upload file with AJAX and button submit not working
Submit Button Not working After an Ajax Call
AJAX not working when pressing submit button
submit button not working on jquery ajax based webpage
Django submit button not working on Ajax request
AJAX function call on submit button not working in PHP CodeIgniter
Ajax is not working with submit button in HTML form while using the onclick option
Submit button via ajax
Yii Ajax Submit button
Ajax submit using a button
Related Tags