JavaScript - Need To Preserve User-entered Quote Marks In Form Fields
I have a JavaScript application that needs to preserve double quote marks and apostrophes (" and ') that are entered into form fields by the user. The form data is passed through several screens using hidden fields.
Right now, apostrophes work because I have the input fields coded as value="". I have not found a way for JavaScript to retrieve the field's value if double quotes are entered by the user. If I change the parameter to value='' (single quotes) then the apostrophes probably won't work. Is there a straightforward way for JavaScript to retrieve the field value containing quotes, so that I can manipulate it into a different string that can be easily passed between HTML pages? Similar TutorialsI have the following piece of script to write a line in HTML which is variable; the variable 'bunting' is the path and filename (which varies depending on site where page resides): <CODE> <script language="JavaScript" type="text/javascript"> <!-- document.write('<div id="ic1" style="background-image:url(' + bunting + ');">'); //--> </script> </CODE> This works in most browsers, but in Firefox 3.0.4, it fails to render, and instead generates a piece of literal text: ');//--> on the page. I've read, and re-read the script, and believe it to be correct (with the single quote marks being the javascript delimiters and the double quotes being the html delimiters. I've also tried various combinations of creating piecemeal variables and then creating a final variable by concatenating the pieces. Any help would be greatly appreciated. Hello Everyone, I am inexperienced in JavaScript. I have an html page with several numeric input fields which are an array. At the bottom of the screen is a running total of the numbers entered. The html is like: <INPUT TYPE=TEXT NAME='array[0]' onchange='addup()'> <INPUT TYPE=TEXT NAME='array[1]' onchange='addup()'> etc..... <INPUT TYPE=TEXT NAME='array[9]' onchange='addup()'> <INPUT TYPE=TEXT NAME='arraytotal'> The javascript is: function addup() { var total = 0; for (var i=0; i<=10; i++) { total += Number(document.forms["formname"]["array["+i+"]"].value); } document.forms["formname"]["arraytotal"].value = total; } This works ok, but I don't want the field arraytotal to be an input field. How can I do this please? Hi, I am trying to write a small javascript program where I can call the following two functions and store information which a user enters. The problem is if I call the function a second time to add more information the array gets overwritten. info () insert (name, surname, favouriteColour) function info () { name = prompt ("Please enter your name."); surname = prompt ("Please enter your surname."); favouriteColour = prompt ("Please enter your favourite colour."); } function insert (name, surname, favouriteColour) { var info = new Array (); info.name = name; info.surname = surname; info.favouriteColour = favouriteColour; return info }; Help is really appreciated.. It will be best to use server side scripting like php for it , because user can disable his javascript in that condition your code won't work
I have a small form that I'm working on for a client. They want a form that their potential leads can fill out and then hit 'calculate rate'. Once this is done, the results should display on another page with a short summary of what their quote will be as well as some of the other information they filled out. It should also send an email to my client displaying the information that their lead just filled out. My only problem is I am not sure how to go about the calculation part. I know I would have to do an onSubmit, but how would I hide that calculation and then receive that number on another page. Here is the javascript for that form: Code: /* This source is shared under the terms of LGPL 3 www.gnu.org/licenses/lgpl.html You are free to use the code in Commercial or non-commercial projects */ //Set up an associative array //The keys represent the size of the cake //The values represent the cost of the cake i.e A 10" cake cost's $35 var practice_field = new Array(); practice_field["None"]=0; practice_field["Allergy and Immunology"]=4400; practice_field["Endocrinology"]=4400; practice_field["Pathology"]=4400; practice_field["Dermatology"]=4400; practice_field["Geriatrics"]=4400; practice_field["Physical Rehabilitation"]=4400; practice_field["Family Practice"]=6900; practice_field["General Practice"]=6900; practice_field["Internal Medicine"]=6900; practice_field["Oncology"]=6900; practice_field["Oral Surgery"]=6900; practice_field["Radiology"]=6900; practice_field["Gastroenterology"]=6900; practice_field["Infectious Disease"]=6900; practice_field["Nephrology"]=6900; practice_field["Ophthalmology"]=6900; practice_field["Pediatrics"]=6900; practice_field["Urology"]=6900; practice_field["Anesthesiology"]=9000; practice_field["Cosmetic Surgery"]=9000; practice_field["General Surgery"]=9000; practice_field["Neurology"]=9000; practice_field["Otolaryngology"]=9000; practice_field["Plastic Surgery"]=9000; practice_field["Vascular Surgery"]=9000; practice_field["Cardiology"]=9000; practice_field["Emergency Medicine"]=9000; practice_field["Gynecology"]=9000; practice_field["Orthopedic Surgery"]=9000; practice_field["Pain Management"]=9000; practice_field["Pulmonary Surgery"]=9000; practice_field["Neurological Surgery"]=9900; practice_field["Obstetrics"]=9900; //Set up an associative array //The keys represent the filling type //The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9 //We use this this array when the user selects a filling from the form var society_member= new Array(); society_member["None"]=null; society_member["BCMA"]=0.10; society_member["DCMA"]=0.10; society_member["FOGS"]=0.10; society_member["FNS"]=0.10; society_member["PBCMS"]=0.10; society_member["FSPS"]=0.10; //This function finds the filling price based on the //drop down selection function getPracticeField() { var docPracticeField=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the select id="filling" var selectedPracticeField = theForm.elements["practice"]; //set cakeFilling Price equal to value user chose //For example filling_prices["Lemon".value] would be equal to 5 docPracticeField = practice_field[selectedPracticeField.value]; //finally we return cakeFillingPrice return docPracticeField; } //This function finds the filling price based on the //drop down selection function getSelectedSociety() { var docSelectedSociety=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the select id="filling" var selectedSociety = theForm.elements["society"]; //set cakeFilling Price equal to value user chose //For example filling_prices["Lemon".value] would be equal to 5 docSelectedSociety = society_member[selectedSociety.value]; //finally we return cakeFillingPrice return docSelectedSociety; } //candlesPrice() finds the candles price based on a check box selection function candlesPrice() { var candlePrice=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the checkbox id="includecandles" var includeCandles = theForm.elements["includecandles"]; //If they checked the box set candlePrice to 5 if(includeCandles.checked==true) { candlePrice=0; } //finally we return the candlePrice return candlePrice; } function insciptionPrice() { //This local variable will be used to decide whether or not to charge for the inscription //If the user checked the box this value will be 20 //otherwise it will remain at 0 var inscriptionPrice=0; //Get a refernce to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the checkbox id="includeinscription" var includeInscription = theForm.elements["includeinscription"]; //If they checked the box set inscriptionPrice to 20 if(includeInscription.checked==true){ inscriptionPrice=0; } //finally we return the inscriptionPrice return inscriptionPrice; } function calculateTotal() { //Here we get the total price by calling our function //Each function returns a number so by calling them we add the values they return together var cakePrice = getPracticeField() + null - (getPracticeField() * getSelectedSociety()) + candlesPrice() + insciptionPrice(); //display the result var divobj = document.getElementById('totalPrice'); divobj.style.display='block'; divobj.innerHTML = "Your Pre-Paid Legal Defense Fee Will Be Around $"+cakePrice; } function hideTotal() { var divobj = document.getElementById('totalPrice'); divobj.style.display='none'; } If you look at the bottom you can see where the Function that Calculates everything is. Right now it calculates onClick. I just want it to calculate after the user has filled out the form completely and display that calculation on another page along with the rest of the information they inputted. I am trying to create a function or have this work some how where it displays the first number when you make your choice in the first drop down box, which is working so far. In the second drop down box, if any of the answers are chosen except for none, it will take off 10% of the first number. Then add or subtract from there. I just have a problem with creating a function to take off that 10%. Here is the javascript: Code: /* This source is shared under the terms of LGPL 3 www.gnu.org/licenses/lgpl.html You are free to use the code in Commercial or non-commercial projects */ //Set up an associative array //The keys represent the size of the cake //The values represent the cost of the cake i.e A 10" cake cost's $35 var practice_field = new Array(); practice_field["None"]=0; practice_field["Allergy and Immunology"]=4400; practice_field["Endocrinology"]=4400; practice_field["Pathology"]=4400; practice_field["Dermatology"]=4400; practice_field["Geriatrics"]=4400; practice_field["Physical Rehabilitation"]=4400; practice_field["Family Practice"]=6900; practice_field["General Practice"]=6900; practice_field["Internal Medicine"]=6900; practice_field["Oncology"]=6900; practice_field["Oral Surgery"]=6900; practice_field["Radiology"]=6900; practice_field["Gastroenterology"]=6900; practice_field["Infectious Disease"]=6900; practice_field["Nephrology"]=6900; practice_field["Ophthalmology"]=6900; practice_field["Pediatrics"]=6900; practice_field["Urology"]=6900; practice_field["Anesthesiology"]=9000; practice_field["Cosmetic Surgery"]=9000; practice_field["General Surgery"]=9000; practice_field["Neurology"]=9000; practice_field["Otolaryngology"]=9000; practice_field["Plastic Surgery"]=9000; practice_field["Vascular Surgery"]=9000; practice_field["Cardiology"]=9000; practice_field["Emergency Medicine"]=9000; practice_field["Gynecology"]=9000; practice_field["Orthopedic Surgery"]=9000; practice_field["Pain Management"]=9000; practice_field["Pulmonary Surgery"]=9000; practice_field["Neurological Surgery"]=9900; practice_field["Obstetrics"]=9900; //Set up an associative array //The keys represent the filling type //The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9 //We use this this array when the user selects a filling from the form var society_member= new Array(); society_member["None"]=1; society_member["BCMA"]=0.10; society_member["DCMA"]=0.10; society_member["FOGS"]=0.10; society_member["FNS"]=0.10; society_member["PBCMS"]=0.10; society_member["FSPS"]=0.10; //This function finds the filling price based on the //drop down selection function getPracticeField() { var docPracticeField=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the select id="filling" var selectedPracticeField = theForm.elements["practice"]; //set cakeFilling Price equal to value user chose //For example filling_prices["Lemon".value] would be equal to 5 docPracticeField = practice_field[selectedPracticeField.value]; //finally we return cakeFillingPrice return docPracticeField; } //This function finds the filling price based on the //drop down selection function getSelectedSociety() { var docSelectedSociety=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the select id="filling" var selectedSociety = theForm.elements["society"]; //set cakeFilling Price equal to value user chose //For example filling_prices["Lemon".value] would be equal to 5 docSelectedSociety = society_member[selectedSociety.value]; //finally we return cakeFillingPrice return docSelectedSociety; } //candlesPrice() finds the candles price based on a check box selection function candlesPrice() { var candlePrice=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the checkbox id="includecandles" var includeCandles = theForm.elements["includecandles"]; //If they checked the box set candlePrice to 5 if(includeCandles.checked==true) { candlePrice=5; } //finally we return the candlePrice return candlePrice; } function insciptionPrice() { //This local variable will be used to decide whether or not to charge for the inscription //If the user checked the box this value will be 20 //otherwise it will remain at 0 var inscriptionPrice=0; //Get a refernce to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the checkbox id="includeinscription" var includeInscription = theForm.elements["includeinscription"]; //If they checked the box set inscriptionPrice to 20 if(includeInscription.checked==true){ inscriptionPrice=20; } //finally we return the inscriptionPrice return inscriptionPrice; } function calculateTotal() { //Here we get the total price by calling our function //Each function returns a number so by calling them we add the values they return together var cakePrice = getPracticeField() * getSelectedSociety() + candlesPrice() + insciptionPrice(); //display the result var divobj = document.getElementById('totalPrice'); divobj.style.display='block'; divobj.innerHTML = "Total Price For the Cake $"+cakePrice; } function hideTotal() { var divobj = document.getElementById('totalPrice'); divobj.style.display='none'; } I have the following code that I wrote myself (except for the function isNumberKey). However, I don't know how to actually add the numbers together. My plan is to store the value entered in the forms as a variable, then manipulate the variables to get my final number. The final number would be stored in variable named Total and would be displayed after Total: at the bottom of my page. Could anyone help me? I can provide additional information if you need it. Code: <HTML> <TITLE>Magazine Prices </TITLE> <BODY> <SCRIPT language=Javascript> <!-- Price = oForm.elements["price"].value; Quantity = oForm.elements["quantity"].value; Subtotal = oForm.elements["subtotal"].value; Shipping = oForm.elements["shipping"].value; function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } //--> </SCRIPT> <!-- Price * Quantity = Subtotal. Subtotal value should fill in automatically in the Subtotal input field. Subtotal * Shipping = Total. //--> <TABLE> <TR><TD>Price: </TD><TD><INPUT id="Price" name="Price" onkeypress="return isNumberKey(event)" type="text" name="txtChar"> </TD></TR> <TR><TD>Quantity:</TD> <TD><INPUT id="Quantity" name="Quantity" onkeypress="return isNumberKey(event)" type="text" name="txtChar"> </TD></TR> <TR><TD>Subtotal:</TD> <TD><INPUT id="Subtotal" name="Subtotal" onkeypress="return isNumberKey(event)" type="text" readonly="readonly" name="txtChar"> </TD></TR> <TR><TD>Shipping:</TD> <TD><INPUT id="Shipping" name="Shipping" onkeypress="return isNumberKey(event)" type="text" value="10%" readonly="readonly" name="txtChar"> </TD></TR> </TABLE> <b>Total: </b> </BODY> </HTML> Hello, I have a form that works out some basic math questions e.g. area etc. I run a function when a form field is updated to do the calculations, however I'd like to run a different calculation depending on which form element was updated. Is there a way to say something like: if (area1 was updated) { work out this calculation } if(area2 was updated) { work out this calculation } and so on? Thanks, Nicola Hi, I am trying to only allow a person to enter alpha characters in this field and if they try to enter a number a pop up box will tell them they can only enter alpha characters. Can this be done? Here is my code: How would you like us to address you? ("Dear Pat" Dear <input name="SALUT" type="text" id="address2" style="color: #000000; border-left: 0px solid #008000; border-right: 0px solid #254D78; border-top: 0px solid #008000; border-bottom: 2px solid #0033CC; background-color: #EBE1BE" tabindex="5" size="15" maxlength="50" onFocus="if(this.value=='SALUT')this.value='';"> Any help would be greatly appreciated. Thanks Hi, I currently have a <p> where it changes to a textarea when a button is clicked How do I preserve the whitespace when saving that text to a database and displaying back to a <p>? Hi, I have a working contact form with 3 of the fields requiring validation and they work well. I have added extra fields to the form (StatusClass, Project, CameFrom). These 3 fields return fine but I need to validated them. My problem is that the new fields don't show in the behaviours/validate panel even though they are within the form tag. Can anyone give me any help and advice as to how to accomplish this? Many thanks Code below.... Code: <script type="text/JavaScript"> <!-- function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_validateForm() { //v4.0 var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments; for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]); if (val) { nm=val.name; if ((val=val.value)!="") { if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@'); if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n'; } else if (test!='R') { num = parseFloat(val); if (isNaN(val)) errors+='- '+nm+' must contain a number.\n'; if (test.indexOf('inRange') != -1) { p=test.indexOf(':'); min=test.substring(8,p); max=test.substring(p+1); if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n'; } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; } } if (errors) alert('The following error(s) occurred:\n'+errors); document.MM_returnValue = (errors == ''); } //--> </script > Code: <form action="contact_us.asp" method="post" name="contact" target="_parent" class="contentText" id="contact" onsubmit="MM_validateForm('FullName','','R','Telephone','','RisNum','Email','','RisEmail');return document.MM_returnValue"> <table width="100%" border="0" cellspacing="5" cellpadding="0"> <tr> <td width="54%" class="subHeader">Full Name* </td> <td width="46%" class="subHeader"><input name="FullName" type="text" id="FullName" /></td> </tr> <tr> <td class="subHeader">Company Name </td> <td class="subHeader"><input name="CompanyName" type="text" id="CompanyName" /></td> </tr> <tr> <td class="subHeader">Address</td> <td class="subHeader"><input name="Address1" type="text" id="Address1" /></td> </tr> <tr> <td class="subHeader"> </td> <td class="subHeader"><input name="Address2" type="text" id="Address2" /></td> </tr> <tr> <td class="subHeader"> </td> <td class="subHeader"><input name="Address3" type="text" id="Address3" /></td> </tr> <tr> <td class="subHeader">Postcode</td> <td class="subHeader"><input name="Postcode" type="text" id="Postcode" /></td> </tr> <tr> <td class="subHeader">Telephone Number* </td> <td class="subHeader"><input name="Telephone" type="text" id="Telephone" /></td> </tr> <tr> <td class="subHeader">Mobile Number </td> <td class="subHeader"><input name="Mobile" type="text" id="Mobile" /></td> </tr> <tr> <td height="25" class="subHeader">Email Address* </td> <td class="subHeader"><input name="Email" type="text" id="Email" /></td> </tr> <tr> <td height="30" class="subHeader">Status*</td> <td class="subHeader"><select name="StatusClass" id="StatusClass"> <option selected="selected">Please Choose</option> <option>Architect</option> <option>Interior Designer</option> <option>Private Client</option> <option>Student</option> <option>Trade Enquiry</option> </select> </td> </tr> <tr> <td height="23" class="subHeader">Project*</td> <td class="subHeader"><select name="Project" size="1" id="Project"> <option selected="selected">Please Choose</option> <option>Planning Stages</option> <option>New Build</option> <option>Refurbishment</option> <option>Barn Conversion</option> <option>No project - information only</option> </select> </td> </tr> <tr> <td height="37" class="subHeader">How did you hear about us?*</td> <td class="subHeader"><select name="CameFrom" size="1" id="CameFrom"> <option selected="selected">Please Choose</option> <option>Web Search</option> <option>Grand Designs</option> <option>Living Etc</option> <option>Home Building & Renovation</option> <option>Architect</option> <option>Friend/Family</option> <option>Magazine/Editorial</option> <option>Newspaper Article</option> <option>Trade Show/Exhibition</option> <option>Other</option> </select></td> </tr> <tr> <td height="24" class="subHeader">Brochure Request </td> <td class="subHeader"><input name="Brochure" type="checkbox" id="Brochure" value="checkbox" /></td> </tr> <tr> <td class="subHeader">Message</td> <td class="subHeader"><span class="style4"> <textarea name="Message" id="Message"></textarea> </span></td> </tr> <tr> <td class="subHeader"> </td> <td class="subHeader"><input name="Submit" type="submit" value="Submit" /></td> </tr> <tr> <td colspan="2" class="subHeader"><em>* Required fields</em></td> </tr> </table> </form> I am no javascript expert, very much a beginner. I am trying to incorporate some into a web-based form. The problem is the button I created to add extra fields does not work, and I can't find exactly where the problem is. I'm in need of some help from a javascript guru. Help me enjoy my Friday afternoon by solving this! The javascript is mostly borrowed and slightly altered, the "additem" I wrote myself so that is probably where the problem lies! Here is the html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/> <title></title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript"> function showAsset(id,str) { if (str=="") { document.getElementById("assetinfo"+id).innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("assetinfo"+id).innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getasset.php?q="+str,true); xmlhttp.send(); } var noFields = "5"; function additem() { var fieldrow = document.createElement('tr'); var fieldcolumn1 = document.createElement('td'); var fieldinput = document.createElement('input'); fieldinput.name = "asset"; fieldinput.onChange = "showAsset("+noFields+",this.value)"; var fieldcolumn2 = document.createElement('td'); fieldcolumn2.id = "assetinfo"+noFields; fieldcolumn1.appendChild(fieldinput); var fieldcolumns = fieldcolumn1 + fieldcolumn2; fieldrow.appendChild(fieldcolumns); var addbefore = document.getElementById('fieldend'); document.body.insertBefore(fieldrow, addbefore); noFields = noFields++; } </script> </head> <body> <form> <table> <tr> <td><input name="asset" onChange="showAsset(1,this.value)"></td> <td id="assetinfo1"></td> </tr> <tr> <td><input name="asset" onChange="showAsset(2,this.value)"></td> <td id="assetinfo2"></td> </tr> <tr> <td><input name="asset" onChange="showAsset(3,this.value)"></td> <td id="assetinfo3"></td> </tr> <tr> <td><input name="asset" onChange="showAsset(4,this.value)"></td> <td id="assetinfo4"></td> </tr> <tr> <td><input name="asset" onChange="showAsset(5,this.value)"></td> <td id="assetinfo5"></td> </tr> <tr id="fieldend"> <td><input id="addfield" type="button" value="add item" onClick="addfield()"></td> </tr> </table> </form> </body> </html> Here is the associated getasset.php: Code: <?php $q=$_GET["q"]; $con = mysql_connect('localhost', 'root', 'root'); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("assettracking", $con); $sql="SELECT * FROM assets WHERE assetID = '".$q."'"; $result = mysql_query($sql); while($row = mysql_fetch_array($result)) { echo "<b>".$row['make'] ." ".$row['model'] ." - ".$row['serialnumber']."</b> | Status: ".$row['statusID']." | Comments: ".$row['comments']; } mysql_close($con); ?> Hi, i have this code that generate 10 rows with form fields: Code: <form> <?php for($i=1;$i<=10;$i++) {?> <div id="rowz-rep"> <div class="row1"><?=$i?></div> <div class="row2a"><input name="title[]" type="text" class="fieldSubmit"/></div> <div class="row3a"><input name="url[]" type="text" class="fieldSubmit"/></div> <div class="row4a"><select name="type[]" class="dropSubmit"><? foreach($allowed_types as $at) { echo '<option value="'.$at.'">'.$at.'</option>'; }?></select></div> </div> <? }?> </form> I need that onclick with JS add 10 more rows so i get something like Code: <?php for($i=1;$i<=20;$i++) {?> Hi all, I'm new to here and JS but I have question for you! So I have this form with inputs that are considered arrays in my PHP code: Code: <input type="checkbox" name="1" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="2" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="3" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="4" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="5" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="6" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="7" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="8" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="9" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="10" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="11" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="12" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="13" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="14" /> <input name="ii[]" type="text"> <br /> <input type="checkbox" name="15" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="16" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="17" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="18" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="19" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="20" /> <input name="i[]" type="text"> <br /> I don't want to keep adding in new spots every time a user want to add a new field. I would like them to be able to press a button that will add another one of those fields and so on. I'm not sure how this can be achieved but that's why I am turning to you! Thanks! Here's what I have so far in my validation part. However, I need help as to how to validate the following fields when the user clicks the submit button. -Radio Button *title (4 options) *member (3 options) *vegetarian (2 options) -Drop down lists *regstartdate (3 options) *regenddate (3 options) *confdinner (2 options) *paymethod (3 options) -UK Post Code (text box with maxlength=8) My current code shows 1 popup with all the error messages. Here's what I have so far: Redacted Hi guys, I created a form that contains about 10 form fields and would like to add the option to dynamically add more sets of those 10 fields if a user clicks a word or a button but I need help. I'm a beginner when it comes to JavaScript and would appreciate any help. This is what I need to generate dynamically. Can someone give me an idea of how to get started please? Code: <div id="dynamicInput"> <ul> <li>1</li> <li><input name='textfield1' type='text' size='10' /></li> <li><select name='commodity' width='100' style='width: 100px'> <option>Option 1</option> </select></li> <li><input name='textfield2' type='text' size='5' /></li> <li><input name='textfield3' type='text' size='10' /></li> <li><input name='textfield4' type='text' size='10' /></li> <li><input name='textfield5' type='text' size='10' /></li> <li><input name='textfield6' type='text' size='5' /></li> <li><input name='textfield7' type='text' size='5' /></li> <li><input name='textfield8' type='text' size='5' /></li> </ul> </div> I'm trying to make a site where when you click the submit button it puts an asterisk next to all of the incomplete fields while also displaying an alert box. I'm having no luck with it so far since I don't know how to get a script to print something to a specific part of a page. Here is what the whole thing looks like so far. I tried using page-jumping but that didn't work: Code: <html> <head> <title>Sortomatic 5000 </title> <script type="text/javascript"> function Sort(form){ var fruits = [form.One.value, form.Two.value, form.Three.value]; if (form.One.value!=""&&form.Two.value!=""&&form.Three.value!=""){ document.writeln(fruits.sort()); } if(form.One.value=""){ alert("Please enter at least one character into all fields."); parent.location='#first'; document.writeln("*"); } if(form.Two.value=""){ alert("Please enter at least one character into all fields."); } else{ alert("Please enter at least one character into all fields."); } } </script> </head> <body> <form name="Sortform" > <input type="text" name="One"><A NAME="first"></A><br> <input type="text" name="Two"><br><A NAME="second"></A> <input type="text" name="Three"><br><A NAME="third"></A> <input type="submit" onClick="Sort(this.form)"> </form> </body> </html> This is what I'm trying to do. CONDITIONS: If a person selects a Friday Class but not a Saturday Class the Total Cost Field will automatically enter $99. If a person selects a Saturday Class but not a Friday Class the Total Cost Field will automatically enter $99 as well. If a person selects both a Friday & Saturday Class the Total Cost field will automatically be $159. I found the following code and so far only have it changing when a Friday class is entered. I have no idea where to go from here. Please help. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Test</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div> <p><span class="style1">Friday Class:</span> <select id="fridayClass" > <option> </option> <option value="Class1"> Class 1 </option> <option value="Class2"> Class 2</option> <option value="Class3"> Class 3 </option> </select> </p> <p> <span class="style1">Saturday Class:</span> <select id="saturdayClass" > <option> </option> <option value="Class1"> Class 1 </option> <option value="Class2"> Class 2</option> <option value="Class3"> Class 3 </option> </select> </p> </div> <div><span class="style1">Total Cost:</span> <input type="text" id="totalCost"/></div> <script> window.onload = function () { var friday = document.getElementById('fridayClass'), saturday = document.getElementById('saturdayClass'); friday.onchange = function () { totalCost.value = '$99.00'; }; }; </script> |