How can I make this form more easy ? Is there a better way to do it?

PHP
1

Hi Guys,

I’m working on a form at the moment. Having troubles to make the form more easier to use. I want to have it so CASH payments you don’t have to fill up that much details (no alert boxes).

But, I mainly wanted to see if there was a easier way or a better way of making this form.

THANKS !!! :slight_smile:

<head>
<script type='Text/JavaScript' src='scw.js'></script>
<script language="JavaScript" type="text/javascript">
///// TOGGLE HIDDEN SECTIONS BASED ON ONCHANGE VALUES FOR PAYMENT METHOD ,JOB STATUS, JOB COMPLETION /////
function toggleDisplay(id) //required if payment is changed to  - checked during onChange
{
    var element = document.getElementById(id);
    var paymethod = document.mm_form.payment_method;
    var i = document.mm_form.payment_method.selectedIndex;
    if (document.mm_form.payment_method[i].value =='Journal')    { //if Journal is selected
    element.style.display="inline"; }
    else { //if cash payment method is selected
    (document.mm_form.payment_method.value =='Cash')
    element.style.display="none";    }
}
function checkForm()
{
    var name, dept, contact, email, costcentre, date_required, jobtype, jobdesc, declaration, payment, authorisation,
        authorisedby, authcontact, paymethod, i, ii;

        name = document.mm_form.client_name;
        dept = document.mm_form.client_dept;
        contact = document.mm_form.client_contact;
        email = document.mm_form.client_email;
        costcentre = document.mm_form.client_costcentre;
        date_required = document.mm_form.date_required;
        jobtype = document.mm_form.job_type;
        jobdesc = document.mm_form.job_type_desc;
        declaration = document.mm_form.client_declaration;
        payment = document.mm_form.payment_method;
        i = document.mm_form.payment_method.selectedIndex;
        ii = document.mm_form.payment_method.selectedIndex;
        authname = document.mm_form.authoriser_name;
        authemail = document.mm_form.authoriser_email;
        authcontact = document.mm_form.authoriser_contact;


////////////////////////////////////////////////////////
    if(trim(name.value) == '')
    {
        alert('Please enter your NAME');
        name.focus();
        return false;
    }
////////////////////////////////////////////////////////
    else if(trim(dept.value) == '')
    {
        alert('Please enter your DEPARTMENT');
        dept.focus();
        return false;
    }
////////////////////////////////////////////////////////
    else if(trim(contact.value) == '')
    {
        alert('Please enter your CONTACT NUMBER');
        contact.focus();
        return false;
    }
////////////////////////////////////////////////////////
        else if(trim(email.value) == '')
    {
        alert('Please enter a valid EMAIL ADDRESS');
        email.focus();
        return false;
    }
////////////////////////////////////////////////////////
    else if(date_required.value == '')
    {
        alert('Please enter DATE REQUIRED');
        date_required.focus();
        return false;
    }
////////////////////////////////////////////////////////
    else if(trim(jobdesc.value) == '')
    {
        alert('Please enter a JOB REQUEST DESCRIPTION');
        jobdesc.focus();
        return false;
    }
////////////////////////////////////////////////////////
    else if (!declaration.checked)
    {
         alert("Please read the DECLARATION and declare material will not infringe Copyright");
        return false;
    }
////////////////////////////////////////////////////////
    else if (payment.value == '')
    {
         alert("Please select your PAYMENT METHOD");
        return false;
    }




///////////////////////////////////////////////////////////////////////////
    else if (payment[ii].value =='Cash')
    {
            jobdesc.focus();
            return true;
        }
    
    
////////////////////////////////////////////////////////
    else if (payment[i].value =='Journal')
    {
        if ((trim(authname.value) == '') || (trim(authcontact.value) == '') || (trim(authemail.value) == ''))
        {
            alert('You have chosen Journal(cost-centre) payment method.\
 Please complete AUTHORISER DETAILS');
            authname.focus();
            return false;
        }
        if ((trim(costcentre.value) == ''))
        {
            alert('You have chosen Journal(cost-centre) payment method.\
 Please provide your COST CENTRE');
            costcentre.focus();
            return false;
        }
    }


////////////////////////////////////////////////////////
    else
    {
        name.value = trim(name.value);
        dept.value = trim(dept.value);
        contact.value = trim(contact.value);
        email.value = trim(email.value);
        costcentre.value = trim(costcentre.value);
        return true;
    }
}

