Jump to content

Need form recreated and validated with PHP / jQuery / AJAX


Baffled

Recommended Posts

Hello, I am looking for someone that can redesign my old form and make some validation changes...

 

Things I need the form to do:

  • Confirm leaving the page, if it is done other than by submitting the form
  • There is a place for three different phone numbers, home, work, and mobile, I only need to ensure that at least one of those is filled out, more can be, but one is required
  • Proper character input type validation, phone numbers, zip code, email address
  • Required fields, some of which are of the HTML "select" type of input
  • Format masking, e.g. phone numbers
  • Needs to be multi-browser compatible, Firefox, Chrome, IE, Safari
  • The form needs to be smooth and curvy, very jQuery / AJAX
  • Convert the MySQL to MySQLi
  • The form should have it's own css, so that it can stand alone on it's own, but not conflict with other css either, e.g. start all of it's css with something like "form_" or something
  • Improve upon the PHP as you see fit
  • If you can make or add a better way to put in a date of birth, other than 3 drop-down boxes, then that would be good as well
  • In the form there is also a question of whether or not an address is the same as another address, if so, it copies the address info, if not, it shows a new div, for a new address, the form will still need that functionality as well

P.S. The form is called via an SSL secure page

 

Please contact me with your quotes and any forms that you would like to show off, at motorsportfun2013 [@] gmail dot com

 

Since I apparently can't attach the page, I'll post the code of what I'm currently using...

