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 !!!
<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 & 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"> </td>
<td valign="top"> </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"> </td>
<td valign="top"> </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 & 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 & 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"> </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"> </td>
<td valign="top"> </td>
</tr>
</table><input name="submit" type="submit" class="contentfont" onclick="return checkForm();" value="Send To Multimedia" />
</td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top"> </td>
</tr>
</table>
</form>