simply jquery javascript purchase order form

purchase order

<p>Access the <a href="/library/reports/purchaseform.php">OLD purchase order form here.</a></p>
<script>
    $(document).ready(function(){
		// from http://stackoverflow.com/questions/19578111/how-to-add-clone-form-fields-using-jquery-and-increment-ids-and-names
		// this will add a new row of fields each time user clicks 'add extra line' button
		
        //We will be using an unique index number for each new instance of the cloned form
        var item_number_form_index=0;
        
		//When the button is clicked (or Enter is pressed while it's selected)
        $("#addnewitemline").click(function(){
            //Increment the unique index cause we are creating a new instance of the form
            item_number_form_index++;
			
            //Clone the form and place it just before the button's <p>. Also give its id a unique index
            $(this).parent().before($("#itemaddline").clone().attr("id","itemaddline" + item_number_form_index));
            
			//Make the clone visible by changing CSS
            $("#itemaddline" + item_number_form_index).css("display","inline");
            
			//For each input fields contained in the cloned form...
            $("#itemaddline" + item_number_form_index + " :input").each(function(){
                //Modify the name attribute by adding the index number at the end of it
                $(this).attr("name",$(this).attr("name") + item_number_form_index);
                //Modify the id attribute by adding the index number at the end of it
                $(this).attr("id",$(this).attr("id") + item_number_form_index);
				
            });
			$("#itemaddline" + item_number_form_index + " span.itemnum").text(item_number_form_index);

        }); 
	// add some item lines by default. (this pretends the button has been clicked three times on load)	
	$( "#addnewitemline" ).trigger( "click" );	
	$( "#addnewitemline" ).trigger( "click" );	
	$( "#addnewitemline" ).trigger( "click" );	

	
// if they select it is a new supplier then show reason box and make it required.
 $('#frm-newsupplier').change(function () {
    var reqreason = $('#frm-newsupplier').val();
    if(reqreason == "Yes")  {
		$("#reasonhidden").fadeIn( "slow" );
		$("#frm-Reason").attr("required","true");
    } else { // but if they then select no, do the opposite.
		$("#reasonhidden").fadeOut( "slow" );
		$("#frm-Reason").removeAttr("required");
	}	
});

// Update the total cost when quantity/cost/vat fields updated.
// if the cost field for any line item changes.
$('.cost').change(function () {
	updatecosttotals();
});
$('.quantity').change(function () {
	updatecosttotals();
});
$('.vat').change(function () {
	updatecosttotals();
});

var updatecosttotals = function() {
	var totalcost = 0;
	$('.itemline').each(function() { // for each item fieldset on the entire form#
		var rawcost = $(this).find(".cost").val();
		rawcost = rawcost.replace("\u00A3",""); // stupid unicode poundsign (this removes the £, if there is one)
		var thiscost = parseFloat(rawcost); // convert the cost field to a float.
		if (!isNaN(thiscost)) { // if not not a number, ie if it is a number
			var thisquantity = parseInt($(this).find(".quantity").val()); // get the quantity.
			var itemtotal = thiscost * thisquantity; // total item cost is quantity x cost
			// add vat , if vat is checked 
			var VATcheck = $(this).find(".vat:checked").val();
			if ( VATcheck ) {
				var itemtotalpercentage = 0.20 * itemtotal;
				itemtotal = itemtotal + itemtotalpercentage;
			}
			totalcost = totalcost + itemtotal; // add this cost to the running total
			$(this).find(".itemtotal").text("total: " + itemtotal.toFixed(2)); //print it below the cost box
		}
	});
	$("#frm-totalcost").val(totalcost.toFixed(2)); // update total field.
}	
	

	
});
</script>

<style type="text/css"><!--

.pur_col1 {
width:20px;
}
.pur_col2 {
width:250px;
float:left;
}
.pur_col3 {
width:90px;
float:left;
}
.pur_col4 {
width:80px;
float:left;
}
.pur_col5 {
width:60px;
float:left;
}
/* cost */
.pur_col6 {
	width:70px;
	float:left;
}
.pur_col7 {
width:35px;
float:left;
}
.purlineitem {
	float:left;
	border: 1px solid black;
	min-height: 70px;
	font-size:0.9em;
	padding:2px;
}	
.hidden {
    display: none;
}

--></style>

<p>Everything that requires an invoice must have a purchase order.</p>
<p>Please allow 3-5 working days for purchase order to be submitted - if urgent please contact the Finace Administrator or Administration Supervisor.</p>
<p>If VAT is to be added, please tick the VAT box.</p>

<form class="style1" id="purchaseorder" action="http://www.sussex.ac.uk/bin/FormMail2.pl" method="post">
<fieldset>