/*
Strip whitespace from the beginning and end of a string
Input : a string
*/
function trim(str)
{
    return str.replace(/^\\s+|\\s+$/g,'');
}

//CLEAR text thing

function cngit(a){
   document.getElementById('inputr').value = a;
}
/////////////////////////////////////////////////////////////////

</script>

</head>

<body>
        <p>Please fill in this form online to request a job. After submitting the form you will be able to upload any files related to your job. If you are using the journal (cost-centre) system please check with your account authoriser <strong>before</strong> submitting your job.</p>
        <form name="mm_form" id="mm_form" method="post" action="http://somewhere/newform_handler_web.php" enctype="multipart/form-data">
<input type="hidden" name="job_id_seed" value="3041">  <!--get current min and sec for job_id seed -->
<input type="hidden" name="mm_officer" value="[To Be Assigned]">
<input type="hidden" name="job_status" value="Not Started">
<input type="hidden" name="job_collected" value="N">
<input type="hidden" name="job_journalled" value="N">
<input type="hidden" name="journal_output" value="999">

<input type="hidden" name="journal_trading" value="05">
<input type="hidden" name="job_total_printing" value="0.00">
<input type="hidden" name="job_total_scanning" value="0.00">
<input type="hidden" name="job_total_laminating" value="0.00">
<input type="hidden" name="job_total_binding" value="0.00">
<input type="hidden" name="job_total_design" value="0.00">
<input type="hidden" name="job_total_av" value="0.00">
<input type="hidden" name="job_total_other" value="0.00">
<input type="hidden" name="job_total_gst" value="0.00">
<input type="hidden" name="job_total" value="0.00">
<input type="hidden" name="authoriser_approval" value="">
<input type="hidden" name="date_requested" value="2009-12-18">
<input type="hidden" name="time_requested" value="09:30:41 AM">
        <table width="66%" cellpadding="3">
          <tr>
            <td valign="top">Payment Method<span class="redfont"><br />
            </span></td>
            <td valign="top"><select name="payment_method" class="contentfont" onchange="toggleDisplay('auth_section', 'cash_section')" >
              <option value="" selected="selected"></option>
              <option value="Journal">Journal (Cost-Centre)</option>
              <option value="Cash" >Cash</option>
            </select></td>
          </tr>


          <tr>

            <th width="546" valign="top">Requestor's name <br />
                <small> (first &amp; last name only please)</small> </th>
            <td width="256" valign="top"><input name="client_name" type="text" width="200px" /></td>
          </tr>
          <tr>
            <th valign="top">Contact Number</th>

            <td valign="top"><input type="text" name="client_contact" width="200px" /></td>
          </tr>
          <tr>
            <th valign="top">Email</th>
            <td valign="top"><input type="text" name="client_email" width="200px" /></td>
          </tr>
          <tr>
            <th valign="top">Department</th>

            <td valign="top"><input type="text" name="client_dept" width="200px" /></td>
          </tr>
          <tr>
            <td valign="top">&nbsp;</td>

            <td valign="top">&nbsp;</td>
          </tr>
          <tr>
            <th valign="top">Date required </th>
            <td valign="top"><input name="date_required" type='text' id='date_required' onclick="scwShow(document.getElementById('date_required'),this,6,0)" value=''/> </td>

          </tr>
          <tr>
            <td valign="top">&nbsp;</td>
            <td valign="top">&nbsp;</td>
          </tr>
          <tr>
            <th valign="top">Request type</th>
            <td valign="top"><input name="job_type[]" type="checkbox" id="job_type[]" value="Designing" />

              Design<span class="fineprint"> (eg. posters, brochures, flyers, web design) </span><br />
                    <input type="checkbox" name="job_type[]" value="Printing" />
              Printing<br />
              <input name="job_type[]" type="checkbox" id="job_type[]" value="Laminating" />
              Laminating<br />
              <input name="job_type[]" type="checkbox" id="job_type[]" value="Scanning" />
              Scanning<br />

              <input name="job_type[]" type="checkbox" id="job_type[]" value="Photocopying" />
              Photocopying<br />
              <input name="job_type[]" type="checkbox" id="job_type[]" value="Binding" />
              Binding<br />
              <input name="job_type[]" type="checkbox" id="job_type[]" value="Media Copying" />
              CD/DVD burning<br />
              <input name="job_type[]" type="checkbox" id="job_type[]" value="Audio &amp; Video" />
              Audio/Video<br />
              <input name="job_type[]" type="checkbox" id="job_type[]" value="Other, see description" />
              Other (include in description below) </td>

          </tr>
          <tr>
            <th valign="top">Job Request Description</th>
            <td rowspan="2" valign="top"><textarea name="job_type_desc" wrap="virtual" cols="40" rows="7"></textarea></td>
          </tr>
          <tr>
            <td valign="top"><p>Please be as specific as possible so that we can price your job accurately. <br />

                <span class="fineprint">(eg. number of copies &amp; pages, printing size, laminating needed) </span></p>            </td>
          </tr>
          <tr>
            <td colspan="2" valign="top"><input type="checkbox" name="client_declaration" value="Y" />
            I declare the material submitted for reproduction to the Multimedia Services will not infringe Copyright.</td>
          </tr>
           <tr>
            <th valign="top">Additional information/remarks</th>
            <td valign="top"><textarea name="remarks" wrap="virtual" rows="4" cols="40" class="contentfont"></textarea></td>
          </tr>
          <tr>
            <td valign="top">&nbsp;</td>
            <td valign="top"><input name="hidden" type="hidden" value="webform" />
          <tr>
            <td colspan="2" valign="top"><table width="100%" cellpadding="3" id="auth_section" style="display: none; ">
                <tr>

                  <td colspan="2"><span class="style1">Multimedia Services will notify the total amount chargable to the cost-centre Authoriser via email. Any job request to be charged to cost-centre will not be started unless we have obtained approval from the cost-centre Authoriser.
                  <strong>The authoriser cannot be the same person who is requesting the job.</strong></span></td>
                </tr>
                <tr>
                  <td>Authoriser's name</td>
                  <td><input type="text" name="authoriser_name"  value="The authoriser cannot be the requestor!" size="35" onclick="authoriser_name.value='';" /></td>
                </tr>
                <tr>

                  <td>Authoriser email</td>
                  <td><input type="text" name="authoriser_email" size="35" /></td>
                </tr>
                <tr>
                  <td>Cost centre number</td>
                  <td><input type="text" name="client_costcentre" size="6" maxlength="5" /></td>
                </tr>
                <tr>

                  <td>Authoriser's contact no. </td>
                  <td><input type="text" name="authoriser_contact" size="35" /></td>
                </tr>
              </td>
          </tr>
          <tr>
            <td valign="top">&nbsp;</td>
            <td valign="top">&nbsp;</td>
          </tr>
              </table><input name="submit" type="submit" class="contentfont" onclick="return checkForm();" value="Send To Multimedia" />
              </td>
          </tr>
          <tr>
            <td valign="top">&nbsp;</td>
            <td valign="top">&nbsp;</td>
          </tr>
        </table>
        </form>
