JavaScript - Action A Javascript Onsubmit
hi, I would like to pop up an edit window when I submit my form, my code below doesn't seem to work?! think my syntax is wrong soemwhere?!
Code: function popUpBig(URL) { day = new Date(); id = day.getTime(); eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=360,left = 220,top = 250');"); } <form method="post" name="times"><input type="hidden" name="day" value="Monday" /><a type="submit" class="button" onSubmit="javascript:popUpBig('edit_day.php')" ><span>Edit</span></a></form> Similar TutorialsSo I have two buttons, and for one, it is simply "submit", no on submit needs to be used for it. The other one is "delete" and I wanna have a confirm box open when you click delete saying something like "are you sure you want to delete?" and clicking yes would delete it and no would not. Here is the javascript I have so far for it. Code: <script type="text/javascript"> function OnButton1() { document.simpForm.action = "<?php php stuff here ?>"; document.simpForm.target = "_self"; document.simpForm.submit(); // Submit update return true; } function OnButton2() { document.simpForm.action = "delete.php?id=<?php php stuff here ?>"; document.simpForm.target = "_self"; document.simpForm.submit(); // Delete the company return true; } </script> Any help would be GREAT! Javascript is not my strong point If my php variable, (which is retrieved from a mysql table in the php code, not shown) is equal to "1", that means the member is not eligible to submit the form, so I want an alert() to say "member not eligible!". Else, I want it to continue to submit the form. Here is my code (which I can't seem to get to work): <head> <script src="js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function ismaxlength(obj){ var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : "" if (obj.getAttribute && obj.value.length>mlength) obj.value=obj.value.substring(0,mlength) } //this first script is for something else, to check the max length of characters in a text area </script> //here is the script in question <script type="text/javascript"> <!-- var mem_eligible = "<?= $is_mem_eligible ?>"; if (mem_eligible == "1") { function MoveOn() { alert('You are not yet eligible, please try again tomorrow!'); } } --> </script> </head> <form name="myform" action="postform.php" method="post" enctype="multipart/form-data"> <div> <input type="submit" name="Submit2" value="Submit Entries" onclick="MoveOn()"/> </div> </form> Please help, thanks! June I am trying to create a sample form using javascript. The form has a series of option and a submit button followed by a textarea. When the user clicks the submit button the textarea should be filled with the selected information from the form. I cannot get the textarea to fill with text. I believe the problem lies in the fact that when I submit the form the page refreshes, but I am not sure if that's the case. With this version of the code I actually can't get passed the Room Type. It always says No Room Type selected. Here is my code: 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Form Sample</title> <link href="default.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript"> <!-- function checkForm(myForm) { regexp = /^\d\d\/\d\d\/\d{4}$/; numReg = /^\d*$/; str = ""; for (i = 0; i < 5; i++) { if (!myForm.roomType[i].checked) { alert("No Room Type Selected!\nPlease Select Room Type!"); return; } str += "Room Type: "; str += myForm.roomType[i].value + "\n" } str += "Activities: \n"; for (i = 0; i < 4; i++) { if (!myForm.activity[i].checked) { alert("No Activities Selected!\n Please Select Activities!"); return; } str += "\t" + myForm.activity[i].value + "\n"; } if (myForm.hotels.selectedIndex+1 < 1) { alert("No Hotel Selected!\n Please Select a Hotel!"); return; } else { str += "Hotel: "; for (var i = 0; i < myForm.hotels.length; i++) { if (myForm.hotels[i].selected) { str += myForm.hotels[i].value + "\n"; } } } if ( myForm.confname.value == "" || myForm.confname.value == null) { alert("No Conference Name Entered! Please Enter a Conference Name!"); return; } else { str += "Conference Name: " + myForm.confname.value + "\n"; } if (!regexp.test(myForm.date.value)) { alert("Invalid Date"); return; } else { str += "Date: " + myForm.date.value + "\n"; } if (!numReg.test(myForm.zip.value)) { alert("Invalid Zip Code"); return; } else { str += "Zip Code: " + myForm.zip,value + "\n"; } myForm.info.value = str; } </script> </head> <body> <h1>Host your Conference!</h1> <form name="conference" method="post" onsubmit="checkForm(this); return false;" action="#"> <div style="font-size:20px; font-weight:bold; color:#FF0000;"> Select Room Type Type:<br /> </div> <div style="color:#FFCC00; font-weight:bold;"> <input type="radio" name="roomType" value="Large Meeting Room" />Large Meeting Room<br /> <input type="radio" name="roomType" value="Small Meeting Room" />Small Meeting Room<br /> <input type="radio" name="roomType" value="Video Conference Room" />Video Conference Room<br /> <input type="radio" name="roomType" value="Theater Lecture Hall" />Theatre Lecture Hall<br /> <input type="radio" name="roomType" value="Convention Center" />Convention Center<br /> </div> <br /> <div style="font-size:20px; font-weight:bold; color:#FF0000;"> Select Activities:<br /> </div> <div style="color:#FFCC00; font-weight:bold;"> <input type="checkbox" name="activity" value="Swimming" />Swimming<br /> <input type="checkbox" name="activity" value="lecture" />Lecture<br /> <input type="checkbox" name="activity" value="Golf" />Golf (Gentlemen Only Ladies Forbidden)<br /> <input type="checkbox" name="activity" value="Tour of the Facilities" />Tour of the Facilities<br /> </div> <br /> <div style="font-size:20px; font-weight:bold; color:#FF0000;"> Select Hotel:<br /> </div> <div style="color:#FFCC00; font-weight:bold;"> <select name="hotels" size="4"> <option name="marriott" value="Marriot">Marriott</option> <option name="doubleTree" value="Double Tree">Double Tree</option> <option name="comfortSuites" value="Comfort Suites">Comfort Suites</option> <option name="sheraton" value="Sheraton">Sheraton</option> </select> </div> <br /> <div style="font-size:20px; font-weight:bold; color:#FF0000;"> Confence Name: <input type="text" name="confname" size="60" /> </div> <br /> <div style="font-size:20px; font-weight:bold; color:#FF0000;"> Zip Code: <input type="text" name="zip" size="12" value="Enter Zip Code"/> </div> <br /> <div style="font-size:20px; font-weight:bold; color:#FF0000;"> Date: <input type="text" name="date" size="10" value="mm/dd/yyyy" /> </div> <br /> <div> <input name="confSubmit" type="submit" style="background:#CCCCCC !important; color:#333333 !important;" value="It's Conference Time!" /> <input name="confReset" type="reset" style="background:#CCCCCC !important; color:#333333 !important;" value="Reset Form" onclick="javascript:return checkForm(this.form);" /> </div> <br /> <div style="font-size:20px; font-weight:bold; color:#FF0000;"> Print This: <textarea type="text" name="info" size="1200" style="vertical-align:text-top; height:175px; width:325px;"> </textarea> </div> </form> </body> </html> And here is a link to the page: Form Sample Hi all, Please keep in mind: this is the first code I have ever written -- much of it with help from this forum and the skeleton from other corners of the JS community. Thanks! But now for the problem... I'm developing am income tax calculator, and everything is going swell. Currently the user can type in their adjusted gross income (AGI), hit submit, and learn the amount of income tax they would pay, their tax rate, and their income after tax. I've played around with the events to get the submit button to work in FF, IE, Chrome and Safari -- and I've gotten the enter button to work before with some stock code, but here's the catch: when the user presses enter, i want the focus to leave the input box. I don't care where it goes (submit button, I suppose?) but i need it to leave the input field so the onfocus="clearText(this);" event can fire when they return to type in a new income. Any ideas? Thanks in advance. Code: <script language="javascript" type="text/javascript"> function TotalGrossPerYear() { var Calc = document.NetIncome; if (Calc.InputRad[0].checked) { if ((Calc.AGI.value > 500000)) { Bracket3(); } if ((Calc.AGI.value > 200000 ) && (Calc.AGI.value <= 500000)) { Bracket1(); } if ((Calc.AGI.value <= 200000)) { Bracket2(); } } else if (Calc.InputRad[1].checked) { if ((Calc.AGI.value > 1000000)) { Bracket3(); } if ((Calc.AGI.value > 400000 ) && (Calc.AGI.value <= 1000000)) { Bracket1(); } if ((Calc.AGI.value <= 400000)) { Bracket2(); } } } function Bracket1() { var Calc = document.NetIncome; if (Calc.InputRad[0].checked) { Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 200000) ; Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ; Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ; Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %"; } else { if (Calc.InputRad[1].checked) { Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 400000) ; Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * .05)) ; Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ; Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %"; } } } function Bracket2() { var Calc = document.NetIncome; if (Calc.InputRad[0].checked) { Calc.TaxableIncome.value = 0 ; Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ; Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ; Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %"; } else { if (Calc.InputRad[1].checked) { Calc.TaxableIncome.value = 0 ; Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ; Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ; Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %"; } } } function Bracket3() { var Calc = document.NetIncome; if (Calc.InputRad[0].checked) { Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 200000) ; Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) - 300000) * 0.09) + (300000 * 0.05) ; Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ; Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %"; } else { if (Calc.InputRad[1].checked) { Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 400000) ; Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) - 600000) * .09) + (600000 * 0.05) ; Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ; Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %"; } } } function Couple() { var Calc = document.NetIncome; Calc.AGI.value = ""; Calc.TaxableIncome.value = "--------"; Calc.AmtDue.value = "--------"; Calc.AmtLeft.value = "--------"; Calc.TaxRate.value = "--------"; } function Individual() { var Calc = document.NetIncome; Calc.AGI.value = ""; Calc.TaxableIncome.value = "--------"; Calc.AmtDue.value = "--------"; Calc.AmtLeft.value = "--------"; Calc.TaxRate.value = "--------"; } function clearText(thefield){ if (thefield.value==thefield.value) thefield.value = "" } </script> </head> and the html... Code: <body> <form name=NetIncome> <table border=5> <th align=left> <ol> <li>Select Individual or Joint filing status. <li>Enter your Adjusted Gross Income. <li>Submit to calculate. <li>Please reset after each calculation. </ol> </th> <tr> <td><font size=5><input type=radio name=InputRad value=PerHour onclick="Individual()"><u>Individual</u> <input type=radio name=InputRad value=PerYear onclick="Couple()"><u>Joint</u></font></td> </tr> <tr><td><input type=text name=AGI size=30 id="txtExamplethree" onfocus="clearText(this);" onsubmit="TotalGrossPerYear();" onblur="this.value=this.value.replace(/[^\d\.]/g, '');" value="Select filing status" maxlength="20" />Adjusted Gross Income </td></tr> <tr><td><input type=text name=TaxableIncome id="txtExampletwo" readonly="readonly" size=30 value="">Taxable Income</td></tr> <tr><td><input type=text name=AmtDue id="txtExampleone" size=30 readonly="readonly" value="">Amount Due in Taxes</font></td></tr> <tr><td><input type=text name=AmtLeft id="txtExample" size=30 readoanly="readonly" value="">Income after Tax</font></td></tr> <tr><td><input type=text name=TaxRate size=10 readonly="readonly">Tax Rate</td></tr> <tr><td align=center><input type="button" value="Submit" onfocus="TotalGrossPerYear(); formatNumber(); formatNumberone(); formatNumbertwo(); formatNumberthree();" /><input type=reset value="Reset Form"></td></tr> </table> </form> Hello, I'm trying to achieve what seems pretty simple, I have achieved both aspects successfully by themselves but together I have not I am trying to submit a form data via post, then I'm also trying to redirect I have got the window.location working I have the database writing working however I can't seem to get them to work sequentially I think the reason is that the post action redirects to itself, then the initial setinterval request is gone I try to do the sequential action this way Code: <a href=# onclick="document.forms['frm'].submit();redirect();">Submit</a> So, either the data posts and I'm stuck at the same page, or it redirects and the data doesn't post What am I missing? I read that to have multiple functions by one click, you separate them with a semi-colon as I have done I think as I mentioned that the key is the post to PHP_SELF which "nullifies" the redirect request eg. it never existed So what do I do? Also I'm not after the time interval, I was just trying to find a way for a user to be notified "Hey you're going to be redirected" by an alert (which I had this pop up working as well) then when they press okay, they are redirected. Ideally the user enters data, data is stored, pop-up, hit okay, redirect Thanks for any help Hello everyone, I have a webpage with three different search options. Each option has a radio button clicking on which enables the text fields and buttons in that option with the help of java script. The first options allows to search by PIN. Second one by SSN, DOB and DOBRange, And 3rd one by various combinations of the name. The javascript I use to do this is given below: Code: function chMd() { // initialize form with empty field document.forms[0].PIN.disabled=false; document.forms[0].PIN.value=""; document.forms[0].SSNfirst.disabled=false; document.forms[0].DOBRange1.disabled=false; document.forms[0].DOBRange1.value=""; document.forms[0].DOBRange2.disabled=false; document.forms[0].DOBRange2.value=""; document.forms[0].LastName.disabled=false; document.forms[0].LastName.value=""; document.forms[0].FirstName.disabled=false; document.forms[0].FirstName.value=""; document.forms[0].MiddleName.disabled=false; document.forms[0].MiddleName.value=""; document.forms[0].Last4.disabled=false; document.forms[0].Last4.value=""; document.forms[0].First4.disabled=false; document.forms[0].First4.value=""; document.forms[0].DOB1.disabled=false; document.forms[0].DOB2.disabled=false; document.forms[0].Option1.disabled=false; document.forms[0].Option2.disabled=false; document.forms[0].Option3.disabled=false; for(var i=0;i<document.forms[0].elements.length;i++) { if(document.forms[0].elements[i].name=="dOption") { if(document.forms[0].elements[i].value=="N") { if(document.forms[0].elements[i].checked==true){ document.forms[0].PIN.disabled=false; document.forms[0].SSNfirst.disabled=true; document.forms[0].DOB1.disabled=true; document.forms[0].DOBRange1.disabled=true; document.forms[0].DOB2.disabled=true; document.forms[0].DOBRange2.disabled=true; document.forms[0].LastName.disabled=true; document.forms[0].FirstName.disabled=true; document.forms[0].MiddleName.disabled=true; document.forms[0].Last4.disabled=true; document.forms[0].First4.disabled=true; document.forms[0].Option1.disabled=false; document.forms[0].Option2.disabled=true; document.forms[0].Option3.disabled=true; } } else if(document.forms[0].elements[i].value=="T") { if(document.forms[0].elements[i].checked==true){ document.forms[0].PIN.disabled=true; document.forms[0].SSNfirst.disabled=false; document.forms[0].Last4.disabled=false; document.forms[0].DOB1.disabled=false; document.forms[0].DOBRange1.disabled=false; document.forms[0].DOB2.disabled=true; document.forms[0].DOBRange2.disabled=true; document.forms[0].LastName.disabled=true; document.forms[0].FirstName.disabled=true; document.forms[0].MiddleName.disabled=true; document.forms[0].First4.disabled=true; document.forms[0].Option1.disabled=true; document.forms[0].Option2.disabled=false; document.forms[0].Option3.disabled=true; } } else if(document.forms[0].elements[i].value=="R") { if(document.forms[0].elements[i].checked==true){ document.forms[0].PIN.disabled=true; document.forms[0].SSNfirst.disabled=true; document.forms[0].Last4.disabled=true; document.forms[0].DOB1.disabled=true; document.forms[0].DOBRange1.disabled=true; document.forms[0].DOB2.disabled=false; document.forms[0].DOBRange2.disabled=false; document.forms[0].LastName.disabled=false; document.forms[0].FirstName.disabled=false; document.forms[0].MiddleName.disabled=false; document.forms[0].First4.disabled=false; document.forms[0].Option1.disabled=true; document.forms[0].Option2.disabled=true; document.forms[0].Option3.disabled=false; } } } } } This works fine but the problem is we have 3 submit buttons with differnt actions using the normal <s:submit> works fine but when I use <s:submit action="Search1"> the javascript does not render. Here is an example of my jsp code: Code: <s:form id="Search" name="units" action="Search1"> .... ... <Table> <tr><td> <input name="dOption" value="T" onClick="chMd()" type="radio"> Option 2 <br /></td></tr> <tr> <td> <s:textfield name="crssn" label="SSN:" size="9" maxlength="9" disabled="true" value="xxxxxxxxx" onclick="clearText(this);"onblur="clearText(this);" required="true"/></td> <td><br><s:checkbox name="last4" label="Last 4" labelposition="bottom" disabled="true"/></td></tr> <tr><td><s:textfield label="DOB:" name="crdob1" size="10" maxlength="10" disabled="true" value="mm/dd/yyyy" onclick="clearText(this);"onblur="clearText(this);" /></td> <td><s:textfield name="crrange1" label="+/- months" size="1" disabled="true" /></td><td> </td><td> </td> <td> <s:submit action="Search2" name="Option2" value="Search"/></td></tr> </Table> Similarly for the other options. This does not seem to work. However if I use the same code without specifying an action it works. e.g. Code: <Table> <tr><td> <input name="dOption" value="T" onClick="chMd()" type="radio"> Option 2 <br /></td></tr> <tr> <td> <s:textfield name="crssn" label="SSN:" size="9" maxlength="9" disabled="true" value="xxxxxxxxx" onclick="clearText(this);"onblur="clearText(this);" required="true"/></td> <td><br><s:checkbox name="last4" label="Last 4" labelposition="bottom" disabled="true"/></td></tr> <tr><td><s:textfield label="DOB:" name="crdob1" size="10" maxlength="10" disabled="true" value="mm/dd/yyyy" onclick="clearText(this);"onblur="clearText(this);" /></td> <td><s:textfield name="crrange1" label="+/- months" size="1" disabled="true" /></td><td> </td><td> </td> <td> <s:submit name="Option2" value="Search"/></td></tr> </Table> Code: <Table> <tr><td> <input name="dOption" value="T" onClick="chMd()" type="radio"> Option 2 <br /></td></tr> <tr> <td> <s:textfield name="crssn" label="SSN:" size="9" maxlength="9" disabled="true" value="xxxxxxxxx" onclick="clearText(this);"onblur="clearText(this);" required="true"/></td> <td><br><s:checkbox name="last4" label="Last 4" labelposition="bottom" disabled="true"/></td></tr> <tr><td><s:textfield label="DOB:" name="crdob1" size="10" maxlength="10" disabled="true" value="mm/dd/yyyy" onclick="clearText(this);"onblur="clearText(this);" /></td> <td><s:textfield name="crrange1" label="+/- months" size="1" disabled="true" /></td><td> </td><td> </td> <td> <s:submit action="Search2" name="Option2" value="Search"/></td></tr> </Table> Any idea what I need to change in my javascript or jsp to get this to work? Hey all - I've searched high and low for this through Google, and tried piecing together some solutions, but 1) I'm way too incompetent from a Javascript perspective to take two ideas and make them work and 2) I've spent close to 2 hours and dont have a solution. SOOOO I thought I'd ask the geniuses here for some ideas: I have a page with an iFrame called portalCalcFrame that I'm trying to submit data to to do some calculations and preview in the iFrame before actually submitting the page to the next...well...page (both the "Recalculate" button to send to iFrame and the "Next Step" button to submit it further into the process are on the main frame). So I've got two problems. A) I need to submit a form to a different target, aka portalCalcFrame B) I need to submit the form to a different "action" page than my form actually submits to. (The form submits to a page called step2.php, whereas the iFrame needs to load page calcframe.php and have the form submit to that) I don't really know where to start, Javascript is far from my forte. I've taken it a couple of different ways. Any ideas guys? I love you long time. Thanks in advance! JE Hi all, I was wondering if i could have some help - i am not very technical! I would like to add 2 things to an onSubmit that is on a form. However, I have been reading various things as to whether or not this is possible. The button on the form looks like it runs some sort of validation as it starts with onsubmit="validateFormData...... I am trying to set up a goal in analytics and need to add a pageview tracker to the onSubmit as well. Is this possible? Please help me Hi I have the search functionality with the dropdown values. The UI looks like Have 8 dropdown values and one test box. When i enter the name in the test box choose the dropdown value . based on that name it should go to that related page. but it always going to the same page (ozPrjFileQuickFind.jsp ) which is File. This is the code i am using for. Code: buf.append( "<div id=\"sidebar_quicksearch\" style=\"display: "+showHide+";\"> " ); buf.append( "<table width=100% cellspacing=0 cellpadding=0 border=0 align=center>" ); buf.append( "<tr><td colspan=2 class=normalSmall align=left>"+_p.get("search_bykeyword")+"</td></tr>" ); buf.append( "<tr><td colspan=2 class=verySmall align=left>" ); buf.append( " <form name=QF id=QF action=\"ozPrjFileQuickFind.jsp\" method=post onSubmit=\"Javascript:document.QF.action=document.QF.searchDest.options[document.QF.searchDest.selectedIndex].value;\">" ); buf.append( " <select name=searchDest class=textInputSmall>" ); buf.append( " <option value=\"ozPrjFileQuickFind.jsp\" "+(cat.startsWith("FILE")?"selected":"")+">"+File ); buf.append( " <option value=\"ozPrjBugQuickFind.jsp\" "+(cat.startsWith("BUG")?"selected":"")+">"+Bug ); buf.append( " <option value=\"ozCalApptQuickFind.jsp\" "+(cat.startsWith("APPT")?"selected":"")+">"+Appointment ); buf.append( " <option value=\"ozCalTaskQuickFind.jsp\" "+(cat.startsWith("TASK")?"selected":"")+">"+Task ); buf.append( " <option value=\"ozBbsNoteQuickFind.jsp\" "+(cat.startsWith("NOTE")?"selected":"")+">"+Note); buf.append( " <option value=\"ozInvPrdQuickFind.jsp\" "+(cat.startsWith("PRODUCT")?"selected":"")+">"+Product ); buf.append( " <option value=\"ozCmnSearchAsset.jsp\" "+( cat.startsWith("ASSET")?"selected":"" )+">"+Asset); buf.append( " </select><BR>" ); buf.append( " <input class=textInputSmall type=text name=quickFindText value=\"\"></td></tr>" ); buf.append( "<tr><td class=verySmall align=left><input class=\"smallButton\" type=submit name=go value=\""+_p.get("search")+"\">" ); buf.append( "</td><td></form></td></tr>" ); buf.append( "<tr><td colspan=2 height=10><img src=\"graphics/z0.gif\" height=10></td></tr>" ); buf.append( "</table>" ); buf.append( "</div>" ); In the above code File,Bug,Appointment,Task, Note,Product and Asset are the dropdown values. Suppose I enter the test in the test box and choose "Bug" dropdown value it should go to "ozPrjBugQuickFind.jsp" page which is Bug related page. but it always going to the "ozPrjFileQuickFind.jsp" page. Please respond on this one. Thanks in advance... i have the following code being called from onsubmit event of form and it is not working in firefox. when debugging it will return at the line of code "row = parcelTable.rows(4);" Any ideas? Code: parcelTable = document.getElementById("parcelTable"); if(x=="parcel" && (ptaxd.value == "" || ppid.value == "" || puid.value == "" )){ rowCount = parcelTable.rows.length; row = parcelTable.rows(4); if(rowCount ==5){ }else{ row = parcelTable.insertRow(4); } cellCount = row.cells.length; errorCell = row.insertCell(cellCount); if(cellCount==0) errorCell = row.insertCell(cellCount+1); errorCell.innerHTML = "Must enter all three fields."; errorCell.setAttribute("id","error"); errorCell.style.color = "red"; isItGarbage = false; parcelError = true; } <form id="parcelForm" name="by_parcel" action="BasicShell" method="get" onsubmit="return validate('parcel');"> Now I have a page with Text boxes, and dropdown boxes on the page and 3 buttons. While this is mainly PHP the aspect that I need at the moment is in Javascript. On click the 1st submit button, "Preview", it shows a table and another button. But the form below is cleared as it refreshed the page. I want to know if it is possible that I can set the fields to the values that the user set before they clicked the button to show the table since it clears them. I've thought of 2 ways to do it but I have no idea how to do either of them. 1: The reset button resets all the variables to the page load default which is blank or 0 according to which field. Because I know a way to do it but then my reset button doesn't clear anything... 2: Onclick of the Preview button, the values are set but not the same way as the PHP one since that sets them until you do a hard reload of the page. I am trying to create a form that writes text to an HTML canvas when submitted. Eventually, the function that writes the text will be more complex. The problem is the text only appears briefly, because the function is only called once when the form is submitted. I want the function to be called continuously after the form is submitted. How do I do this? I have had very little experience with JS. A lame (failed) attempt... Code: <html> <head> </head> <body> <canvas id="canvas" width="790" height="605"> Sorry, your browser doesn't support HTML5 </canvas> <form name="frm1" action=" " onsubmit="greeting()"> <input type="text" name="fname" /> </form> </body> <script type="text/javascript"> function init() { //use canvas "canvas" and assign to variable canvas canvas=document.getElementById("canvas"); c=canvas.getContext("2d"); } function greeting() { c.fillText("var!!!", 100, 460); var test = 1; } if (test == 1) { greeting(); } init(); </script> </html> Thanks I want have an alert pop up if the email is invalid and have the form not post. I have tried countless ways but cannot figure it out. No matter what I do, it always posts. Thanks in advance for the help. Code: <html> <head> <script language = "Javascript"> function echeck(str) { var at = "@" var dot = "." var lat = str.indexOf(at) var lstr = str.length var ldot = str.indexOf(dot) if(str.indexOf(at) == -1) { alert("Invalid E-mail ID") return false } if(str.indexOf(at) == -1 || str.indexOf(at) == 0 || str.indexOf(at) == lstr) { alert("Invalid E-mail ID") return false } if(str.indexOf(dot) == -1 || str.indexOf(dot) == 0 || str.indexOf(dot) == lstr) { alert("Invalid E-mail ID") return false } if(str.indexOf(at, (lat + 1)) != -1) { alert("Invalid E-mail ID") return false } if(str.substring(lat - 1, lat) == dot || str.substring(lat + 1, lat + 2) == dot) { alert("Invalid E-mail ID") return false } if(str.indexOf(dot, (lat + 2)) == -1) { alert("Invalid E-mail ID") return false } if(str.indexOf(" ") != -1) { alert("Invalid E-mail ID") return false } return true } function ValidateForm() { Var emailID = document.frmSample.txtEmail if((emailID.value == null) || (emailID.value == "")) { alert("Please Enter your Email ID") emailID.focus() return false } if(echeck(emailID.value) == false) { emailID.value = "" emailID.focus() return false } return true } </script> <form name = "frmSample" action = "https://www.pipelinedeals.com/web_lead" onsubmit = "return validateForm();" method = "post"> <input type = "hidden" name = "w2lid" value = "removed for privacy" /> <input type = "hidden" name = "thank_you_page" value = "http://www.fatsfixedassettracking.com/thanks.html"/> <p>Enter email address: <input type = "text" name = "txtEmail"> </p> <p><input type = "submit" name = "Submit" value = "Submit"></p> </form> </head> </html> How exactly would you validate a form with JavaScript if instead of using the regular input type="submit" to allow submission you used input type="image"?
Hello all, I've been working on a webcode for a basic form and check page. The forms work, just I'm having an issue with when I submit the form, even with incomplete data (AKA the email verification) it submits anyway instead of halting the page. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>About</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="image/x-icon" rel="SHORTCUT ICON" href="EpicIcon.ico" /> <script type="text/javascript"> /* <![CDATA[ */ function firstNameFunc(){ if(document.forms[0].myName.value == 'Enter your first name here.'){ document.forms[0].myName.value = ''; } } function firstNameBlur(){ if(document.forms[0].myName.value == ''){ document.forms[0].myName.value = 'Enter your first name here.'; } } function lastNameFunc(){ if(document.forms[0].myName2.value == 'Enter your last name here.'){ document.forms[0].myName2.value = ''; } } function lastNameBlur(){ if(document.forms[0].myName2.value == ''){ document.forms[0].myName2.value = 'Enter your last name here.'; } } /**E-Mail verification and codes**/ <!--Beginning regular expression function for e-mail check--> <!--End test for Regular Expression--> function emailFocus(){ if(document.forms[0].myEMail.value == 'Enter your email here.'){ document.forms[0].myEMail.value = ''; } } function emailBlur(){ if(document.forms[0].myEMail.value == ''){ document.forms[0].myEMail.value = 'Enter your email here.'; } } <!--Verifying to submitting/resetting the form--> function confirmSubmit(){ var formSubmit = window.confirm("Are you sure you wish to submit the form?"); var emailReg = new RegExp(/^[a-zA-Z0-9\._-]+@[a-zA-Z0-9\.-]+\.(com|org|net|edu|gov)$/); /** -- ^[a-zA-Z0-9._-] will check for alpha-numeric characters (upper/lower) as well as allow periods, hyphens, and underscores. -- @ is the combining symbol for email adresses. -- [a-zA-Z0-9.-]+ will allow another set of alpha-numeric numbers that can also contain periods and hyphens. -- \. will seperate the characters from the domain and subdomains. -- (com|org|net|edu|gov)$/ will limit which domains those are. **/ if(document.forms[0].myName.value =='' ||document.forms[0].myName2.value =='' ||document.forms[0].myEMail.value ==''){ alert("You must enter data in the 'First Name,' 'Last Name,' and 'E-Mail' fields."); return false; } else if(document.forms[0].myEMail.value == 'Enter your email here.'){ document.forms[0].myEMail.value = ''; }if(document.forms[0].myEMail.value != ''){ if(emailReg.test(document.forms[0].myEMail.value) == false){ window.alert("Non-certified email used!"); document.forms[0].myEMail.focus(); document.forms[0].myEMail.select(); return true; } return false;} return true; } function confirmReset(){ var formReset = window.confirm("Are you sure you wish to reset the form?"); if(formReset == true) return true; return false; } <!--End of verification--> /* ]]> */ </script> </head> <body> <p align="center"> <form id="userInfo" method="post" onsubmit="confirmSubmit()" onreset="confirmReset()"> <table border="0"> <tr><td> First Name: </td><td align="center"><input type="text" id="myName" value="Enter your first name here." onFocus = "firstNameFunc()" onBlur="firstNameBlur()"/></td></tr> <tr><td>Last Name: </td><td align="center"><input type="text" id="myName2" value="Enter your last name here." onFocus = "lastNameFunc()" onBlur="lastNameBlur()"/></td></tr> <tr><td>E-Mail: </td><td align="center"><input type="text" id="myEMail" value="Enter your email here." onFocus = "emailFocus()" onBlur="emailBlur()"/></td></tr> <tr><td>Message: </td><td align="center"> <textarea id="message" cols="40" rows="5" onFocus="document.forms[0].message.value='';">Enter a message here...</textarea> </td></tr> <tr><td><td align="center"> <input type="Submit" value="Submit"/> <input type="Reset" value="Reset"/> </td></td></tr> </table> </form> </p> <a href="about.html">Click to return</a> </body> </html> Now I've tried making a seperate function for the regular expression and e-mail verification and got no where with it (though I'm sure it can be done easily). My question (though it is bolded): How do I prevent the page from continuing the submit function if data is incomplete? EDIT Code: function confirmSubmit(){ var formSubmit = window.confirm("Are you sure you wish to submit the form?"); var emailReg = new RegExp(/^[a-zA-Z0-9\._-]+@[a-zA-Z0-9\.-]+\.(com|org|net|edu|gov)$/); /** -- ^[a-zA-Z0-9._-] will check for alpha-numeric characters (upper/lower) as well as allow periods, hyphens, and underscores. -- @ is the combining symbol for email adresses. -- [a-zA-Z0-9.-]+ will allow another set of alpha-numeric numbers that can also contain periods and hyphens. -- \. will seperate the characters from the domain and subdomains. -- (com|org|net|edu|gov)$/ will limit which domains those are. **/ if(document.forms[0].myName.value =='' ||document.forms[0].myName2.value =='' ||document.forms[0].myEMail.value ==''){ alert("You must enter data in the 'First Name,' 'Last Name,' and 'E-Mail' fields."); return false; } else if(document.forms[0].myEMail.value == 'Enter your email here.'){ document.forms[0].myEMail.value = ''; }if(document.forms[0].myEMail.value != ''){ if(emailReg.test(document.forms[0].myEMail.value) == false){ window.alert("Non-certified email used!"); document.forms[0].myEMail.focus(); document.forms[0].myEMail.select(); return true; } return false;} return true; } I'm a newbie to scripting who needs help. The situation is as follows: I'm running Joomla 1.5.23 and I've been trying to get validation on a component's form fields. In the header section, I'm properly loading the validator.js file, which contains the following: Code: //function to check empty fields function isEmpty(strfield1, strfield2) { strfield1 = document.forms[0].firstname.value strfield2 = document.forms[0].lastname.value //firstname field if (strfield1 == "" || strfield1 == null || !isNaN(strfield1) || strfield1.charAt(0) == ' ') { alert("\"firstname\" is a mandatory field.\nPlease amend and retry.") return false; } //lastname field if (strfield2 == "" || strfield2 == null || strfield2.charAt(0) == ' ') { alert("\"lastname" is a mandatory field.\nPlease amend and retry.") return false; } } return true; } //function to check valid email address function isValidEmail(strEmail){ validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i; strEmail = document.forms[0].email.value; // search email text for regular exp matches if (strEmail.search(validRegExp) == -1) { alert('A valid e-mail address is required.\nPlease amend and retry'); return false; } return true; } //function that performs all functions, defined in the onsubmit event handler function check(form)){ if (isEmpty(form.firstname)){ if (isEmpty(form.lastname)){ if (isValidEmail(form.email)){ return true; } } } return false; } I'm invoking this in this way: Code: <form action="index.php?option=com_pbbooking&task=save" method="POST" onsubmit="return check(this);"> My problem is that even if all fields are empty it will go to the next step. Thanks in advance, twdk01. Hi Experts, I am trying to redirect users to a payment page after they complete the registration form. After researching a little bit I got the below code to work .. however it triggers even before the registration form is submitted. I would like the below code to trigger when the user clicks on the registration form Submit button. How can I associate the SUBMIT button to the below code. Please help. Thanks Vinny Code: <input type="submit" name="btnAction" id="btnAction" value="<%= ew_BtnCaption(Language.Phrase("AddBtn")) %>"> </form> <body onload="submitForm()"> <form method="post" action="https://www.123Merchant.com/Merchant/process.do" name="myForm" id="myForm"> <!-- IMPORANT NOTE: DO NOT re-name the form- it is called by the name 'myForm'! --> <input type="hidden" name="ssl_merchant_id" value="1234"> <input type="hidden" name="ssl_user_id" value="1234"> <input type="hidden" name="ssl_pin" value="1234"> <input type="hidden" name="ssl_show_form" value="true"> <input type="hidden" name="ssl_test_mode" value="false"> <input type="hidden" name="ssl_Customer_Code" value="<%= Server.HTMLEncode(My_Registrations.Competition_Invoice.CurrentValue&"") %>"> <input type="hidden" name="ssl_transaction_type" value="ccsale"> <input type="hidden" name="ssl_amount" value="<%= Server.HTMLEncode(My_Registrations.Competition_Pledge.CurrentValue&"") %>"> </form> <!-- now send the form! --> <script type='text/javascript'>document.myForm.submit();</script> </body> <html> <script language="javascript"> function checkForm() { String name= document.getElementById("name"); if(name.length==0) return ; // else // return ; } </script> <body> <form action="test2.jsp" onclick =" return checkForm()"> <input type="text" name="name" value="shyam" id="name" /> <input type="submit" name="sub" value="clickme" /> </form> </body> </html> How can I send POST variables to a new window on form submit. I tried the below but what happens is the new window "foo.php" opens but no POST variables are present and also the parent page refreshes when I want it to remain static. Code: <form method="POST" onsubmit="return validateForm(this) && transferListValuesToCSV(document.theForm.box2) && window.open('foo.php', 'foo', 'width=450,height=300,status=yes,resizable=no,scrollbars=no')"; name="theForm" > I have a set of text boxes sharing the same name that I want to validate onSubmit. If a duplicate is found, I want to alert the user and prevent the form from submitting. How would I check the text boxes for duplicates? Code: <script type="text/javascript"> function Validate() { var obj = document.getElementsByName('keyword'); var i = 0; var rows = obj.length; for (i=0; i<rows; i++) { if (obj[i].value == any of the other text boxes { alert('A duplicate was found.'); return false; } } </script> <form method="post" action="" onSubmit="return Validate();"> <input id="k1" name="keyword" /><br /> <input id="k2" name="keyword" /><br /> <input id="k3" name="keyword" /><br /> <input id="k4" name="keyword" /><br /> <input id="k5" name="keyword" /><br /> <input type="Submit" value="Submit" /> </form> |