Limit to Number of forms on a page?

[pbpinftworth]

I've reconsidered the way that I was processing these forms. It's proven too cumbersome to use the <section> capability. Instead, I'll use multiple forms on a page and submit the information directly to my database in small chunks through AJAX.

In doing that, there are at least 4 distinct forms that I'll need to put on a page: user creation parent information student information billing information

Given that, I've got a bit of code that absolutely will not process and I'm curious if there's an arbitrary number that I'm running into the limits on.

Here's what I've got:

    <div class="grid_12">
        <form id="userCreation" method="post" href="scripts/add_user.php">
            <div>
                <h2>New User Information</h2>
                <p>If you are a new user, please enter your email address, and a password.</p>
            </div>
            <div><label>Email Address:</label><input id="username" name="username" type="text" /></div>
            <div><label>Password:</label><input id="password" name="password" type="password" /></div>
            <div><label>Verify Password:</label><input id="verifyPassword" name="verifyPassword" type="password" /></div>
            <div><label>&nbsp;</label><button id="nextButton" onClick="userCreation();" type="button">Submit New User</button></div>
        </form>
    </div>
    <div class="clear"></div>
    <div class="grid_12">
        <form id="parentInformation" method="post" href="scripts/add_parent.php">
            <div>
                <h2>Parent/Guardian Information</h2>
                <p>This will be used as the contact information for the students.</p>
            </div>
            <div><label>First Name:</label><input id="parentFirstName" name="parentFirstName" type="text" /></div>
            <div><label>Last Name:</label><input id="parentLastName" name="parentLastName" type="text" /></div>
            <div><label>Address:</label><input id="parentAddress" name="parentAddress" type="text"/></div>
            <div><label>Address 2:</label><input id="parentAddress2" name="parentAddress2" type="text" /></div>
            <div><label>City:</label><input id="parentCity" name="parentCity" type="text" /></div>
            <div>
                <label>State:</label>
                <select id="parentState" name="parentState">
                    <option value="Choose a State">Choose a State</option>
                    <option value='AL'>Alabama</option>
                    <option value='AK'>Alaska</option>
                    <option value='AZ'>Arizona</option>
                    <option value='AR'>Arkansas</option>
                    <option value='CA'>California</option>
                    <option value='CO'>Colorado</option>
                    <option value='CT'>Connecticut</option>
                    <option value='DE'>Deleware</option>
                    <option value='DC'>District of Columbia</option>
                    <option value='FL'>Florida</option>
                    <option value='GA'>Georgia</option>
                    <option value='HI'>Hawaii</option>
                    <option value='ID'>Idaho</option>
                    <option value='IL'>Illinois</option>
                    <option value='IN'>Indiana</option>
                    <option value='IA'>Iowa</option>
                    <option value='KS'>Kansas</option>
                    <option value='KY'>Kentucky</option>
                    <option value='LA'>Louisiana</option>
                    <option value='ME'>Maine</option>
                    <option value='MD'>Maryland</option>
                    <option value='MA'>Massachusetts</option>
                    <option value='MI'>Michigan</option>
                    <option value='MN'>Minnesota</option>
                    <option value='MS'>Mississippi</option>
                    <option value='MO'>Missouri</option>
                    <option value='MT'>Montana</option>
                    <option value='NE'>Nebraska</option>
                    <option value='NV'>Nevada</option>
                    <option value='NH'>New Hampshire</option>
                    <option value='NJ'>New Jersey</option>
                    <option value='NM'>New Mexico</option>
                    <option value='NY'>New York</option>
                    <option value='NC'>North Carolina</option>
                    <option value='ND'>North Dakota</option>
                    <option value='OH'>Ohio</option>
                    <option value='OK'>Oklahoma</option>
                    <option value='OR'>Oregon</option>
                    <option value='PA'>Pennsylvania</option>
                    <option value='RI'>Rhode Island</option>
                    <option value='SC'>South Carolina</option>
                    <option value='SD'>South Dakota</option>
                    <option value='TN'>Tennessee</option>
                    <option value='TX'>Texas</option>
                    <option value='UT'>Utah</option>
                    <option value='VT'>Vermont</option>
                    <option value='VA'>Virginia</option>
                    <option value='WA'>Washington</option>
                    <option value='WV'>West Virginia</option>
                    <option value='WI'>Wisconsin</option>
                    <option value='WY'>Wyoming</option>
                </select>
            </div>            
            <div><label>Zip Code:</label><input id="parentZip" name="parentZip" type="text" /></div>
            <div><label>Daytime Phone:</label><input id="parentDayPhone" name="parentDayPhone" type="text" /></div>
            <div><label>Evening Phone:</label><input id="parentEvePhone" name"parentEvePhone" type="text" /></div>
            <div>
                <label>Communication:</label>
                <select name="optOut">
                    <option value="1">OK To Email Me</option>
                    <option value="0">Do Not Email Me</option>
                </select>
            </div>
            <div><label>&nbsp;</label><button id="nextButton" onClick="firstStep();" type="button">Next Step</button></div>
        </form>
    </div> <!-- end grid_12 -->
    <div class="clear"></div>
    <div class="grid_12">
        <form id="newStudent" method="post" href="scripts/billing.php">
            <div>
                <h2>New Student</h2>
                <p>Click Here to add a new Student.</p>
            </div>
            <div>
                <label>&nbsp;</label>
                <button id="addStudentButton" onClick="addStudent();" type="button">Add Student</button>
                <button id="resetButton" onClick="resetStudent();" type="button">Reset</button>
                <button id="submitStudentButton" onClick="submitStudent();" type="button">Submit Student</button>
                <button id="secondStepButton" onClick="secondStep();" type="button">Next Step</button>
            </div>
            <div id="studentFirstNameDiv"><label>First Name:</label><input id="studentFirstName" name="studentFirstName" type="text" /></div>
            <div id="studentLastNameDiv"><label>Last Name:</label><input id="studentLastName" name="studentLastName" type="text" /></div>
            <div id="studentDoBDiv"><label>Date of Birth:</label><input id="studentDoB" name="studentDoB" placeholder="mm/dd/yyyy" type="text" /></div>
            <div id="studentNewDiv">
                <label>New Student:</label>
                <select id="studentNew" name="studentNew">
                    <option value="defaultValue">Choose New or Returning</option>
                    <option value="1">Yes, I'm New</option>
                    <option value="0">No, I'm Returning</option>
                </select>
            </div>
            <div id="studentHoursDiv">
                <label>Training Hours:</label>
                <select id="studentHours" name="studentHours">
                    <option value="defaultValue">Choose Number of Hours</option>
                    <option value="1">1 hrs. of Instruction - $70</option>
                    <option value="2">2 hrs. of Instruction - $105</option>
                    <option value="3">3 hrs. of Instruction - $125</option>
                    <option value="4">4 hrs. of Instruction - $145</option>
                    <option value="5">5 hrs. of Instruction - $165</option>
                    <option value="6">6 hrs. of Instruction - $185</option>
                    <option value="7">7 hrs. of Instruction - $210</option>
                    <option value="8">8+ hrs. of Instruction - $240</option>
                </select>
            </div>
        </form>
    </div>
    <div class="clear"></div>
    <div class="grid_12"> 
        <form id="billingInformation">
            <div>
                <h2>Billing Information</h2>
                <p>When you are complete, please click submit to send your information to PayPal for processing.</p>
            </div>
            <div><label>First Name:</label><input id="billingFirstName" name="billingFirstName" type="text" /></div>
            <div><label>Last Name:</label><input id="billingLastName" name="billingLastName" type="text" /></div>
            <div><label>Address:</label><input id="billingAddress" name="billingAddress" type="text"/></div>
            <div><label>Address 2:</label><input id="billingAddress2" name="billingAddress2" type="text" /></div>
            <div><label>City:</label><input id="billingCity" name="billingCity" type="text" /></div>
            <div>
                <label>State:</label>
                <select id="billingState" name="billingState">
                    <option value="Choose a State">Choose a State</option>
                    <option value='AL'>Alabama</option>
                    <option value='AK'>Alaska</option>
                    <option value='AZ'>Arizona</option>
                    <option value='AR'>Arkansas</option>
                    <option value='CA'>California</option>
                    <option value='CO'>Colorado</option>
                    <option value='CT'>Connecticut</option>
                    <option value='DE'>Deleware</option>
                    <option value='DC'>District of Columbia</option>
                    <option value='FL'>Florida</option>
                    <option value='GA'>Georgia</option>
                    <option value='HI'>Hawaii</option>
                    <option value='ID'>Idaho</option>
                    <option value='IL'>Illinois</option>
                    <option value='IN'>Indiana</option>
                    <option value='IA'>Iowa</option>
                    <option value='KS'>Kansas</option>
                    <option value='KY'>Kentucky</option>
                    <option value='LA'>Louisiana</option>
                    <option value='ME'>Maine</option>
                    <option value='MD'>Maryland</option>
                    <option value='MA'>Massachusetts</option>
                    <option value='MI'>Michigan</option>
                    <option value='MN'>Minnesota</option>
                    <option value='MS'>Mississippi</option>
                    <option value='MO'>Missouri</option>
                    <option value='MT'>Montana</option>
                    <option value='NE'>Nebraska</option>
                    <option value='NV'>Nevada</option>
                    <option value='NH'>New Hampshire</option>
                    <option value='NJ'>New Jersey</option>
                    <option value='NM'>New Mexico</option>
                    <option value='NY'>New York</option>
                    <option value='NC'>North Carolina</option>
                    <option value='ND'>North Dakota</option>
                    <option value='OH'>Ohio</option>
                    <option value='OK'>Oklahoma</option>
                    <option value='OR'>Oregon</option>
                    <option value='PA'>Pennsylvania</option>
                    <option value='RI'>Rhode Island</option>
                    <option value='SC'>South Carolina</option>
                    <option value='SD'>South Dakota</option>
                    <option value='TN'>Tennessee</option>
                    <option value='TX'>Texas</option>
                    <option value='UT'>Utah</option>
                    <option value='VT'>Vermont</option>
                    <option value='VA'>Virginia</option>
                    <option value='WA'>Washington</option>
                    <option value='WV'>West Virginia</option>
                    <option value='WI'>Wisconsin</option>
                    <option value='WY'>Wyoming</option>
                </select>
            </div>            
            <div><label>Zip Code:</label><input id="billingZip" name="billingZip" type="text" /></div>
            <div><label>Billing Phone:</label><input id="billingPhone" name="billingPhone" type="text" /></div>
            <div>
                <h2>Thank You</h2>
                <p>Once you click Submit, you will be redirected to PayPal for payment.</p>
                <br>
                <input type='image' name='submit' src='https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif' border='0' align='top' alt='Check out with PayPal'/>
            </div>
        </form>
    </div>

        $userCreation = $('#userCreation').idealforms({
            // For consistency all keys
            // must be in quotes
            inputs: {
                'username': {
                    filters: 'required email'
                },
                'password': {
                    filters: 'required strongpass'
                },
                'verifyPassword': {
                    filters: 'equalto required',
                    data: {
                        equalto: '#password'
                    },
                    errors: {
                        equalto: 'Your Passwords Do Not Match.'
                    }
                }
            }
        });

        $parentInformation = $('#parentInformation').idealforms({
            inputs: {
                'parentFirstName': {
                    filters: 'required name'
                },
                'parentLastName': {
                    filters: 'required name'
                },
                'parentAddress': {
                    filters: 'required',
                    data: {
                        min: 4,
                        max: 200
                    }
                },
                'parentAddress2': {
                    data: {
                        max: 200
                    }
                },
                'parentCity': {
                    filters: 'required',
                    data: {
                        min: 3,
                        max: 200
                    }
                },
                'parentState': {
                    filters: 'required exclude',
                    data: {
                        exclude: ['Choose a State']
                    },
                    errors: {
                        exclude: 'Choose a State from the list.' // Custom error
                    }
                },
                'parentZip': {
                    filters: 'required zip'
                },
                'parentDayPhone': {
                    filters: 'required phone'
                },
                'parentEvePhone': {
                    filters: 'phone'
                },
                'optOut': {
                }
            }
        });

        $billingInformation = $('#billingInformation').idealforms({
            inputs: {
                'billingFirstName': {
                    filters: 'required name'
                },
                'billingLastName': {
                    filters: 'required name'
                },
                'billingAddress': {
                    filters: 'required',
                    data: {
                        min: 4,
                        max: 200
                    }
                },
                'billingAddress2': {
                    data: {
                        max: 200
                    }
                },
                'billingCity': {
                    filters: 'required',
                    data: {
                        min: 3,
                        max: 200
                    }
                },
                'billingState': {
                    filters: 'required exclude',
                    data: {
                        exclude: ['Choose a State']
                    },
                    errors: {
                        exclude: 'Choose a State from the list.' // Custom error
                    }
                },
                'billingZip': {
                    filters: 'required zip'
                },
                'billingPhone': {
                    filters: 'required phone'
                }
            }
        });

        $newStudent = $('#newStudent').idealforms({
            inputs: {
                'studentFirstName': {
                    filters: 'required name'
                },
                'studentLastName': {
                    filters: 'required name'
                },
                'studentDoB': {
                    filters: 'required date'
                },
                'studentNew': {
                    filters: 'required digit exclude',
                    data: {
                        exclude: ['defaultValue']
                    },
                    errors: {
                        exclude: 'Choose whether your child is new or a returning student.' // Custom error
                    }
                },
                'studentHours': {
                    filters: 'required digit exclude',
                    data: {
                        exclude: ['defaultValue']
                    },
                    errors: {
                        exclude: 'Choose the number of training hours your child will take.' // Custom error
                    }
                }
            }
        });

For some reason, the $newStudent information won't process if I put it at the end of my ` Githubissues.

Githubissues is a development platform for aggregating issues.