+- Form Tools (https://forums.formtools.org)
+-- Forum: Form Tools (https://forums.formtools.org/forumdisplay.php?fid=1)
+--- Forum: Installation (https://forums.formtools.org/forumdisplay.php?fid=4)
+--- Thread: Multipage not moving to next page on submit.. (/showthread.php?tid=1527)
Multipage not moving to next page on submit.. - mikael - Aug 11th, 2011
Back again... I hope this one isn't blatantly obvious. When I hit the submit button, in my case "Continue". The form doesn't move to the next page. I've gone through the faqs and the forums, but still no joy. I've included all my code. Thanks in advance.
Code:
<?php
require_once("/var/www/site_folder/form/global/api/api.php");
$fields = ft_api_init_form_page(1, "initialize");
$params = array(
"submit_button" => "Continue",
"next_page" => "http://www.siteurl.com/page2.php",
"form_data" => $_POST
);
ft_api_process_form($params);
?>Form begin
Code:
<form id="FormID" class="appnitro" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"]?>" method="POST">Form Submit
Code:
<input type="hidden" name="NAME" value="VALUE" />
<input id="tk_application" class="button_text" type="submit" name="Continue" value="Continue" />RE: Multipage not moving to next page on submit.. - Ben - Aug 11th, 2011
Hey Mikael,
Huh... that looks okay, actually! Double check the submit button is enclosed within the opening and closing <form> tags. Other than that I'm not sure... maybe post the whole form?
- Ben
RE: Multipage not moving to next page on submit.. - mikael - Aug 12th, 2011
(Aug 11th, 2011, 6:33 PM)Ben Wrote: Hey Mikael,
Huh... that looks okay, actually! Double check the submit button is enclosed within the opening and closing <form> tags. Other than that I'm not sure... maybe post the whole form?
- Ben
Ben,
I'm as eqaully chuffed... here's the entire form. Thanks in advance!
--Mikael
Code:
<form id="yourID" class="appnitro" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"]?>" method="POST">
<ul>
<li id="li_1" >
<label class="description" for="FirstName">Name </label>
<span>
<input id="FirstName" name= "FirstName" class="element text" maxlength="255" size="14" value=""/>
<label>First</label>
</span>
<span>
<input id="LastName" name= "LastName" class="element text" maxlength="255" size="14" value=""/>
<label>Last</label>
</span>
<p class="guidelines" id="guide_4"><small>Your full name please.</small></p>
</li>
<li id="li_2" >
<label class="description" for="element_2">Email </label>
<div>
<input id="Email" name="Email" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<p class="guidelines" id="guide_4"><small>Your full email address.</small></p>
</li>
<li id="li_3" >
<label class="description" for="element_3">Birthday </label>
<span>
<input id="Birthday" name="Birthday" class="element text" size="3" maxlength="3" value="" type="text"> -
<label for="element_3_1">MM</label>
</span>
<span>
<input id="element_3_2" name="element_3_2" class="element text" size="3" maxlength="3" value="" type="text"> -
<label for="element_3_2">DD</label>
</span>
<span>
<input id="element_3_3" name="element_3_3" class="element text" size="4" maxlength="4" value="" type="text">
<label for="element_3_3">YYYY</label>
<p class="guidelines" id="guide_4"><small>Please enter your date of birth.</small></p>
</span>
</li>
<li id="li_4" >
<label class="description" for="element_4">Current Location </label>
<div>
<input id="CurrentLocation" name="CurrentLocation" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<p class="guidelines" id="guide_4"><small>City, State, Country.</small></p>
</li>
<li id="li_5" >
<label class="description" for="element_5">Gender </label>
<div>
<select class="element select medium" id="Gender" name="Gender">
<option value="" selected="selected"></option>
<option value="Male" >Male</option>
<option value="Female" >Female</option>
<option value="Unspec" >Unspecified</option>
</select>
</div>
<p class="guidelines" id="guide_5"><small>Gender plays no role in the selection process.</small></p>
</li>
<li id="li_6" >
<label class="description" for="element_6">Ethnicity </label>
<div>
<select class="element select medium" id="Ethnicity" name="Ethnicity">
<option value="" selected="selected"></option>
<option value="Asian">Asian</option>
<option value="AA">African American</option>
<option value="Caucasin">Caucasian </option>
<option value="Hispanic">Hispanic</option>
<option value="NativeAmerica">Native American</option>
<option value="Mixed">Mixed Race</option>
<option value="Latino">Latino</option>
<option value="Ohter">Other Race</option>
</select>
</div>
<p class="guidelines" id="guide_6"><small>This is 100% optional. Feel free to leave this field blank.</small></p>
</li>
<li id="li_7" >
<label class="description" for="element_7">Citizenship </label>
<div>
<input id="Citizenship" name="Citizenship" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<p class="guidelines" id="guide_7"><small>Your current legal citzenship. If you have dual citizenship, please list both.</small></p>
</li>
<li class="buttons">
<input type="hidden" name="NAME" value="VALUE" />
<input id="YOURID" class="button_text" type="submit" name="Continue" value="Continue" />
</li>
</ul>
</form>RE: Multipage not moving to next page on submit.. - Ben - Aug 12th, 2011
Hmm...! I don't see anything that would be causing this.
So is your form a multi-page form and you're in the midst of setting it up? How far along the process are you - just about to put through a test submission?
It may help to post the entire PHP page, not just the form.
If anyone else sees something wrong, please pipe up!
- Ben
RE: Multipage not moving to next page on submit.. - mikael - Aug 12th, 2011
(Aug 12th, 2011, 6:51 AM)Ben Wrote: Hmm...! I don't see anything that would be causing this.
So is your form a multi-page form and you're in the midst of setting it up? How far along the process are you - just about to put through a test submission?
It may help to post the entire PHP page, not just the form.
If anyone else sees something wrong, please pipe up!
- Ben
Ben and everyone else,
It is indeed mult-page and i'm trying to do a test submission, but it will not advance. Below is the entire page.
Code:
<?php
require_once("/var/www/site_folder/form/global/api/api.php");
$fields = ft_api_init_form_page(1, "initialize");
$params = array(
"submit_button" => "Continue",
"next_page" => "http://www.siteurl.com/mpforms/page2.php",
"form_data" => $_POST
);
ft_api_process_form($params);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TITLE</title>
<link rel="stylesheet" type="text/css" href="http://www.siteurl.com/css/main.css" media="all">
<link rel="stylesheet" type="text/css" href="http://www.siteurl.com/css/jquery-ui-1.8rc1.custom.css">
<link rel="stylesheet" type="text/css" href="http://www.siteurl.com/css/jquery.multiSelect.css">
<script src="http://www.siteurl.com/js/jquery-1.6.2.min.js"></script>
<script src="http://www.siteurl.com/js/view.js"></script>
<script src="http://www.siteurl.com/js/jquery-ui-1.8rc1.custom.min.js"></script>
<script src="http://www.siteurl.com/js/jquery.idletimer.js"></script>
<script src="http://www.siteurl.com/js/idle.js"> </script>
<script src="http://www.siteurl.com/js/jquery.bgiframe.min.js"></script>
<script src="http://www.siteurl.com/js/jquery.multiSelect.js"></script>
<script>
$(document).ready( function() {
// Default options
$("#control_1, #control_3, #control_4, #control_5").multiSelect();
// With callback
$("#control_6").multiSelect( null, function(el) {
$("#callbackResult").show().fadeOut();
});
// Options displayed in comma-separated list
$("#control_7").multiSelect({ oneOrMoreSelected: '*' });
// 'Select All' text changed
$("#control_8").multiSelect({ selectAllText: 'Pick ‘em all!' });
// Show test data
$("FORM").submit( function() {
$.post('result.php', $(this).serialize(), function(r) {
alert(r);
});
return false;
});
});
</script>
</head>
<body id="main_body" >
<div id="navwrap">
<div id="nav" class="floatleft">
<!--<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>-->
</div>
<div id="nav" class="floatright">
<a href="#">Welcome to the Application. Please read the instructions carefully.</a>
</div>
<div class="clear"></div>
<br /><br />
<div id="form_container">
<img src="http://www.siteurl.com/imgs/tk_logo.png" width="342" height="127" style="margin-left:30px" />
<div style="margin-left:30px">
<p><strong>INSTRUCTIONS HERE INSTRUCTIONS HERE INSTRUCTIONS HERE INSTRUCTIONS HERE INSTRUCTIONS HERE INSTRUCTIONS HERE INSTRUCTIONS HERE INSTRUCTIONS HERE INSTRUCTIONS HERE INSTRUCTIONS HERE INSTRUCTIONS HERE INSTRUCTIONS HERE INSTRUCTIONS HERE INSTRUCTIONS HERE</strong></p></div>
<form id="your_ID" class="appnitro" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"]?>" method="POST">
<ul >
<li id="li_1" >
<label class="description" for="FirstName">Name </label>
<span>
<input id="FirstName" name= "FirstName" class="element text" maxlength="255" size="14" value=""/>
<label>First</label>
</span>
<span>
<input id="LastName" name= "LastName" class="element text" maxlength="255" size="14" value=""/>
<label>Last</label>
</span>
<p class="guidelines" id="guide_4"><small>Your full name please.</small></p>
</li> <li id="li_2" >
<label class="description" for="element_2">Email </label>
<div>
<input id="Email" name="Email" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<p class="guidelines" id="guide_4"><small>Your full email address.</small></p>
</li> <li id="li_3" >
<label class="description" for="element_3">Birthday </label>
<span>
<input id="Birthday" name="Birthday" class="element text" size="3" maxlength="3" value="" type="text"> -
<label for="element_3_1">MM</label>
</span>
<span>
<input id="element_3_2" name="element_3_2" class="element text" size="3" maxlength="3" value="" type="text"> -
<label for="element_3_2">DD</label>
</span>
<span>
<input id="element_3_3" name="element_3_3" class="element text" size="4" maxlength="4" value="" type="text">
<label for="element_3_3">YYYY</label>
<p class="guidelines" id="guide_4"><small>Please enter your date of birth.</small></p>
</span>
</li> <li id="li_4" >
<label class="description" for="element_4">Current Location </label>
<div>
<input id="CurrentLocation" name="CurrentLocation" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<p class="guidelines" id="guide_4"><small>City, State, Country.</small></p>
</li> <li id="li_5" >
<label class="description" for="element_5">Gender </label>
<div>
<select class="element select medium" id="Gender" name="Gender">
<option value="" selected="selected"></option>
<option value="Male" >Male</option>
<option value="Female" >Female</option>
<option value="Unspec" >Unspecified</option>
</select>
</div>
<p class="guidelines" id="guide_5"><small>Gender plays no role in the selection process.</small></p>
</li> <li id="li_6" >
<label class="description" for="element_6">Ethnicity </label>
<div>
<select class="element select medium" id="Ethnicity" name="Ethnicity">
<option value="" selected="selected"></option>
<option value="Asian">Asian</option>
<option value="AA">African American</option>
<option value="Caucasin">Caucasian </option>
<option value="Hispanic">Hispanic</option>
<option value="NativeAmerica">Native American</option>
<option value="Mixed">Mixed Race</option>
<option value="Latino">Latino</option>
<option value="Ohter">Other Race</option>
</select>
</div>
<p class="guidelines" id="guide_6"><small>This is 100% optional. Feel free to leave this field blank.</small></p>
</li> <li id="li_7" >
<label class="description" for="element_7">Citizenship </label>
<div>
<input id="Citizenship" name="Citizenship" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<p class="guidelines" id="guide_7"><small>Your current legal citzenship. If you have dual citizenship, please list both.</small></p>
</li>
<li class="buttons">
<input type="hidden" name="NAME" value="VALUE" />
<input id="IS" class="button_text" type="submit" name="Continue" value="Continue" />
</li>
</ul>
</form>
<br /><br />
</div>
</div>
</div>
<div id="footer">
<div id="foot_navwrap">
<div id="nav" class="floatleft">
<a href="#">About</a>
<a href="#">Clients</a>
<a href="#">Case Study</a>
<a href="#">Philosophy</a>
<a href="#">Contact Us</a>
</div>
<div id="nav" class="floatright">
<a href="#"></a>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>RE: Multipage not moving to next page on submit.. - Ben - Aug 12th, 2011
Ahhhh! I see now.
So the javascript in your page is overriding the default behaviour of the form. When you click Continue, it serializes the form content and will presumably send it somewhere.
How are you planning to make the form work? Have it submit via Ajax, or with a standard form post? Getting it working with Ajax is perfectly possible, but it'll take some fiddling.
- Ben
RE: Multipage not moving to next page on submit.. - mikael - Aug 12th, 2011
(Aug 12th, 2011, 7:06 AM)Ben Wrote: Ahhhh! I see now.
So the javascript in your page is overriding the default behaviour of the form. When you click Continue, it serializes the form content and will presumably send it somewhere.
How are you planning to make the form work? Have it submit via Ajax, or with a standard form post? Getting it working with Ajax is perfectly possible, but it'll take some fiddling.
- Ben
Ben,
The only JavaScript I need is the idle timing and multiselect. There's no need for it to be sent through using Ajax. I "inherited" this project if you will, so I'm not 100% on all of the code. Any suggestions are more than welcome.
RE: Multipage not moving to next page on submit.. - mikael - Aug 12th, 2011
(Aug 12th, 2011, 7:09 AM)mikael Wrote:(Aug 12th, 2011, 7:06 AM)Ben Wrote: Ahhhh! I see now.
So the javascript in your page is overriding the default behaviour of the form. When you click Continue, it serializes the form content and will presumably send it somewhere.
How are you planning to make the form work? Have it submit via Ajax, or with a standard form post? Getting it working with Ajax is perfectly possible, but it'll take some fiddling.
- Ben
Ben,
The only JavaScript I need is the idle timing and multiselect. There's no need for it to be sent through using Ajax. I "inherited" this project if you will, so I'm not 100% on all of the code. Any suggestions are more than welcome.
Okay! It was an issue with the JavaScript. I removed the JS and the issue is no longer there.
BEN - is it okay if I edit my posts with code samples, but keep them relevant so if others run into this problem the post will still be of assistance?
RE: Multipage not moving to next page on submit.. - Ben - Aug 12th, 2011
Oh, absolutely! Edit away!
- Ben