2

A very effective way to make forms easier is to split them up across multiple pages, and provide clear indications to the user about where in the process the person is.

3

You mean something like a step by step guide ? Would you have any examples of one ?

If it is split across multiple pages then it will require some session variables…

4

Yes. In wizard like application (multi-step form), $_SESSION variables becomes handy.

5

I would go for having the forms in multiple pages (or even in the same page with some conditions) and storing them in the hidden fields until they are saved in the database rather than giving server much load in storing the sessions and their data. Like post first form to second form and store the first form data in hidden fields in second form and so on in the following forms. But if there really long list of forms or many steps then i would go for creating temporary tables and store the data in those tables and move all the data to the real table after all the steps are finished. I don’t think that is good idea to use sessions to store loads of data.

6

Using hidden fields is also good.
For long list of fields, we can use following trick to formulate the hidden fields:

<?php
$exclude_fields = array('step','submit');//list of fields to be excluded in hidden fields
if($_POST['step'] == 1){//creating hidden fields using $_POST array
	foreach($_POST as $key => $val){
		if(!in_array($key, $exclude_fields)){
			echo '<input type="hidden" name="'.$key.'" value="'.$val.'" />';
		}
	}
}
?>
7

Thanks for all your feedback. I’m going to give it a crack !!! Cheers. It’s much appreciated.