JavaScript - Form Addition Dilemma...
So what I know about JS, you could write on a postage stamp, but I want t6o know if this is possible:
On Page A: The user fills out a form, stating how many of each time of item they want, and the clicks submit, which mails the form to me (GenericPHP Mailer), and is rederected to page B. (That I can do) On Page B: The value of the items in the form on Page A is calculated, then a link is generated with a random order number, and the value of the order as link parameters. Can I do this? and how? Similar TutorialsCode: var purchasePrice = window.prompt("Please enter the purchase price:", 0); function calculateTotalCost () { if (purchasePrice <= 25) { purchasePrice = purchasePrice + 1.50; } else { purchasePrice = purchasePrice + (purchasePrice * 0.10); } window.alert("Your total price is $ " + purchasePrice); } I am still getting the same error, concatenation instead of addition, i can't figure out why. (i.e input 50, result 505 instead of 55.) Dear Experts I have following codes, it works fine to sum. but when I enter these values 2100.49+100.20 then it says 2,200.6,899,999,999,996 insted of 2,200.69. How to overcome this problem. Please help Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Numeric Textbox Sample</title> <style type="text/css"> #box1 {width:200px;height:170px;border:1px solid green;background:#e3eeff;padding-top:20px;} .button {width:100px;margin-top:0px;} body { margin:0; margin-top:100px; } </style> <script language="javascript"> function validate(evt) { var theEvent = evt || window.event; var key = theEvent.keyCode || theEvent.which; var backslsh = key; var chck = String.fromCharCode( key ); var regex = /[0-9]|\./; if( !regex.test(chck) ) { theEvent.returnValue = false; if(theEvent.preventDefault) theEvent.preventDefault(); } } function addCommas(nStr) { nStr += ''; var x = nStr.split('.'); var x1 = x[0]; var x2 = x.length > 1 ? '.' + x[1] : '.00'; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2') } return x1 + x2; } function fncSum2() { var amount1=form2.text1.value; var amount2=form2.text2.value; var a = amount1.replace(/[^0-9\.]/g,""); var b = amount2.replace(/[^0-9\.]/g,""); var nStr = (Number(a) + Number(b)).toString(); var rgx = /(\d+)(\d{3})/; while (rgx.test(nStr)) { nStr = nStr.replace(rgx, '$1,$2'); } //nStr = "$" + nStr; // if $ prefix required if (nStr.indexOf('.') == -1) { // if whole number add .00 nStr = nStr + ".00" } nStr = nStr.replace(/(\.\d)$/,"$10"); // if only one DP add another 0 return nStr } </script> </head> <body onload="form2.text1.focus()" > <center> <p>Enter 2100.49 in Amount</p> <p>Enter 100.20 in Tax</p> <p> and press + button<br> It shows 2,200.6,899,999,999,996<br> but I need 2,200.69</p> </p> <div id="box1"> <form name=form2> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td>Amount</td> <td><input type=text name=text1 size=15 value="" onkeypress='validate(event)' onfocus="this.select ()" onblur="form2.text1.value=addCommas(form2.text1.value)" > </td></tr> <tr><td>Tax</td> <td><input type=text name=text2 size=15 value="" onkeypress='validate(event)' onblur="form2.text2.value=addCommas(form2.text2.value)"></td></tr> <tr><td>Result</td><td><input type=text name=text3 size=15 value="" disabled></td></tr> </table> <hr> <input class="button" type=button name=command1 value="+" onclick="form2.text3.value=fncSum2()"><br> <input class="button" type=button name=command8 value="Focus" onclick="form2.text1.select ()";"form2.text1.focus()"><br> <input class="button" type=reset name=command9 value="Reset"> </form> </div> </center> </body> </html> Hi, I'm just learning JS by going through a book, while trying one of the examples in the book I ran into a problem with " + " operator. It think it's best I show by example (don't worry it's a fairly short script): Script Code: /* This is an attempt to do some math with javascript */ var a; var b; var c; a = prompt("Pick your favorite number"); b = prompt("Pick your second favorite number"); c = a + b document.write("a = " + a + ", b = " + b + ", c = " + c + "<br />"); document.write("<br />a + b = " + c + "<br />"); c += 6 document.write("<br />c + 6 = " + c + "<br />"); c -= 5 document.write("<br />c - 5 = " + c + "<br />"); c *= 3 document.write("<br />c * 3 =" + c + "<br />"); c /= 2 document.write("<br />c / 2 = " + c + "<br />"); c %= 7 document.write("<br />c % 7 = " + c + "<br />"); if (c > 0) { document.write("<br /> Wrong!"); } else { document.write("<br /> You, I like") } Output Quote: a = 3, b = 4, c = 34 a + b = 34 c + 6 = 346 c - 5 = 341 c * 3 =1023 c / 2 = 511.5 c % 7 = 0.5 Wrong! As you can see the script doesn't execute the mathematical operation for addition. It instead strings it together. What am I doing wrong? hat i'm trying to achieve is to add two numbers using do while loop. below is the code however result wont show up. i cant seem to determine the error. help me pls. Quote: <script = "text/javascript"> function myanswer(x,y){ x=parseInt(x); y=parseInt(y); i=1; sum=0; do { sum=x+i; i++; } while(i<y) document.myform.asnwer.value=sum; } </script> <form name='myform'> Enter First number:<input type='text' name='x'></br> Enter Second number:<input type='text' name'y'></br> Result:<input type='text' name='answer'></br> <input type='button' value='Click on Me!' onclick="myanswer(myform.x.value,myform.y.value);"</br> </form> Ok, so I have 4 textboxes with ids payment, payment1, payment2, payment3 and with each box is a submit button, named submt1-4 I need to know how I can add all of the values into one textbox named total. so when submit1 is clicked, it will add payment to the total, then when submit2 is clicked, it will add payment1 to the value, etc. But, each text box could be used more than once, so payment could be used 8 times, and each of the 8 times, it needs to add the proper value to the total. how would I do something like this? I need help adding an additional function to some existing java script code I already have. In addition to the functions already on this js, I want make it so the banner displays one of the images randomly on each new page load. I have an external js file that this page also links too. Not sure if I need to post that also. I was hoping to just add to this code. Any help is greatly appreciated <script type="text/javascript" src="js/homepage-banners/simplegallery.js"> </script> <script type="text/javascript"> var mygallery=new simpleGallery({ wrapperid: "simplegallery1", dimensions: [250, 180], imagearray: [ ["img/headers/automotive.jpg", "http://www.visionsystem.com/applications/automotive_metal.php", "", ""], ["img/headers/electrical.jpg", "http://www.visionsystem.com/applications/electronics.php", "", ""], ["img/headers/food-packaging.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""], ["img/headers/medical-pharmaceutical.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""], ["img/headers/semiconductor.jpg", "http://www.visionsystem.com/applications/electronics.php", "", ""], ["img/headers/automation.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""] ], autoplay: [false, 2500, 2], persist: false, fadeduration: 500, oninit:function(){ }, onslide:function(curslide, i){ } }) </script> Hello. Sorry the code example might be a little long but it's repetitive and should be easy to understand. http://jsbin.com/eyeke4/13/edit My real code has 12 examples and not 3 but for the sake of this I had to shorten it as much as possible. When you go on there and preview it, you Select a level, then select a hero, then select 3 items and hit click me. This will give you a result of statistics. Now my problem is all the way on the right you will see all 3 values of AP are added together. In the last column alone. The thing about it is if you change item #1 and item #2 it does not update properly..to update it you MUST change the last item each time, which is inconvenient. The way it works is : daap1 = iap1[isi1]; daap2 = iap2[isi2]; daap3 = iap3[isi3]; totalap = (daap1 + daap2 + daap3); $(".tap").html(totalap); Pretty much like this in a nutshell. if I were to put $(".tap").html((iap1[isi1] + iap2[isi2] + iap3[isi3])); it works perfectly fine. But I need to use the variable totalap in formulas. How do I make it so things always update properly without the user having to do inconvenient things like always having to reselect the last dropdown? In my main code I have 12 total, 6 and 6 split apart, for me to currently get accurate info I must reselect the 6th and 12th item every single time. Any help on how I could achieve this would be very much appreciated, do I need a database or something? I don't mind what I need as long as it would work perfectly. Thanks in advance. Hello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ var initial = 0 var total = 0; var services = 0; function addServices() { initial = 150 total = initial services = 0; $("input:checked").each(function(){ value = $(this).attr("value"); services += parseInt(value); }); } $(function() { addServices(); total += services; $("form").before('<p class="price"></p>') $("p.price").text("Total Price: US$" + total); }); $("input:radio, input:checkbox").click(function () { addServices(); total += services $("p.price").text("Total Price: US$" + total); }); }); </script> I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post"> <table cellspacing="5" style="border: 2px solid black;"> <tr> <td valign="top"> <table cellspacing="5"> <tr> <td>*First name</td> <td align="right"><span id="valid_one"></span></td> <td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td> </tr> <tr> <td align="left">*Last name</td> <td align="right"><span id="valid_two"></span></td> <td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td> </tr> <tr> <td align="left">*Email address</td> <td align="right"><span id="result"></span></td> <td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td> </tr> <tr> <td align="left">*Phone number</td> <td align="right"><span id="valid_three"></span></td> <td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td> </tr> <tr> <td align="left">*City/Town</td> <td align="right"><span id="valid_four"></span></td> <td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td> </tr> <tr> <td></td> <td></td> <td> <select name="s"> <option value="AL">Alabama <option value="AK">Alaska <option value="AZ">Arizona <option value="AR">Arkansas <option value="CA">California <option value="CO">Colorado <option value="CT">Connecticut <option value="DE">Delaware <option value="FL">Florida <option value="GA">Georgia <option value="HI">Hawaii <option value="ID">Idaho <option value="IL">Illinois <option value="IN">Indiana <option value="IA">Iowa <option value="KS">Kansas <option value="KY">Kentucky <option value="LA">Louisiana <option value="ME">Maine <option value="MD">Maryland <option value="MA">Massachusetts <option value="MI">Michigan <option value="MN">Minnesota <option value="MS">Mississippi <option value="MO">Missouri <option value="MT">Montana <option value="NE">Nebraska <option value="NV">Nevada <option value="NH">New Hampshire <option value="NJ">New Jersey <option value="NM">New Mexico <option value="NY">New York <option value="MC">North Carolina <option value="ND">North Dakota <option value="OH">Ohio <option value="OK">Oklahoma <option value="OR">Oregon <option value="PA">Pennsylvania <option value="RI">Rhode Island <option value="SC">South Carolina <option value="SD">South Dakota <option value="TN">Tennessee <option value="TX">Texas <option value="UT">Utah <option value="VT">Vermont <option value="VA">Virginia <option value="WA">Washington <option value="WV">West Virginia <option value="WI">Wisconsin <option value="WY">Wyoming </select> </td> </tr> <tr> <td> <br> </td> </tr> <tr> <td></td> <td></td> <td><span id="error"></span></td> </tr> <tr> <td valign="top">*Anti-Spam Verification</td> <td></td> <td id="reCaptcha"></td> </tr> </table> </td> <td valign="top"> <table cellspacing="5"> <tr> <td align="left">*Affiliation</td> <td align="right"><span id="valid_five"></span></td> <td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td> </tr> <tr> <td align="left">*Research Area:</td> <td align="right"><span id="valid_six"></span></td> <td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td> </tr> <tr> <td valign="top" align="left">*Research Overview</td> <td align="right"><span id="valid_seven"></span></td> <td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td> </tr> <tr> <td></td> <td></td> <td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td> </tr> <tr> <td align="left">*Talk Availability</td> <td></td> <td> <input type="radio" name="ta" value="In person">In person <input type="radio" name="ta" value="Online">Online <input type="radio" name="ta" value="Both" checked>Both </td> </tr> <tr> <td align="left" valign="top">Links</td> <td></td> <td> <table id="linkTable" border="0"> <td><input type="text" style="width: 320px;" name="link"></td> <td><div id="result"></div></td> </table> </td> <td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td> </tr> <tr> <td></td> <td><span style="color: red;"></span></td> </tr> </table> </td> </tr> </table> <br /> <input type="submit" id="submit" name="submit" value="Submit Form"> </form> Javascript file: Code: /* * script.js - ajax and table functions */ var xmlHttp; // global instance of XMLHttpRequest var xmlHttp2; // second for captcha functions var validAjax = new Boolean(); var validCaptcha = new Boolean(); var valid_one = new Boolean(); var valid_two = new Boolean(); var valid_three = new Boolean(); var valid_four = new Boolean(); var valid_five = new Boolean(); var valid_six = new Boolean(); var valid_seven = new Boolean(); function init() { showRecaptcha('reCaptcha'); // Separate booleans for AJAX funcs validAjax = false; validCaptcha = false; // Booleanse for fields that don't require servlet validation valid_one = false; valid_two = false; valid_three = false; valid_four = false; valid_five = false; valid_six = false; valid_seven = false; } function showRecaptcha(element) { Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field}); } function validate_form() { if (valid_one && valid_two && valid_three && valid_four && validEmail) { startCaptchaRequest(); if (validCaptcha) { return true; } } else { alert("Submission contains errors. Please fill out all required fields before submitting."); return false; } } function validate_one() { if (document.getElementById("fn").value == 0) { valid_one = false; document.getElementById("valid_one").innerHTML = "No"; } else { valid_one = true; document.getElementById("valid_one").innerHTML = ""; } } function validate_two() { if (document.getElementById("ln").value == 0) { valid_two = false; document.getElementById("valid_two").innerHTML = "No"; } else { valid_two = true; document.getElementById("valid_two").innerHTML = ""; } } function validate_three() { if (document.getElementById("pn").value == 0) { valid_three = false; document.getElementById("valid_three").innerHTML = "No"; } else { valid_three = true; document.getElementById("valid_three").innerHTML = ""; } } function validate_four() { if (document.getElementById("c").value == 0) { valid_four = false; document.getElementById("valid_four").innerHTML = "No"; } else { valid_four = true; document.getElementById("valid_four").innerHTML = ""; } } function validate_five() { if (document.getElementById("affl").value == 0) { valid_five = false; document.getElementById("valid_five").innerHTML = "No"; } else { valid_five = true; document.getElementById("valid_five").innerHTML = ""; } } // //function validate_six() { // if (document.getElementById("ra").value == 0) { // valid_six = false; // document.getElementById("valid_six").innerHTML = "No"; // } // else { // valid_six = true; // document.getElementById("valid_six").innerHTML = ""; // } //} // //function validate_seven() { // if (document.getElementById("ro").value == 0) { // valid_seven = false; // document.getElementById("valid_seven").innerHTML = "No"; // } // else { // valid_seven = true; // document.getElementById("valid_seven").innerHTML = ""; // } //} function addLink(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "text"; element1.name = "link" + rowCount; element1.style.width = "320px"; cell.appendChild(element1); } function limitText(limitField, limitCount, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); } else { limitCount.value = limitNum - limitField.value.length; } } function createXmlHttpRequest() { if(window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); } } function startRequest() { createXmlHttpRequest(); var param1 = document.getElementById('mailfield').value; if (param1 == "") { validEmail = false; document.getElementById("result").innerHTML = "Blank"; } else { xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true) xmlHttp.onreadystatechange = handleStateChange; xmlHttp.send(null); } } function handleStateChange() { if(xmlHttp.readyState==4) { if(xmlHttp.status==200) { var message = xmlHttp.responseXML .getElementsByTagName("valid")[0] .childNodes[0].nodeValue; if (message == "Unregistered") { validEmail = true; document.getElementById("result").style.color = "green"; } else { validEmail = false; document.getElementById("result").style.color = "red"; } document.getElementById("result").innerHTML = message; } else { alert("Error checking e-mail address - " + xmlHttp.status + " : " + xmlHttp.statusText); } } } function createCaptchaRequest() { if(window.ActiveXObject) { xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp2=new XMLHttpRequest(); } } function startCaptchaRequest() { alert('made it to captcha requeswt'); createCaptchaRequest(); var param1 = Recaptcha.get_challenge(); var param2 = Recaptcha.get_response(); xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true) xmlHttp2.onreadystatechange = handleStateChangeCaptcha; xmlHttp2.send(null); } function handleStateChangeCaptcha() { if(xmlHttp2.readyState==4) { if(xmlHttp2.status==200) { var message = xmlHttp2.responseXML .getElementsByTagName("result")[0] .childNodes[0].nodeValue; if (message == "Valid") { alert("captcha valid"); validCaptcha = true; } else { document.getElementById("error").innerHTML = message; validCaptcha = false; } } else { alert("Error checking captcha validity - " + xmlHttp2.status + " : " + xmlHttp2.statusText); } } } Hello all, I have a multistep jquery form that validates user input and then should send me an email. Problem is, right now, I can only get it to validate the first page, then it sends the email before the rest of the pages are viewed. I'm just trying to delay the submission of the form until the "submit_fourth" button is pressed. I've got $25 via paypal for the one who sticks with this one for long enough to come up with a workable solution. Here is my code... I know it's a lot, but I wasn't sure how much would be helpful. HTML code is in the second post in this thread (it was just too much to fit in one go). Cheers! -Dave The Javascript: Code: $(function validateForm(){ //original field values var field_values = { //id : value 'name' : 'your name', 'email' : 'email', 'phone' : '(555) 123-4567', 'other' : 'other', 'detail' : 'project overview' }; //inputfocus $('input#name').inputfocus({ value: field_values['name'] }); $('input#email').inputfocus({ value: field_values['email'] }); $('input#phone').inputfocus({ value: field_values['phone'] }); $('input#other').inputfocus({ value: field_values['other'] }); $('input#detail').inputfocus({ value: field_values['detail'] }); //reset progress bar $('#progress').css('width','0'); $('#progress_text').html('0% Complete'); //first_step $('form').submit(function(){ }); $('#submit_first').click(function(){ //remove classes $('#first_step input').removeClass('error').removeClass('valid'); //ckeck if inputs aren't empty var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; var fields1 = $('#first_step input[type=text]'); var error = 0; fields1.each(function(){ var value = $(this).val(); if( value.length<5 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); } }); if(error <= 0) { //update progress bar $('#progress_text').html('25% Complete'); $('#progress').css('width','85px'); //slide steps $('#first_step').slideUp(); $('#second_step').slideDown(); } else return false; }); $('#back_second').click(function(){ //update progress bar $('#progress_text').html('0% Complete'); $('#progress').css('width','0px'); //slide steps $('#second_step').slideUp(); $('#first_step').slideDown(); }); $('#submit_second').click(function(){ //remove classes $('#second_step input').removeClass('error').removeClass('valid'); var fields2 = $('#second_step input[textarea]'); var error = 0; fields2.each(function(){ var value = $(this).val(); if( value.length<5 || value==field_values[$(this).attr('id')] ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); } }); if(error <= 0) { //update progress bar $('#progress_text').html('50% Complete'); $('#progress').css('width','170px'); //slide steps $('#second_step').slideUp(); $('#third_step').slideDown(); } else return false; }); $('#back_third').click(function(){ //update progress bar $('#progress_text').html('25% Complete'); $('#progress').css('width','85px'); //slide steps $('#third_step').slideUp(); $('#second_step').slideDown(); }); $('#submit_third').click(function(){ //update progress bar $('#progress_text').html('75% Complete'); $('#progress').css('width','255px'); //prepare the fourth step var fields3 = new Array( $('#time').val(), $('#budget').val() ); var fields2half = new Array( $('#detail').val() ); var fields2 = new Array( $('#other').val(), $('#pages').val() ); var fields1 = new Array( $('#name').val(), $('#email').val(), $('#phone').val(), $('#contact').val(), $('#url').val() ); var tr = $('#fourth_step tr'); tr.each(function(){ //alert( fields[$(this).index()] ) $(this).children('.1 td:nth-child(2)').html(fields1[$(this).index()]); $(this).children('.2 td:nth-child(2)').html(fields2[$(this).index()]); $(this).children('.2half td:nth-child(2)').html(fields2half[$(this).index()]); $(this).children('.3 td:nth-child(2)').html(fields3[$(this).index()]); }); //slide steps $('#third_step').slideUp(); $('#fourth_step').slideDown(); }); $('#back_fourth').click(function(){ //update progress bar $('#progress_text').html('50% Complete'); $('#progress').css('width','170px'); //slide steps $('#fourth_step').slideUp(); $('#third_step').slideDown(); }); $('#submit_fourth').click(function(){ //send information to server //update progress bar $('#progress_text').html('100% Complete'); $('#progress').css('width','339px'); //slide steps $('#fifth_step').slideUp(); $('#fourth_step').slideDown(); if(error <= 0) { return true } else{ return false } }); }); I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong? here is my code so far... Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok. Code: .... <script type="text/javascript"> window.onload = function() { document.forms[0].username.focus(); } function validate(form) { var form = document.getElementById("reg"); var e = document.getElementById("error"); e.style.background = "red"; for(var i = 0; i < form.elements.length; i++) { var el = form.elements[i]; if(el.type == "text" || el.type == "password") { if(el.value == "") { e.innerHTML = "Please fill in all fields!"; el.style.border = "1px solid red"; el.focus(); return false; } else { el.style.border = "1px solid green"; return false; } } } var un = form.username; un.value = un.value.replace(/^\s+|\s+$/g,""); if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value))) { e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters"; un.focus(); return false; } var pw = form.password; pw.value = pw.value.replace(/^\s+|\s+$/g,""); if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value))) { e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters"; pw.focus(); return false; } e.innerHTML = "You filled in all the fields, well done!"; e.style.background = "green"; return false; } </script> </head> <body> <div id="wrapper"> <div id="header"> <h1>My Cool Website</h1> </div> <div id="content"> <div class="padding"> <h2>Registration</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p> <form id="reg" action="#" method="post" onsubmit="return validate(this)"> <div id="error"></div> <div><label for="username">Username</label></div> <div><input type="text" name="username" id="username" size="30" maxlength="16" /></div> <div><label for="password">Password</label></div> <div><input type="password" name="password" id="password" size="30" maxlength="16" /></div> <div><label for="c_password">Confirm Password</label></div> <div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div> <div><label for="email">Email address</label></div> <div><input type="text" name="email" id="email" size="30" maxlength="200" /></div> <div><label for="c_email">Confirm Email address</label></div> <div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div> <div><label for="firstname">First name</label></div> <div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div> <div><label for="surname">Surname</label></div> <div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div> <div><label for="gender">Gender</label></div> <div> <div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div> <div><input type="radio" name="gender" value="f" />Female</div> </div> <div><input type="submit" value="Register" name="submit" /></div> </form> </div> </div> <div id="footer"> <p>Copyright © 2009 My Cool Website</p> </div> </div> </body> </html> 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> Hi guys, Been stuck for a few days with this scenario. Any help? The alert box appears on an error. But the submitting won't stop. The details are submitted and the form is processed. Any help is greatly appreciated... Code: <html> <head> <script type="text/javascript" src="email_helper/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ // General options mode : "textareas", theme : "simple" }); </script> <script language="javascript"> function MM_openBrWindow(theURL,winName,features) { window.open(theURL,winName,features); } function err_check(){ var email = document.getElementById('to_email').value; if(email.length==0){ alert('Please Enter Email Address'); return false; } var AtPos = email.indexOf("@") var StopPos = email.lastIndexOf(".") if (AtPos == -1 || StopPos == -1) { alert("Please Enter Valid Email Address"); document.getElementById('email').focus(); return false; } email = document.getElementById('cc_email').value; if(email.length != 0){ var AtPos = email.indexOf("@") var StopPos = email.lastIndexOf(".") if (AtPos == -1 || StopPos == -1) { alert("Please Enter Valid Email Address"); document.getElementById('email').focus(); return false; } } var answer = confirm ("Send E-Mail?"); if (!answer){ return false; } } </script> <!-- /TinyMCE --> <style type="text/css"> body, table, td, th{ background-color:#CCCCCC; font-family: Arial; font-size:14px; } .que{ font-weight:bold; } </style> </head> <body> <form method="post" enctype="multipart/form-data"> <?php include 'library/database.php'; include 'library/opendb.php'; $query = mysql_query("SELECT email,contact,mobile FROM users WHERE user_id='$uid'") or die(mysql_error()); $row = mysql_fetch_row($query); $from_email = $row[0]; $from_person = $row[1]; $from_mobile = $row[2]; $query = mysql_query("SELECT customer_id FROM campaign_summary WHERE camp_id='$camp_id'") or die(mysql_error()); $row = mysql_fetch_row($query); $cusid = $row[0]; $query = mysql_query("SELECT email FROM client_info WHERE comp_id='$cusid'") or die(mysql_error()); $row = mysql_fetch_row($query); $toer = $row[0]; include 'library/closedb.php'; ?> <table width="100%" border="0"> <tr><td rowspan="4"><input type="submit" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" /><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr> <tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" value="<?php echo $toer;?>"/></td></tr> <tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr> <tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr> <tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" checked /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td> </tr> <tr> <td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td> <td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr> <tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td> <td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr> <tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr> <tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3"> <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%"> <?php echo "<br><br><br>" . $from_person . "<br>" . $from_mobile; ?> </textarea> </td></tr> </table> </form> </body> </html> I have a order form page and on submitting it opens a new web page that displays the order totals. Below is my code and most probably wrong but for me it seems logic. Please assist. Order Form: Code: <td colspan="1" height="120" align="left"> <select style="margin-left: 60px; background-color: #00FF77;" name="prod_bed_359" onchange="calculateValue(this.form)"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> R359</td></tr> New page I called a unction to print: Code: function itemsOrdered() { var beds = document.forms[2].prod_bed_359.value; document.write("<pre><strong>Description\t\tQuantity\tPrice</strong></pre>"); document.write("<pre>Doggie Bed\t\t" + beds + "</pre>"); } This is still basic as I need to get this right before adding the prices and totals which is also extracted from the order page. So I have a little calendar widget on my site, for people to choose their dates for a reservation system. They then click a 'Book Now' button which creates a dynamic url (using their start date and the number of dates) to the booking engine. The problem is, the way it accomplishes this (window.location.href=), breaks cross-domain tracking on Google Analytics. And I'm not smart enough to figure out how to do it any other way. What I'd like to do is have clicking the Book Now button change the URL in the form action within the form with ID resForm, and then submit the form. I'm hoping someone can help me edit the form so that it accomplishes this. I'd be incredibly thankful. This is what I currently have: Code: <script> jQuery(document).ready(function($) { $(".book-now").click(function() { if($('#check-in').length > 0 && $('#DepartureDate').val() != '') { var data = $('#check-in').val(); var arr = data.split('/'); var datac = $('#DepartureDate').val(); var arr2 = datac.split('/'); var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds var firstDate = new Date(arr[2],arr[0] -1,arr[1]); var secondDate = new Date(arr2[2],arr2[0] -1,arr2[1]); var diffDays = Math.round((firstDate.getTime() - secondDate.getTime())/(oneDay)); if ((diffDays) < 0) { diffDays = Math.abs(diffDays); var link = "https://res.windsurfercrs.com/bbe/page1.aspx?propertyID=13841&checkin=" + arr[0] + "/" + arr[1] + "/" + arr[2] + "&nights=" + diffDays; console.log(link); window.location.href= link; } else { alert ('Please fill in correct Check-In and Check-Out dates. The Check-In date must be before the Check-Out date.'); } } else { alert ('Please fill in a Check-In and Check-Out date, thanks!'); } }); }); </script> The form looks like this: Code: <form action="#" onSubmit="_gaq.push(['_linkByPost',this]);" method="post" id="resForm"> <input type='text' name="checkin" id="check-in" readonly="readonly" style="cursor: text" data-default="MM/DD/YYYY" class='arrivaldate'/> <input name="checkout" id="DepartureDate" readonly="readonly" style="cursor: text" data-default="MM/DD/YYYY" class='departuredate'/> <input type="button" value="BOOK NOW" class='book-now' /> </form> Reply With Quote 01-25-2015, 12:46 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts Just call the _gaq() function manually. Code: _gaq.push(['_linkByPost',document.getElementBy("resForm")]) window.location.href= link; I'm a long time lurker on here just barely created an account to ask this question. I work at a call center, and we use different webapps to fill out tickets. One I've used for a long time allows dynamically updating forms with javascript. I have a whole bunch of bookmarked javascript injections like: Code: javascript:if((top.detail.findObj('X31').value="Inquiry")!=""); That code will fill out most everything in that ticket, leaving me to fill in the details. I have one of those for all of the most common tickets, and can create and finish a ticket in less than 30 seconds when it takes others 3-4 minutes. I recently switched to a different system and I'm having trouble with my code. I'm a noob at javascript for sure, but I'm not new to programming. Anyway any pointers would be nice. The system we use doesn't allow me to see the source... I'm not sure how to explain it. It loads everything in a frame. In chrome I can right click then inspect element and get the ID but it the above javascript doesn't work. Examples: Old app source ex: Code: <label for="X31">Category:</label> was all i needed new app(before the body code is just code for the login form, etc): Code: <body onLoad="startit()" onUnload="stopit()"> </body> <div align="center" valign="center" id="LoadMessageID" style="position: relative; top:40%; color:#0069A5; font-size:100% ;"> <img src="/arsys/shared/images/Progress_NonModal-circle.gif" alt="wait image"/> Loading... </div> </html> formloader: Code: <form name="form1" action="/arsys/forms/bmcitsm/HPD:Incident+Management+Console/Default+User+View+(Support)/?cacheid=a22a36a8" method="post"> example of inspect element in chrome (something i want to change with javascript injection): Code: <input id="arid301602600" type="text" class="text " style="top:0; left:0; width:225; height:21;" readonly=""> I have been hard at work coding a fancy JQuery form validation script. Problem is, when I run validation on my form, it seems to work, but no email is sent. But when I disable validation, the email sends just fine. I am fairly new to JavaScript, and need some help pinpointing where my error is. Here is the code. Code: // BEGIN JAVASCRIPT $(function(){ //original field values var field_values = { //id : value 'name' : 'your name', 'email' : 'your email', 'yourmessage' : 'I would like to inquire about' }; //inputfocus $('input#name').inputfocus({ value: field_values['name'] }); $('input#email').inputfocus({ value: field_values['email'] }); $('textarea#yourmessage').inputfocus({ value: field_values['yourmessage'] }); //form validation $('form').submit(function validateForm(){ return false }); // removing this return false seems to mess up validation $('#submit').click(function(){ //remove classes $('#sendamessage input').removeClass('error').removeClass('valid'); //ckeck if inputs aren't empty var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; var fields1 = $('#sendamessage input[type=text],#sendamessage textarea'); var error = 0; fields1.each(function(){ var value = $(this).val(); if( value.length<2 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) { $(this).addClass('error'); // css class $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); // css class } }); if(!error) { // this is where I get confused. How do I make this send the form? alert('Data sent'); }); } }); }); // END JAVASCRIPT <form method="post" action="" onsubmit="return validateForm()" > <input type="hidden" name="ccf_customhtml" value="1" /> <input type="hidden" name="success_message" value="Thank you for filling out our form!" /> <input type="hidden" name="destination_email" value="dauidus@gmail.com" /> <input type="hidden" name="required_fields" value="" /> <label for="name">Name</label> <input type="text" name="name" id="name" value="your name" /> <label for="email">Email</label> <input type="text" name="email" id="email" value="your email" /> <label for="yourmessage">Your Message</label> <textarea name="yourmessage" id="yourmessage" value="I would like to inquire about" style="margin-bottom:20px;" />I would like to inquire about</textarea> <input class="send submit" id="submit" type="submit" value="" style="position: relative; bottom: -70px; left: 25px; " /> </form> I am using a WordPress plugin to automatically send the contents of the form to email. It works without the javascript enabled. But when I turn on JS the form gets validated, but no email is sent. Please let me know if I should include anything else here... I've been looking at this code so much that I'm having a hard time doing it with fresh eyes. The problem page is on http://new.dauidusdesign.com/contact/. FYI, I am also looking to make this work with the 'request a quote' link on the same page. Cheers! -Dave I'm using the jquery plugin found here. I love the look but I have a form that uses functions like this: Code: function cascadeCountry(value) { if (document.getElementById("srchlookstate_province") != null) { http.open('get', 'cascade_search.php?a=country&v=' + value ); document.getElementById('srchlookstate_province').innerHTML=" "+loadingTag; http.onreadystatechange = handleResponse; http.send(null); } } So, when you select a country and it retrieves the state/province text input, the jquery css is not applied to it. Is there something I need to add to the code above or to the jquery initialization code he Code: $(function() { $("form.jqtransform").jqTransform(); }); Hello, I have 2 things I'm trying to figure out. 1. First form on the page has questions with radio buttons. Each radio's value is a number so a score is assessed at the end. 2. Second form on the page is an email the admin form, which duplicates the score in one field. Question: I would like to know how to write the form results to a text area in second form. However, I can't do this for one, and secondly, the value is a number, can I use labels? Here's the code I've 'made up' so far... JS (i know it's wrong) Code: <script LANGUAGE="JavaScript" type="text/javascript"> function display() { message = "<ul><li><b>Question 1: </b>" + document.quizform.Q1.label; message = "<li><b>Question 2: </b>" + document.quizform.Q2.label; message = "<li><b>Question 3: </b>" + document.quizform.Q3.label; message = "<li><b>Question 4: </b>" + document.quizform.Q4.label; message = "<li><b>Question 5: </b>" + document.quizform.Q5.label; message = "<li><b>Question 6: </b>" + document.quizform.Q6.label + "</ul>"; document.write(message); } </script> Form field example: Code: Question 1:<BR> <label for="Yes"><input type="radio" name="Q1" value="0" checked></label>Yes<br> <label for="No"><input type="radio" name="Q1" value="10"></label>No<br> <label for="I don't know"><input type="radio" name="Q1" value="10"></label>I don't know<br> |