I have a multi-step form that visitors can fill-up even if they're not logged-in. However, a the last part of the form they will be asked to sign-in. When they sign-in, the form also submits and saves to database. I need to add another button for Facebook login/connect that will work the same. I have the Login with Facebook at my top menu using PHP, user can login there and their email, name will be saved to my user table. The submit function for the form is in JS. I tried Ajax but doesn't seem to work.
Here's the clean copy of the code for the form:
Multistepform.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>
<link rel="stylesheet" type="text/css" href="http://sandbox.lookingfour.com/forms/multistepform/style.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-70871356-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1378642095793539', // Set YOUR APP ID
channelUrl : 'http://hayageek.com/examples/oauth/facebook/oauth-javascript/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response)
{
if (response.status === 'connected')
{
alert('connected');
return false;
//SUCCESS
}
else if (response.status === 'not_authorized')
{
alert('Not Authorized');
//FAILED
} else
{
alert('LoggedOut');
//UNKNOWN ERROR
}
});
};
function Login()
{
FB.login(function(response) {
if (response.authResponse)
{
buyerform_post();
} else
{
console.log('User cancelled login or did not fully authorize.');
}
},{scope: 'email,public_profile'});
}
}
function Logout()
{
FB.logout(function(){document.location.reload();});
}
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<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>
<label>Location/Area</label>
<select id = 'buylocation'>
<option value = "Metro Manila">Metro Manila</option>
<option value = "Abra">Abra</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" />
<?php
if (util_getuserid() == 0) {
echo input_button('Look for Suppliers', 'buyform_showlogin();', 'id="buystartloginbtn" 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>
</body>
</html>
JS Function for the standard login and posting of form inputs
function buyerform_post()
{
if(buyform_check() == false)
return false;
var param="";
param = param + "buytitle="+datacheck_fixstring(document.getElementById('searchtext').value);
param = param + "&buynotes="+datacheck_fixstring(document.getElementById('buynotes').value);
param = param + "&buybudget="+datacheck_fixstring(document.getElementById('buybudget').value);
param = param + "&buylocation="+datacheck_fixstring(document.getElementById('buylocation').value);
param = param + "&buycondition="+datacheck_fixstring(document.getElementById('buycondition').value);
param = param + "&buyqty="+datacheck_fixstring(document.getElementById('buyqty').value);
param = param + "&buydeadline="+datacheck_fixdatetime(document.getElementById('buydeadline').value);
// Examples
var samplectr=0;
var ctr = 0;
var result = "";
while (document.getElementById('check'+ctr)) {
if (document.getElementById('check'+ctr).checked) {
samplectr = samplectr+1;
param = param + "&buysampletitle" + samplectr + "="+datacheck_fixstring(document.getElementById('sampletitle'+ctr).innerHTML);
param = param + "&buysampleimgurl" + samplectr + "="+datacheck_fixstring(document.getElementById('sampleimgurl'+ctr).innerHTML);
param = param + "&buysamplelink" + samplectr + "="+datacheck_fixstring(document.getElementById('samplelink'+ctr).innerHTML);
param = param + "&buysampledesc" + samplectr + "="+datacheck_fixstring(document.getElementById('sampledescription'+ctr).innerHTML);
}
ctr = ctr + 1;
}
param = param + "&buysamplectr="+samplectr;
return ajax_postrequest("posts/post.php", param, "buyloginmsg", buyform_handlepostbuy);
}
function buyform_handlepostbuy(result, targetid)
{
util_reload('posts/?member=0');
}
function buyform_login(usernameid,userpasswordid,targetid)
{
var username = document.getElementById(usernameid).value;
var userpassword = document.getElementById(userpasswordid).value;
if (username.length < 1) {
util_alertmsg("Please indicate login");
return false;
}
if (userpassword.length < 1) {
util_alertmsg("Please indicate password");
return false;
}
document.getElementById(targetid).innerHTML='';
document.getElementById(targetid).style.display='';
return ajax_getrequest("login.php", 'user_login='+username+'&user_password='+userpassword, targetid, buyform_handlelogin);
}
function buyform_handlelogin(result, targetid)
{
if (result == "OK") {
alert('hello');
buyerform_post();
window.location.reload();
util_reload('');
} else if (document.getElementById(targetid)) {
document.getElementById(targetid).style.display='';
ajax_genericget(result, targetid);
}
}