<input name="config_file" type="hidden" value="/cwisnew/WWW/library/assets/purchasingconfig.txt" /> 
<input name="recipient" type="hidden" value="e.stephen@sussex.ac.uk" /> 
<input name="subject" type="hidden" value="Purchase order request" /> 
 
<input type="hidden" name="return_link_title" value="Back to Intranet">
<input name="return_link_url" type="hidden" value="http://www.sussex.ac.uk/library/intranet" /> 
<input name="print_config" type="hidden" value="email" /> 
<input name="env_report" type="hidden" value="REMOTE_HOST" />

<h2>Purchase order form</h2>
<h3>Your details</h3>
<fieldset><dl>
<dt><label for="frm-name">* Name:</label></dt><dd><input id="frm-name" maxlength="100" required  name="name" size="35" type="text" /></dd>

<dt><label for="frm-email">* Email:</label></dt><dd><input id="frm-email" maxlength="100" required  name="email" size="35" type="email" /></dd>
</dl>

</fieldset>
<h3>Supplier</h3>
<fieldset>
<dl>
<dt><label for="frm-supplier">* Supplier:</label></dt><dd><input id="frm-supplier" required  maxlength="100" size="35" name="Supplier" /></dd>

<dt>New Supplier?</dt>
<dd><select id="frm-newsupplier" class="input" name="New Supplier">
<option selected="selected" value="No">No</option>
<option value="Yes">Yes</option>
</select></dd>
<span id="reasonhidden" class="hidden">
<dt><label for="frm-reason">* Reason (include supplier's address and contact info):</label></dt>
<dd><textarea id="frm-Reason" cols="60" rows="5" name="ReasonForNewSupplier"></textarea></dd>
</span>


<dt><label for="frm-quote">Quote Ref (if applicable):</label></dt>
<dd><input id="frm-quote" maxlength="100" name="quote" size="35" type="text" /></dd>

<dt><label for="frm-costcode">Costcode (please try to include a costcode):</label></dt>
<dd><input id="frm-costcode" maxlength="100" name="costcode" size="35" type="text" /></dd>
</dl>
</fieldset>
<h3>Items</h3>
<p>Uncheck VAT is not payable. Click "Add extra lines" if more than three items.</p>
<fieldset>

<div style="width:610px;display:inline;">
	<div class="pur_col1 purlineitem">#</div>
	<div class="pur_col2 purlineitem">Item Description</div>
	<div class="pur_col3 purlineitem">Product num</div>
	<!-- <div class="pur_col4 purlineitem">Catalogue page</div> -->
	<div class="pur_col5 purlineitem">No. of items</div>
	<div class="pur_col6 purlineitem">Cost per item</div>
	<div class="pur_col7 purlineitem">inc VAT</div>
	<div style="clear:both"></div>
</div>

<div style="width:610px;" class="hidden itemline" id="itemaddline">
	<input type="hidden" name="START_OF_ITEM_" value="########################" />
	<div class="pur_col1 purlineitem"><span class="itemnum"></span></div>
	<div class="pur_col2 purlineitem"><textarea id="frm-Item" cols="27" rows="3" name="Item_"></textarea></div>
	<div class="pur_col3 purlineitem"><input id="frm-catid" maxlength="100" name="catid_" size="8" type="text" /></div>
	<!-- <div class="pur_col4 purlineitem"><input id="frm-catpage" maxlength="10" name="catpage_" size="2" type="text" /></div> -->
	<div class="pur_col5 purlineitem"><input id="frm-numofitems" class="quantity" maxlength="6" name="num_of_Items_" size="2" type="text" value="1" /></div>
	<div class="pur_col6 purlineitem">
		<input id="frm-cost" class="cost" maxlength="10" name="Cost" size="3" type="text" /> 
		<div class="itemtotal" style="font-size:0.9em"> </div>
	</div>
	<div class="pur_col7 purlineitem"><input id="frm-vat" class="vat" name="vat" type="checkbox" checked ></div>
	<div style="clear:both"></div>
</div>



<p> <input type="button" value="Add extra line" id="addnewitemline"></p>

<p><div style="clear:both"></div>
<dl>
<dt><label for="frm-totalcost">Total expected cost:</label></dt>
<dd><input id="frm-totalcost" maxlength="10" name="totalcost" size="8" type="text" /></dd>
<dt><label for="frm-addinfo">Additional information:</label></dt>
<dd><textarea id="frm-addinfo" cols="60" rows="5" name="AdditionalInformation"></textarea></dd>

</dl>

<div style="clear:both"><input type="submit" value="Submit" /></div>


</fieldset>
</form>