2 step form

fRAiLtY- · June 10, 2013

Hi,

I have written the below code and am trying to figure out the best way of making it into a 2 step form as currently it doesn't work as one.

The 2 steps are as follows:

1) 1 text input with "find job" button, indicated by lines.

2) Once find job has been clicked it takes you to the results set where you have 2 options, to enter a number or tick a box. The resulting actions from clicking "Update" is still to be coded, but I've got a bit stuck where it comes to putting it into steps.

Any help is appreciated.

<?php
/**
 * Despatcher
 *
 * @file        index.php
 * @package     Despatcher v1.0 (despatcher)
 * @category    Core
 */

ini_set('error_reporting', E_ALL);
?>

<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Despatcher®</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/main.css">

    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>

<div id="page">

<?php
// Check for post
if($_SERVER['REQUEST_METHOD'] === 'POST'){
    
    // Set some variables for the server
    $host = "xxxxxxx";
    $port = 'xxxx';
    $dbname = "xxxx";
    $db_username = "xxxx";
    $db_password = "xxxxx";
    $dsn = "sqlsrv:Server=$host,$port;Database=$dbname;";
    
    // Connect
    $db = new PDO($dsn, $db_username, $db_password);

    // Step 2
    if(!isset($_POST['update'])) {
        // Query
        try {
            $sql = 'SELECT * FROM MainJobDetails WHERE JobNo = ?';
            $q = $db->prepare($sql);
            $q->execute(array($_POST['jobnumber']));

            // Return results
            while($row = $q->fetch(PDO::FETCH_ASSOC)) {
                echo '<h2>Scan the barcode on the label or click "Local Delivery"</h2>';
                echo '<form id="update" action="" method="post">';
                echo '<table class="results"><tr><th>';
                echo 'Customer';
                echo '</th><th>';
                echo 'Description';
                echo '</th><th>';
                echo 'Consignment #';
                echo '</th><th>';
                echo 'Local Delivery';
                echo '</th></tr><tr><td>';
                echo $row['InvoiceCustomerName'];
                echo '</td><td>';
                echo $row['JobDesc'];
                echo '</td><td>';
                echo '<input type="text" name="consignment" id="consignment"/>';
                echo '</td><td>';
                echo '<input type="checkbox" name="local" id="local"/>';
                echo '</td></tr></table><br />';
                echo '<button type="submit" id="updatebutton" class="blue button"/>Update details</button></form>';
                return;
            }
        }
        catch(PDOException $e) {
            echo $e->getMessage();
        }
    } elseif(isset($_POST['update'])) {
        "Thanks";
    }
} ?>
    <!--[if lt IE 7]>
    <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
        your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to
        improve your experience.</p>
    <![endif]-->
    <p>Scan the job bag</p>
    <form id="jobnumber" method="post" action="">
        <input type="text" name="jobnumber" id="jobnumber"/><br />
        <div id="go-button">
            <button type="submit" class="blue button"/>Find Job</button>
        </div>
    </form>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

</body>
</html>

Edited June 10, 2013 by fRAiLtY-

rwhite35 · June 10, 2013

In a Model Control Viewer methodology, you should be handing each step to a separate script. That way you can keep track of where you're in the registration process. At the end of the first step, I would write your POST data to a sesssion variable(assumes you scrub the POST input first). Then in subsequent steps you can add to that session data. In the final step, you then process the session variable however you choose.

fRAiLtY- · June 11, 2013

Excuse my ignorance, and thanks for the response, however it's just a simple 1 page script. It's an internal project for our business that is never going to develop into a web app and isn't accessible to the world wide web. It's just a form, with 2 steps:

Step 1, enter job number

Step 2, enter consignment number and update onclick.

An MVC approach for this seems a bit overkill, but please feel free to correct me. I just need to rework what I've done into a functioning 2 step form. There's no users or anything of the sort, it utilises a barcode scanner.

rwhite35 · June 11, 2013

Okay how about this: Step One, first time through ($_POST would not be set):

initialLoad.php

$host = "xxxxxxx";
$port = 'xxxx';
$dbname = "xxxx";
$db_username = "xxxx";
$db_password = "xxxxx";
$dsn = "sqlsrv:Server=$host,$port;Database=$dbname;";
// Connect
$db = new PDO($dsn, $db_username, $db_password);
try {
$sql = 'SELECT * FROM MainJobDetails WHERE JobNo = ?';
$q = $db->prepare($sql);
$q->execute(array($_POST['jobnumber']));
// Return results
while($row = $q->fetch(PDO::FETCH_ASSOC)) {
echo '<h2>Scan the barcode on the label or click "Local Delivery"</h2>';
echo '<form id="update" action="processInput.php" method="post">';
echo '<table class="results"><tr><th>';
echo 'Customer';
echo '</th><th>';
echo 'Description';
echo '</th><th>';
echo 'Consignment #';
echo '</th><th>';
echo 'Local Delivery';
echo '</th></tr><tr><td>';
echo $row['InvoiceCustomerName'];
echo '</td><td>';
echo $row['JobDesc'];
echo '</td><td>';
echo '<input type="text" name="consignment" id="consignment"/>';
echo '</td><td>';
echo '<input type="checkbox" name="local" id="local"/>';
echo '</td></tr></table><br />';
echo '<button type="submit" id="updatebutton" class="blue button"/>Update details</button></form>';
return;
}
}
catch(PDOException $e) {
echo $e->getMessage();
}

Now process the input:

processInput.php:

session_start();
if($_SERVER['REQUEST_METHOD'] === 'POST'){
$_SESSION['InvCustName']['cons'] = $_POST['consignment'];
$_SESSION['InvCustName']['local']=$_POST['local'];
}

if(!empty($_SESSION['invCustName']['local']) {
//do some additional processing like location redirect to the next step
} else {
//send them to an alternate step since they didn't check off the local box.
}

Using this strategy, you can better control the users flow through whatever your process might be. Hope that makes more sense. I've left out most of the HTML output for brevity.

cyberRobot · June 11, 2013

I have written the below code and am trying to figure out the best way of making it into a 2 step form as currently it doesn't work as one.

What do you mean that the form doesn't even work as one? Are you getting errors? What is it doing that's unexpected?

Side note: your form has two separate id attributes with the same value.

<form id="jobnumber" method="post" action="">
        <input type="text" name="jobnumber" id="jobnumber"/>

The id value can only be used once throughout the page.

http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

Sign In

2 step form

Recommended Posts

fRAiLtY-

Link to comment

Share on other sites

rwhite35

Link to comment

Share on other sites

fRAiLtY-

Link to comment

Share on other sites

rwhite35

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information