/    Sign up×
Community /Pin to ProfileBookmark

AJAX to POST form inputs to PHP to temporary TABLE

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);

}
?>

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@benmartin101Dec 14.2015 — I think you want to use a <form> element instead of a <div>.
Copy linkTweet thisAlerts:
@markdg1991authorDec 14.2015 — I think you want to use a <form> element instead of a <div>.[/QUOTE]

However. If I do. The form loses its styling.
Copy linkTweet thisAlerts:
@benmartin101Dec 15.2015 — Then you might have to change your code from calling ".submit()" because that's only for <form> elements.

Meaning this part:
[CODE]$('#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);

})[/CODE]
Copy linkTweet thisAlerts:
@benmartin101Dec 15.2015 — or you can just make the changes to the styles for the <form> if you're familiar.
×

Success!

Help @markdg1991 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...