Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is incomplete. I've added functions for some of your options. copy and check for yourself where the changes are. I think you can do the rest</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt; &lt;title&gt;Joes Fruit and Vegetable Store&lt;/title&gt; &lt;script&gt; //calender dropdown menu var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec']; function populatedropdown(dayfield, monthfield, yearfield){ var today=new Date() var dayfield=document.getElementById(dayfield) var monthfield=document.getElementById(monthfield) var yearfield=document.getElementById(yearfield) for (var i=0; i&lt;31; i++) dayfield.options[i]=new Option(i, i+1) dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day for (var m=0; m&lt;12; m++) monthfield.options[m]=new Option(monthtext[m], monthtext[m]) monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month var thisyear=today.getFullYear() for (var y=0; y&lt;20; y++){ yearfield.options[y]=new Option(thisyear, thisyear) thisyear+=1 } yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year } // function validate function validate_form () { //validate name valid = true; if ( document.input.name.value == "") { alert ( "Please enter your name"); valid = false; } // validate address if ( document.input.address.value == "") { alert ( "Please enter your Address" ); valid = false; } // validate Town if ( document.input.town.value == "") { alert ( "Please enter your Town" ); valid = false; } // validate postcode var y = document.getElementById("postcode").value; if(isNaN(y)||y.indexOf(" ")!=-1) { alert("Postcode must be in numbers."); document.getElementById("postcode").focus(); return false; } if (y.length&gt;4 || y.length&lt;4) { alert("Postcode should be 4 digit"); document.getElementById("postcode").focus(); return false; } // validate home phone var y = document.getElementById('hphone').value; if(isNaN(y)||y.indexOf(" ")!=-1) { alert("Home Phone number must be in numbers."); document.getElementById('hphone').focus(); return false; } if (y.length&gt;10 || y.length&lt;10) { alert("Home Phone number should be 10 digit"); document.getElementById('hphone').focus(); return false; } // validate work phone var y = document.getElementById('wphone').value; if(isNaN(y)||y.indexOf(" ")!=-1) { alert("work Phone number must be in numbers."); document.getElementById('wphone').focus(); return false; } if (y.length&gt;10 || y.length&lt;10) { alert("Work Phone number should be 10 digit"); document.getElementById('wphone').focus(); return false; } // validate fax var y = document.getElementById('fax').value; if(isNaN(y)||y.indexOf(" ")!=-1) { alert("Fax number must be in numbers."); document.getElementById('fax').focus(); return false; } if (y.length&gt;10 || y.length&lt;10) { alert("Fax Phone number should be 10 digit"); document.getElementById('fax').focus(); return false; } // validate email { var x=document.forms["input"]["email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos&lt;1 || dotpos&lt;atpos+2 || dotpos+2&gt;=x.length) { alert("Not a valid e-mail address"); return false; } } // validate radio buttons var o = document.getElementById('rad1'); var t = document.getElementById('rad2'); if ( (o.checked == false ) &amp;&amp; (t.checked == true ) ) { // validate alternative address if ( document.input.street.value == "") { alert ( "Please enter alternative Address" ); valid = false; } // validate alternative suburb town if ( document.input.suburb.value == "") { alert ( "Please enter alternative Suburb or town" ); valid = false; } } // validate alternative postcode if ( (o.checked == false ) &amp;&amp; (t.checked == true ) ) { var y = document.getElementById('postcode2').value; if(isNaN(y)||y.indexOf(" ")!=-1) { alert("Alternative Postcode must be in numbers."); document.getElementById('postcode2').focus(); return false; } if (y.length&gt;4 || y.length&lt;4) { alert("Alternative Postcode should be 4 digit"); document.getElementById('postcode2').focus(); return false; } } //validate message box var o = document.getElementById("card"); if (o.checked == true ) { if ( document.input.message.value == "" || document.input.message.value == "Please Enter message here" ) { alert ( "Please enter message" ); valid = false; } return valid; } } function fnc1() { document.getElementById("hsuburb").value=document.getElementById("town").value; document.getElementById("hstate").value=document.getElementById("state").value; document.getElementById("postcode2").value=document.getElementById("postcode").value; document.getElementById("hsuburb").disabled="disabled"; document.getElementById("hstate").disabled="disabled"; document.getElementById("postcode2").disabled="disabled"; } function fnc2(myid) { value=document.getElementById(myid).value; a=document.getElementById("town").value; b=document.getElementById("state").value; c=document.getElementById("postcode").value; if(value==a) {alert("change your town"); document.getElementById(myid).value=''; } else if(value==b) {alert("change your state"); document.getElementById("default").selected="Selected"; } else if(value==c) {alert("change your postcode"); document.getElementById(myid).value=''; } } function fnc3() { document.getElementById("hsuburb").disabled=false; document.getElementById("hstate").disabled=false; document.getElementById("postcode2").disabled=false; } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;b&gt;Order form for Joe's Fruit Shop&lt;/b&gt;&lt;br&gt; &lt;br&gt; &lt;b&gt; * means you must fill in the details.&lt;/b&gt;&lt;br&gt; &lt;br&gt; &lt;b&gt;Your details:&lt;/b&gt;&lt;br&gt; &lt;br&gt; &lt;!-- Beggining of Form --&gt; &lt;form name="input" action="Joes.html" onsubmit="return validate_form ()"&gt; &lt;!--name input form --&gt; * Name: &lt;input type="text" name="name" id="name" onclick="this.value='';" placeholder="Enter your Name"&gt;&lt;br&gt; &lt;br&gt; &lt;!-- Address input form --&gt; * Address: &lt;input type="text" name="address" id="address" onclick="this.value='';" placeholder="Enter your street address"&gt;&lt;br&gt; &lt;br&gt; &lt;!-- Town &amp; state dropdown form--&gt; * Suburb or Town: &lt;input type="text" name="town" id="town" onclick="this.value='';" placeholder="Town"&gt; * State: &lt;!-- state drop down list --&gt; &lt;select name="state" id="state" &gt; &lt;option value="NSW"&gt;NSW&lt;/option&gt; &lt;option selected="selected" value="QLD"&gt;QLD&lt;/option&gt; &lt;option value="SA"&gt;SA&lt;/option&gt; &lt;option value="WA"&gt;WA&lt;/option&gt; &lt;option value="TAS"&gt;TAS&lt;/option&gt; &lt;option value="VIC"&gt;VIC&lt;/option&gt; &lt;option value="NT"&gt;NT&lt;/option&gt; &lt;option value="ACT"&gt;ACT&lt;/option&gt; &lt;/select&gt; &lt;!-- post code input form --&gt; * Postcode: &lt;input type='text' name="postcode" id="postcode" onclick="this.value='';" placeholder="****"&gt;&lt;br&gt; &lt;br&gt; &lt;!-- Home phone input form--&gt; * Phone: &lt;input type='text' name="hphone" id="hphone" onclick="this.value='';" placeholder="x-xxxx-xxx"&gt; &lt;!-- work phone input form --&gt; * Work phone &lt;input type='text' name="wphone" id="wphone" onclick="this.value='';" placeholder="x-xxxx-xxx"&gt;&lt;br&gt; &lt;br&gt; &lt;!-- Fax input form--&gt; *Fax: &lt;input type='text' name="fax" id="fax" onclick="this.value='';" placeholder="0x-xxxx-xxx"&gt; &lt;!-- Email input form--&gt; * Email address: &lt;input type='text' name="email" id="email" onclick="this.value='';" onsubmit="return validateForm();" placeholder="Enter your current email"&gt;&lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;!-- credit card form --&gt; &lt;b&gt;Credit card details:&lt;/b&gt;&lt;br&gt; &lt;br&gt; * Type: &lt;select name="credit card"&gt; &lt;option selected="selected" value="AMEX"&gt;Amex&lt;/option&gt; &lt;option value="Visa"&gt;Visa&lt;/option&gt; &lt;option value="Mastercard"&gt;Mastercard&lt;/option&gt; &lt;/select&gt; &lt;!--credit card month expiry date--&gt; *Expiry date: &lt;select name="expiration_month"&gt; &lt;option value=""&gt;Choose...&lt;/option&gt; &lt;option selected="selected" value="1"&gt;January&lt;/option&gt; &lt;option value="2"&gt;Febuary&lt;/option&gt; &lt;option value="3"&gt;March&lt;/option&gt; &lt;option value="4"&gt;April&lt;/option&gt; &lt;option value="5"&gt;May&lt;/option&gt; &lt;option value="6"&gt;June&lt;/option&gt; &lt;option value="7"&gt;July&lt;/option&gt; &lt;option value="8"&gt;August&lt;/option&gt; &lt;option value="9"&gt;September&lt;/option&gt; &lt;option value="10"&gt;October&lt;/option&gt; &lt;option value="11"&gt;November&lt;/option&gt; &lt;option value="12"&gt;December&lt;/option&gt; &lt;/select&gt; &lt;!-- Credit card year expiry date--&gt; &lt;select name="expiration_year"&gt; &lt;option value=""&gt;Choose...&lt;/option&gt; &lt;option selected="selected" value="2012"&gt;2012&lt;/option&gt; &lt;option value="2013"&gt;2013&lt;/option&gt; &lt;option value="2014"&gt;2014&lt;/option&gt; &lt;option value="2015"&gt;2015&lt;/option&gt; &lt;option value="2016"&gt;2016&lt;/option&gt; &lt;option value="2017"&gt;2017&lt;/option&gt; &lt;option value="2018"&gt;2018&lt;/option&gt; &lt;option value="2019"&gt;2019&lt;/option&gt; &lt;option value="2020"&gt;2020&lt;/option&gt; &lt;/select&gt; &lt;br&gt; &lt;br&gt; &lt;b&gt;Purchase details&lt;/b&gt;&lt;br&gt; &lt;br&gt; &lt;!-- Product dropdown form--&gt; * Product: &lt;select name="product"&gt; &lt;option value="carrot"&gt;Bag of carrots&lt;/option&gt; &lt;option value="zucchini"&gt;Zucchini&lt;/option&gt; &lt;option value="cabbage"&gt;Cabbage&lt;/option&gt; &lt;option value="grapes"&gt;Grapes&lt;/option&gt; &lt;option value="tomatoes"&gt;TAS&lt;/option&gt; &lt;option value="apples"&gt;Apples&lt;/option&gt; &lt;option value="banana"&gt;banana&lt;/option&gt; &lt;option selected="selected" value="cucumber"&gt;Cucumber&lt;/option&gt; &lt;/select&gt; &lt;!-- Quantity dropdown form--&gt; Quantity: &lt;select name="quantity"&gt; &lt;option selected="selected" value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;option value="6"&gt;6&lt;/option&gt; &lt;option value="7"&gt;7&lt;/option&gt; &lt;option value="8"&gt;8&lt;/option&gt; &lt;/select&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; * &lt;b&gt;Deliver to:&lt;/b&gt; &lt;br&gt; &lt;br&gt; &lt;!-- Address Radio check buttons--&gt; &lt;input type='radio' id="rad1" name='rad' onClick="fnc1()"&gt;Home Address&lt;br&gt; &lt;input type='radio' id="rad2" name='rad' onClick="fnc3()" /&gt;Other Address&lt;br&gt; &lt;br&gt; &lt;!-- alternative street form--&gt; Street &lt;input type='text' name="street" id="hstreet" onclick="this.value='';" placeholder="Street"&gt;&lt;br&gt; &lt;br&gt; &lt;!-- alternative Suburb form--&gt; Suburb &lt;input type='text' name="suburb" id="hsuburb" onclick="this.value='';" placeholder="Suburb or town" onChange="fnc2(this.id)"&gt;&lt;br&gt; &lt;br&gt; &lt;!-- alternative State dropdown form--&gt; State &lt;select name="state" id="hstate" onChange="fnc2(this.id)"&gt; &lt;option value="-1" id="default"&gt;select&lt;/option&gt; &lt;option value="NSW"&gt;NSW&lt;/option&gt; &lt;option selected="selected" value="QLD"&gt;QLD&lt;/option&gt; &lt;option value="SA"&gt;SA&lt;/option&gt; &lt;option value="WA"&gt;WA&lt;/option&gt; &lt;option value="TAS"&gt;TAS&lt;/option&gt; &lt;option value="VIC"&gt;VIC&lt;/option&gt; &lt;option value="NT"&gt;NT&lt;/option&gt; &lt;option value="ACT"&gt;ACT&lt;/option&gt; &lt;/select&gt; &lt;br&gt; &lt;br&gt; &lt;!-- alternative post code form --&gt; Postcode:&lt;input type='text' name="postcode2" id="postcode2" onclick="this.value='';" placeholder="****" onChange="fnc2(this.id)"&gt;&lt;br&gt; &lt;br&gt; &lt;br&gt; * Date delivery required: &lt;!-- Calender drop down menu--&gt; &lt;select id="daydropdown"&gt; &lt;/select&gt; &lt;select id="monthdropdown"&gt; &lt;/select&gt; &lt;select id="yeardropdown"&gt; &lt;/select&gt; &lt;script type="text/javascript"&gt; //populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select) window.onload=function(){ populatedropdown("daydropdown", "monthdropdown", "yeardropdown") } &lt;/script&gt; &lt;br&gt; &lt;br&gt; &lt;!-- include a card option--&gt; Include a card: &lt;input type="checkbox" name="card" id="card"&gt;Yes&lt;br&gt; &lt;br&gt; Personal message on card: &lt;textarea name="message" id="message" cols="20" rows="10" onclick="this.value='';"&gt;Please Enter message here&lt;/textarea&gt;&lt;br&gt; &lt;br&gt; Click on &lt;b&gt;Submit&lt;/b&gt; when done; click on &lt;b&gt; Clear form&lt;/b&gt; to reset. &lt;!-- submit button--&gt; &lt;input type="submit" value="Submit"&gt; &lt;!-- reset button--&gt; &lt;input type="reset" value="Reset"&gt; &lt;/form&gt;&lt;br&gt; &lt;script&gt; &lt;!-- document.write("&lt;i&gt;Last updated "+document.lastModified+"&lt;I&gt;"); //--&gt; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload