Multipage not moving to next page on submit..

mikael · (This post was last modified: Aug 17th, 2011, 8:58 AM by mikael.)

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" />

***Ben*** · Aug 11th, 2011, 6:33 PM

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

mikael · (This post was last modified: Aug 17th, 2011, 8:57 AM by mikael.)

(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>

***Ben*** · Aug 12th, 2011, 6:51 AM

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

mikael · (This post was last modified: Aug 17th, 2011, 8:55 AM by mikael.)

(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 &lsquo;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>

***Ben*** · Aug 12th, 2011, 7:06 AM

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

mikael · Aug 12th, 2011, 7:09 AM

(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.

mikael · Aug 12th, 2011, 8:28 AM

(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?

***Ben*** · Aug 12th, 2011, 3:45 PM

Oh, absolutely! Edit away! Smile

- Ben

FORUMS