<? 
require 'includes/auth.php';
$AgentID = $_SESSION['AgentID'];
$AgentName = $_SESSION['AgentName'];
if (isset($_GET['orderticketid']))
{
    $orderticketid = clean($_GET['orderticketid']);
    $result = mysql_query("
        SELECT OrderTickets.*, Agencies.AgencyName, InsuranceCarriers.InsuranceCarrier 
        FROM OrderTickets
            LEFT JOIN Agencies ON OrderTickets.AgencyID = Agencies.AgencyID
            LEFT JOIN InsuranceCarriers ON OrderTickets.InsuranceCarrierID = InsuranceCarriers.InsuranceCarrierID
        WHERE OrderTickets.OrderTicketID = '$orderticketid' AND OrderTickets.AgentID = '$AgentID'
    ");
    while ($OrderTicketRow = mysql_fetch_assoc($result))
    {
        $InsuranceCarrierID = $OrderTicketRow['InsuranceCarrierID'];
        $InsuranceCarrierPolicyNumber = $OrderTicketRow['InsuranceCarrierPolicyNumber'];
        $OrderTicketFirstName = $OrderTicketRow['OrderTicketFirstName'];
        $OrderTicketMiddleName = $OrderTicketRow['OrderTicketMiddleName'];
        $OrderTicketLastName = $OrderTicketRow['OrderTicketLastName'];
        $OrderTicketAddress = $OrderTicketRow['OrderTicketAddress'];
        $OrderTicketCity = $OrderTicketRow['OrderTicketCity'];
        $OrderTicketState = $OrderTicketRow['OrderTicketState'];
        $OrderTicketZipCode = $OrderTicketRow['OrderTicketZipCode'];
        $OrderTicketExamLocation = $OrderTicketRow['OrderTicketExamLocation'];
        $OrderTicketExamLocationAddress = $OrderTicketRow['OrderTicketExamLocationAddress'];
        $OrderTicketExamLocationCity = $OrderTicketRow['OrderTicketExamLocationCity'];
        $OrderTicketExamLocationState = $OrderTicketRow['OrderTicketExamLocationState'];
        $OrderTicketExamLocationZipCode = $OrderTicketRow['OrderTicketExamLocationZipCode'];
        $OrderTicketHomePhone = $OrderTicketRow['OrderTicketHomePhone'];
        $OrderTicketWorkPhone = $OrderTicketRow['OrderTicketWorkPhone'];
        $OrderTicketMobilePhone = $OrderTicketRow['OrderTicketMobilePhone'];
        $OrderTicketEmailAddress = $OrderTicketRow['OrderTicketEmailAddress'];
        $OrderTicketDOBMonth = date('m', strtotime($OrderTicketRow['OrderTicketDOB']));
        $OrderTicketDOBDay = date('d', strtotime($OrderTicketRow['OrderTicketDOB']));
        $OrderTicketDOBYear = date('Y', strtotime($OrderTicketRow['OrderTicketDOB']));
        $OrderTicketGender = $OrderTicketRow['OrderTicketGender'];
        $OrderTicketSmoker = $OrderTicketRow['OrderTicketSmoker'];
        $OrderTicketPolicyType = $OrderTicketRow['OrderTicketPolicyType'];
        $OrderTicketPolicyAmount = $OrderTicketRow['OrderTicketPolicyAmount'];
        $OrderTicketSpecialInstructions = $OrderTicketRow['OrderTicketSpecialInstructions'];
    }
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
        <link rel="shortcut icon" href="images/favicon.ico" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="includes/JavaScriptValidationFunctions.js"></script>
        <script type="text/javascript" src="includes/Modernizr-2.5.3.forms.js"></script>
        <script type="text/javascript" data-webforms2-support="validation" src="includes/html5Forms.js"></script>
        <script src="includes/jquery.maskedinput-1.3.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(document).ready(function() {
                    jQuery("#OrderTicketHomePhone").mask("(999) 999-9999");
                    jQuery("#OrderTicketWorkPhone").mask("(999) 999-9999");
                    jQuery("#OrderTicketMobilePhone").mask("(999) 999-9999");
            });
        </script>
        <script type="text/javascript">
            window.onbeforeunload = function() {
                return 'You have unsaved changes!';
            }
        </script>
        <script type="text/javascript">
            function ShowHide(){
                if (document.getElementById("OrderTicketExamLocation").value == '') {
                    $('.show_hide').hide();
                }
                if (document.getElementById("OrderTicketExamLocation").value != 'Home') {
                    $('.show_hide').show();
                }
                else if (document.getElementById("OrderTicketExamLocation").value == 'Home') {
                    $('.show_hide').hide();
                }
            }
        </script>
        <title>Submit Order Ticket</title>
    </head>
    <body>
        <div id="LogoHeader">
            <img src="images/logo.png" />
        </div>
        <div id="Menu">
            <? include 'includes/menu.php'; ?>
        </div>
        <div class="jQueryErrors">

        </div>
        <div id="OrderForm">
            <br />
            <form id="submitorderform" action="submitorderticket-action.php" method="post" onsubmit="return validateOrderSubmissionForm();">
                <input id="submitneworderticket" name="submitneworderticket" value="submitneworderticket" type="hidden" />
                <fieldset>
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="InsuranceCarrierID">* Insurance Carrier:</label>
                        </div>
                        <div class="FormInput">
                            <?
                            $CarriersResult = mysql_query("SELECT InsuranceCarriersAgents.InsuranceCarrierID, InsuranceCarriers.InsuranceCarrier 
                                FROM InsuranceCarriersAgents
                                LEFT JOIN InsuranceCarriers ON InsuranceCarriersAgents.InsuranceCarrierID = InsuranceCarriers.InsuranceCarrierID
                                WHERE InsuranceCarriersAgents.AgentID = '$AgentID'") or die(mysql_error());
                            $rowCounter = mysql_num_rows($CarriersResult);
                            if ($rowCounter == 0)
                            {
                                echo '<span style="background-color: #C0C0C0; color: red; padding: 2px;">You Are Not Associated With Any Insurance Carriers, Click On <a href="carrier-agent-correlations.php">Insurance Carriers</a> To Add It/Them.<span>';
                            }
                            if ($rowCounter > 1)
                            {
                                echo '<select id="InsuranceCarrierID" name="InsuranceCarrierID">';
                                echo '<option value=""> ... </option>';
                            }
                            while ($temprow = mysql_fetch_assoc($CarriersResult))
                            {
                                if ($rowCounter == 1)
                                {

                                    echo '<input type="hidden" id="InsuranceCarrierID" name="InsuranceCarrierID" value="'.$temprow['InsuranceCarrierID'].'" />';
                                    echo '<input style="color: #515151;" type="text" id="InsuranceCarrier" name="InsuranceCarrier" value="'.$temprow['InsuranceCarrier'].'" size="50" READONLY />';
                                }
                                if ($rowCounter > 1)
                                {

                                    echo '<option value="'.$temprow['InsuranceCarrierID'].'">'.$temprow['InsuranceCarrier'].'</option>';
                                }
                            }
                            if ($rowCounter > 1)
                            {
                                echo '</select>';
                            }
                            ?>
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="AgencyID">* Agency Name:</label>
                        </div>
                        <div class="FormInput">
                                <?
                                $AgenciesResult = mysql_query("SELECT AgenciesAgents.AgencyID, Agencies.AgencyName FROM AgenciesAgents
                                    LEFT JOIN Agencies ON AgenciesAgents.AgencyID = Agencies.AgencyID
                                    WHERE AgenciesAgents.AgentID = '$AgentID'") or die(mysql_error());
                                $rowCounter = mysql_num_rows($AgenciesResult);
                                if ($rowCounter == 0)
                                {
                                    echo '<span style="background-color: #C0C0C0; color: red; padding: 2px;">You Are Not Associated With Any Agencies, Please Call ParaMedDirect.<span>';
                                }
                                if ($rowCounter > 1)
                                {
                                    echo '<select id="AgencyID" name="AgencyID">';
                                    echo '<option value=""> ... </option>';
                                }
                                while ($temprow = mysql_fetch_assoc($AgenciesResult))
                                {
                                    if ($rowCounter == 1)
                                    {

                                        echo '<input type="hidden" id="AgencyID" name="AgencyID" value="'.$temprow['AgencyID'].'" />';
                                        echo '<input style="color: #515151;" type="text" id="AgencyName" name="AgencyName" value="'.$temprow['AgencyName'].'" size="50" READONLY />';
                                    }
                                    if ($rowCounter > 1)
                                    {

                                        echo '<option value="'.$temprow['AgencyID'].'">'.$temprow['AgencyName'].'</option>';
                                    }
                                }
                                if ($rowCounter > 1)
                                {
                                    echo '</select>';
                                }
                                ?>
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="AgentID">* Agent Name:</label>
                        </div>
                        <div class="FormInput">
                            <input type="hidden" id="AgentID" name="AgentID" value="<? echo $AgentID; ?>" />
                            <input style="color: #515151;" type="text" id="AgentName" name="AgentName" value="<? echo $AgentName; ?>" READONLY />
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="InsuranceCarrierPolicyNumber">  Policy Number:</label>
                        </div>
                        <div class="FormInput">
                            <input id="InsuranceCarrierPolicyNumber" name="InsuranceCarrierPolicyNumber" type="text" value="<? echo $InsuranceCarrierPolicyNumber; ?>" />
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketFirstName">* Client Name:</label>
                        </div>
                        <div class="FormInput">
                            <input id="OrderTicketFirstName" name="OrderTicketFirstName" type="text" value="<? echo $OrderTicketFirstName; ?>" required />
                            <input id="OrderTicketMiddleName" name="OrderTicketMiddleName" type="text" value="<? echo $OrderTicketMiddleName; ?>" size="1" />
                            <input id="OrderTicketLastName" name="OrderTicketLastName" type="text" value="<? echo $OrderTicketLastName; ?>" required />
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketAddress">* Address:</label>
                        </div>
                        <div class="FormInput">
                            <input id="OrderTicketAddress" name="OrderTicketAddress" type="text" value="<? echo $OrderTicketAddress; ?>" required size="50" />
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketCity">* City:</label>
                        </div>
                        <div class="FormInput">
                            <input id="OrderTicketCity" name="OrderTicketCity" type="text" value="<? echo $OrderTicketCity; ?>" required />
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketState">* State:</label>
                        </div>
                        <div class="FormInput">
                            <select id="OrderTicketState" name="OrderTicketState">
                                <option value=""> ... </option>
                                <?
                                $StateResult = mysql_query("SELECT * FROM States WHERE 1");
                                while ($StateRow = mysql_fetch_assoc($StateResult))
                                {
                                    echo '<option value="'.$StateRow['StateAbbr'].'"'; if ($StateRow['StateAbbr'] == $OrderTicketState){echo ' SELECTED';} elseif ($StateRow['StateAbbr'] == "MO"){echo ' SELECTED';} echo '>'.$StateRow['State'].'</option>';
                                }
                                ?>
                            </select>
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketZipCode">* Zip Code:</label>
                        </div>
                        <div class="FormInput">
                            <input id="OrderTicketZipCode" name="OrderTicketZipCode" type="text" value="<? echo $OrderTicketZipCode; ?>" pattern="[0-9]{5}" required />
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <span style="font-weight: 600;">Enter Exam Location if Different from Client Location.</span>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel" style="padding-left: 15px;">
                            <label for="OrderTicketExamLocation">Exam Location:</label>
                        </div>
                        <div class="FormInput">
                            <select id="OrderTicketExamLocation" name="OrderTicketExamLocation" onchange="ShowHide()">
                                <?
                                $ExamLocationResult = mysql_query("SELECT * FROM ExamLocations");
                                while ($ExamLocationRow = mysql_fetch_assoc($ExamLocationResult))
                                {
                                    echo '<option value="'.$ExamLocationRow['ExamLocation'].'"'; if ($ExamLocationRow['ExamLocation'] == $OrderTicketExamLocation){echo ' SELECTED';} echo '>'.$ExamLocationRow['ExamLocation'].'</option>';
                                }
                                ?>
                            </select>
                        </div>
                    </div>
                    <br />
                    <div class="show_hide">
                        <div class="FormLabel" style="padding-left: 15px;">
                            <label for="OrderTicketExamLocationAddress">Exam Location Address:</label>
                        </div>
                        <div class="FormInput">
                            <input id="OrderTicketExamLocationAddress" name="OrderTicketExamLocationAddress" type="text" value="<? echo $OrderTicketExamLocationAddress; ?>" size="50" />
                        </div>
                    </div>
                    <br />
                    <div class="show_hide">
                        <div class="FormLabel" style="padding-left: 15px;">
                            <label for="OrderTicketExamLocationCity">Exam Location City:</label>
                        </div>
                        <div class="FormInput">
                            <input id="OrderTicketExamLocationCity" name="OrderTicketExamLocationCity" type="text" value="<? echo $OrderTicketExamLocationCity; ?>" />
                        </div>
                    </div>
                    <br />
                    <div class="show_hide">
                        <div class="FormLabel" style="padding-left: 15px;">
                            <label for="OrderTicketExamLocationState">Exam Location State:</label>
                        </div>
                        <div class="FormInput">
                            <select id="OrderTicketExamLocationState" name="OrderTicketExamLocationState">
                                <option value=""> ... </option>
                                <?
                                $StateResult = mysql_query("SELECT * FROM States");
                                while ($StateRow = mysql_fetch_assoc($StateResult))
                                {
                                    echo '<option value="'.$StateRow['StateAbbr'].'"'; if ($StateRow['StateAbbr'] == $OrderTicketExamLocationState){echo ' SELECTED';} elseif ($StateRow['StateAbbr'] == "MO"){echo ' SELECTED';} echo '>'.$StateRow['State'].'</option>';
                                }
                                ?>
                            </select>
                        </div>
                    </div>
                    <br />
                    <div class="show_hide">
                        <div class="FormLabel" style="padding-left: 15px;">
                            <label for="OrderTicketExamLocationZipCode">Exam Location Zip Code:</label>
                        </div>
                        <div class="FormInput">
                            <input id="OrderTicketExamLocationZipCode" name="OrderTicketExamLocationZipCode" type="text" value="<? echo $OrderTicketExamLocationZipCode; ?>" pattern="[0-9]{5}" />
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketHomePhone">* Home Phone:</label>
                        </div>
                        <div class="FormInput">
                            <input id="OrderTicketHomePhone" name="OrderTicketHomePhone" type="tel" value="<? echo formatPhone($OrderTicketHomePhone); ?>" required />
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketWorkPhone">  Work Phone:</label>
                        </div>
                        <div class="FormInput">
                            <input id="OrderTicketWorkPhone" name="OrderTicketWorkPhone" type="tel" value="<? echo formatPhone($OrderTicketWorkPhone); ?>" />
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketMobilePhone">  Mobile Phone:</label>
                        </div>
                        <div class="FormInput">
                            <input id="OrderTicketMobilePhone" name="OrderTicketMobilePhone" type="tel" value="<? echo formatPhone($OrderTicketMobilePhone); ?>" />
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketEmailAddress">  Email Address:</label>
                        </div>
                        <div class="FormInput">
                            <input id="OrderTicketEmailAddress" name="OrderTicketEmailAddress" type="email" size="50" value="<? echo $OrderTicketEmailAddress; ?>" />
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketDOBMonth">* Date of Birth:</label>
                        </div>
                        <div class="FormInput">
                            <select id="OrderTicketDOBMonth" name="OrderTicketDOBMonth">
                                <option value=""> ... </option>
                                <?
                                for ($i=1;$i<13;$i++)
                                {
                                    $i = sprintf('%02d', $i);
                                    echo '<option value="'.$i.'"'; if ($i == $OrderTicketDOBMonth) {echo ' SELECTED';} echo '>'.$i.'</option>';
                                }
                                ?>
                            </select>
                            <select id="OrderTicketDOBDay" name="OrderTicketDOBDay">
                                <option value=""> ... </option>
                                <?
                                for ($i=1;$i<32;$i++)
                                {
                                    $i = sprintf('%02d', $i);
                                    echo '<option value="'.$i.'"'; if ($i == $OrderTicketDOBDay) {echo ' SELECTED';} echo '>'.$i.'</option>';
                                }
                                ?>
                            </select>
                            <select id="OrderTicketDOBYear" name="OrderTicketDOBYear">
                                <option value=""> ... </option>
                                <?
                                $thisYear = date('Y');
                                for ($i=1900;$i<$thisYear;$i++)
                                {
                                    echo '<option value="'.$i.'"'; if ($i == $OrderTicketDOBYear){echo ' SELECTED';} echo '>'.$i.'</option>';
                                }
                                ?>
                            </select>
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketGender">* Gender:</label>
                        </div>
                        <div class="FormInput">
                            <select id="OrderTicketGender" name="OrderTicketGender">
                                <option value=""> ... </option>
                                <option value="Male" <? if ($OrderTicketGender == "Male"){echo ' SELECTED';} ?>>Male</option>
                                <option value="Female" <? if ($OrderTicketGender == "Female"){echo ' SELECTED';} ?>>Female</option>
                            </select>
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketSmoker">* Tobacco User:</label>
                        </div>
                        <div class="FormInput">
                            <select id="OrderTicketSmoker" name="OrderTicketSmoker">
                                <option value=""> ... </option>
                                <option value="Yes" <? if ($OrderTicketSmoker == "Yes"){echo ' SELECTED';} ?>>Yes</option>
                                <option value="No" <? if ($OrderTicketSmoker == "No"){echo ' SELECTED';} ?>>No</option>
                                <option value="NA" <? if ($OrderTicketSmoker == "NA"){echo ' SELECTED';} ?>>Not Applicable</option>
                            </select>
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketPolicyType">* Policy Type:</label>
                        </div>
                        <div class="FormInput">
                            <select id="OrderTicketPolicyType" name="OrderTicketPolicyType">
                                <option value=""> ... </option>
                                <option value="LifeTerm" <? if ($OrderTicketPolicyType == "LifeTerm"){echo ' SELECTED';} ?>>Life (term)</option>
                                <option value="LifeVariable" <? if ($OrderTicketPolicyType == "LifeVariable"){echo ' SELECTED';} ?>>Life (variable)</option>
                                <option value="Disability" <? if ($OrderTicketPolicyType == "Disability"){echo ' SELECTED';} ?>>Disability</option>
                                <option value="Health" <? if ($OrderTicketPolicyType == "Health"){echo ' SELECTED';} ?>>Health</option>
                                <option value="LTC" <? if ($OrderTicketPolicyType == "LTC"){echo ' SELECTED';} ?>>LTC</option>
                            </select>
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketPolicyAmount">* Policy Amount:</label>
                        </div>
                        <div class="FormInput">
                            <input id="OrderTicketPolicyAmount" name="OrderTicketPolicyAmount" type="text" value="<? if ($OrderTicketPolicyAmount != 0) echo number_format($OrderTicketPolicyAmount, 2); ?>" required />
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormLabel">
                            <label for="OrderTicketSpecialInstructions">  Special Instructions:</label>
                        </div>
                        <div class="FormInput">
                            <textarea id="OrderTicketSpecialInstructions" name="OrderTicketSpecialInstructions" cols="40" rows="7"><? echo $OrderTicketSpecialInstructions; ?></textarea>
                        </div>
                    </div>
                    <br />
                    <div class="FormRow">
                        <div class="FormSubmit">
                            <input id="submit" type="submit" value="Submit" />
                        </div>
                    </div>
                    <br />
                </fieldset>
                <div id="sitesealdiv">
                    <span id="siteseal"><script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=nezI8DdJpwJdyKY47vVrSgFuL1UYVfwDggv4JN4ykS5AumDDidYzrl"></script></span>
                </div>
            </form>
        </div>
    </body>
</html>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.