JavaScript - Update The Sliders's Value After A Submit Button
Hi All,
I am new to html and javascript. I am doing a webpage where i need to get the value from a slider and send it across the from client to server side. I need to inform the server side about the value (done) and also update the sliders's value after a submission button. Anyone have any idea how to do the latter part. Here is my code. Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="js/range.js"></script> <script type="text/javascript" src="js/timer.js"></script> <script type="text/javascript" src="js/slider.js"></script> </head> <body> <p>Current Value:</p> <div class="slider" id="slider-1" tabIndex="1"> <input class="slider-input" id="slider-input-1"/> </div> <form name="hMess" action="" onsubmit="return convertURL(this);"> <input name="w" type="number" id="h-value" onchange="s.setValue(parseInt(this.value))"> <input name="1" id="1" type="submit" value="Update"></form> <script type="text/javascript"> var s1 = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1")); s1.onchange = function () { document.getElementById("h-value1").value = s1.getValue(); }; var a=document.getElementById("h-value1").value s1.setValue(a); var locate = window.location document.hmess.burns.value = locate var text = document.hmess.burns.value function delineate(str) { theleft = str.indexOf("=") + 1; theright = str.indexOf("&"); return(str.substring(theleft, theright)); } </script> body> </html> Thanks in advance. Similar TutorialsI have created some online software which uses form data to submit to another page. The problem is that I have other submit buttons in the same form which submit to different pages (depending on which button is pressed). The first submit button works fine but all the others only work once. Code: <input class="cssbutton" type='submit' value='Button1' onclick="wbform.action='page1.php'; target='mainFrame'; return true;"> <input class="cssbutton" type='submit' value='Button2' onclick="wbform.action='page2.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button3' onclick="wbform.action='page3.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button4' onclick="wbform.action='page4.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button5' onclick="wbform.action='page5.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button6' onclick="wbform.action='page6.php'; target='_blank'; return true;"> Any ideas my friends? I am trying to auto submit a login form remotely using .submit() . It's submitting, but for some reason if I use submit() the login isn't processing. However, if I turn off the auto submit and use an actual submit button it logs in just fine. Now, in the form tag there is a call onsubmit for some validation, does .submit() trigger that form onsubmit="" function? Is there something that happens differently when a user clicks a button verses the .submit(). Thanks! Paul Ok so the following code is basically the style of form I would like to have on my website. I was wondering however how you make the options on a sliding scale. So all the visitor has to do is slide the button along a scale to get their answer. I would basically like something found on stylepilot.com on their dna generator or like something on wonga.com (stupid adverts!!!!). Any help or pointing in the right direction would be great. <?php print_r($_POST); ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body> <script type="text/javascript"> function setOptions(chosen){ var selbox = document.formName.table; selbox.options.length = 0; if (chosen == " ") { selbox.options[selbox.options.length] = new Option('No database selected',' '); } if (chosen == "1") { selbox.options[selbox.options.length] = new Option('first choice - option one','oneone'); selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo'); } if (chosen == "2") { selbox.options[selbox.options.length] = new Option('second choice - option one','twoone'); selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo'); selbox.options[selbox.options.length] = new Option('second choice - option three','twothree'); selbox.options[selbox.options.length] = new Option('second choice - option four','twofour'); } if (chosen == "3") { selbox.options[selbox.options.length] = new Option('third choice - option one','threeone'); selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo'); } } </script> <form name="formName" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <select name="optone" size="1" onchange="setOptions(document.formName.optone.options[document.formName.optone.selectedIndex].value);"> <option value=" " selected="selected"></option> <option value="1">First Choice</option> <option value="2">Second Choice</option> <option value="3">Third Choice</option> </select> <select name="table" size="1"> <option value=" " selected="selected">No database selected</option> </select> <input type="submit" /> </form> </body> </html> Similiar to that of CBS.com or AOL.com when you visit them on the iphone. Something that responds to the swipe gesture within the iphone. I've been searching google, but mobile web resourses are far and few. Also tried to check out their source and it only shows it as one long line of text, not ideal for trying to read code. Hi there, Having a problem on a clients website incorporating two js sliders in the same page. The scripts before editing were the TinySlider and TinyFader from http://forum.leigeber.com/ The parsers in Internet Explorer, Firefox and Chrome cannot seem to differentiate between the two scripts, although I tried altering various defined names for script control it didn't make much difference. The problems are the controls of the first slider operate the second and only the second slider works. Also, I'm getting validation errors (document type does not allow element "li" here; missing one of "ul", "ol" start-tag) where the showroom (second) script content lies. Not sure if this is related or not but either way if I try to fix it the only working slider is broken. Here is the testing url. http://www . bellsdomestics.co.uk/testing/index . html Can anyone point me in the right direction? Thanks. Good morning all. I am looking to have multiple image sliders (javascript / jquery) on one page. I have built the framework and have gotten one slider to work. However, when adding in another slider, I have only confused the situation. Below is the html and css. Let me know where I've gone wrong here. Will I need another set of css classes for each slider? How do I call a second slider? Thanks! The html/javascript 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" /> <link media="screen" type="text/css" link rel="stylesheet" href="style.css" /> <link media="screen" type="text/css" link rel="stylesheet" href="stylework.css" /> <link media="screen" link rel="stylesheet" type="text/css" href="wt-scroller.css" /> <link media="screen" link rel="stylesheet" type="text/css" href="wt-lightbox.css" /> <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script> <script type="text/javascript" src="js/jquery.wt-lightbox.min.js"></script> <script type="text/javascript" src="js/jquery.wt-scroller.min.js"></script> <title>idigify</title> </head> <body> <div class="main"> <div class="container"> <div class="header"> <ul class="nav"> <ul> <div class="allbuttons"> <div class="navabout"><li>about</li></div> <div class="navwork"><li>work</li></div> <div class="navcontact"><li>contact</li></div> </div><!--end of all buttons--> </ul><!--end of nav list--> </ul><!--end of nav--> </div> <!--end of header--> <div class="headeraboutme">the work</div> <div class="sitemainfeature"> <div class="aboutme_text"> <h2>Just for Fun</h2> <div class="workslider_justforfun"> <div class="workslider_justforfun_container"> <div class="wt-scroller"> <div class="prev-btn"></div> <div class="slides"> <ul> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> </ul> </div><!--end of slider--> <div class="next-btn"></div> <div class="lower-panel"> <div class="scroll-bar"> <div class="thumb"> </div><!--end of thumb--> </div><!--end of scroll-bar--> </div><!--end of lower panel--> </div><!--end of wt scroller just for fun--> </div><!--end of just for fun container--> </div><!--end of workslider--> <h2>Ads/Advertising</h2> <div class="workslider_justforfun"> <div class="workslider_justforfun_container"> <div class="wt-scroller2"> <div class="prev-btn"></div> <div class="slides"> <ul> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> </ul> </div><!--end of slider--> <div class="next-btn"></div> <div class="lower-panel"> <div class="scroll-bar"> <div class="thumb"> </div><!--end of thumb--> </div><!--end of scroll-bar--> </div><!--end of lower panel--> </div><!--end of wt scroller just for fun--> </div><!--end of just for fun container--> </div><!--end of workslider--> <h2>Logos</h2> <div class="workslider_justforfun"> <div class="workslider_justforfun_container"> <div class="wt-scroller"> <div class="prev-btn"></div> <div class="slides"> <ul> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> <li> <a href="images/triworks_abstract27.jpg" rel="scroller"> <img src="images/thumbs/triworks_abstract27.jpg"/> </a> <p> this is just a test.this is just a test.this is just a test.</p> </li> </ul> </div><!--end of slider--> <div class="next-btn"></div> <div class="lower-panel"> <div class="scroll-bar"> <div class="thumb"> </div><!--end of thumb--> </div><!--end of scroll-bar--> </div><!--end of lower panel--> </div><!--end of wt scroller just for fun--> </div><!--end of just for fun container--> </div><!--end of workslider--> <h2>Billboards</h2> <div class="workslider_billboard"> </div><!--end of workslider--> <h2>Business Cards</h2> <div class="workslider_businesscard"> </div><!--end of workslider--> <h2>Resumes</h2> <div class="workslider_resume"> </div><!--end of workslider--> <h2>Sales Pieces</h2> <div class="workslider_salespiece"> </div><!--end of workslider--> </div><!--end of about me text--> </div><!--end of site main feature--> <div class="worksplash"></div><!--end of background splash--> </div><!--end of container--> </div><!--end of main--> <div class="footercontainer"> <ul class="nav"> <ul> <div class="navabout"><li>about</li></div> <div class="navwork"><li>work</li></div> <div class="navcontact"><li>contact</li></div> </ul><!--end of nav list--> </ul><!--end of nav--> </div> <!--end of footer container--> <script type="text/javascript"> $(document).ready( function() { //initialize scroller $(".container").wtScroller({ num_display:3, slide_width:240, slide_height:180, slide_margin:1, button_width:25, ctrl_height:15, margin:1, auto_scroll:false, delay:4000, scroll_speed:1000, easing:"", auto_scale:true, move_one:false, ctrl_type:"scrollbar", display_buttons:true, display_caption:true, mouseover_caption:false, caption_align:"bottom", caption_position:"inside", cont_nav:true, shuffle:false }); //initialize lightbox for scroller $("a[rel='scroller']").wtLightBox({ rotate:true, delay:4000, transition_speed:600, display_number:true, display_dbuttons:true, display_timer:true, display_caption:true, caption_align:"bottom", cont_nav:true, auto_fit:true, easing:"" }); } ); </script> </body> </html> the css Code: .wt-scroller{ position:relative; display:block; font-family:Arial,Helvetica,sans-serif; background-color:#CCCCCC; width:720px; height:180px; } .wt-scroller .slides{ position:relative; width:700px; height:200px; float:left; overflow:hidden; z-index:1; } .wt-scroller .slides ul{ list-style:none; position:relative; width:999999px; margin:0px; padding:0px; z-index:0; overflow:hidden; } .wt-scroller .slides ul li{ position:relative; display:block; float:left; overflow:hidden; width:240px; height:200px; margin-left:5px; } .wt-scroller .slides ul li img{ position:absolute; top:0; left:0; z-index:0; border:0; } .wt-scroller .slides ul li p{ position:absolute; top:0; left:0; z-index:1; color:#FFF; font-size:12px; width:200px; padding:5px; margin:0; visibility:hidden; } .wt-scroller .outside{ background-color:#222; } .wt-scroller .inside{ -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); background-color:rgba(0,0,0,0.75); } .wt-scroller .prev-btn{ float:left; position:relative; width:20px; height:170px; cursor:pointer; } .wt-scroller .next-btn{ float:right; position:relative; width:20px; height:170px; cursor:pointer; } .wt-scroller .prev-btn{ background:url(assets/prev.png) center no-repeat; } .wt-scroller .next-btn{ background:url(assets/next.png) center no-repeat; } .wt-scroller .lower-panel{ display:block; position:relative; clear:both; text-align:center; font-size:0; } .wt-scroller .scroll-bar{ position:relative; background-color:#999; background:-moz-linear-gradient(top, #999 0%, #666 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0); -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; width:100%; height:5px; cursor:pointer; overflow:hidden; } .wt-scroller .thumb{ position:absolute; top:0; left:0; width:100px; height:5px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background-color:#FFF; background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0); } .wt-scroller .index, .wt-scroller .index-hl{ position:relative; display:inline-block; width:7px; height:7px; margin:0 4px; background-image:url(assets/circle.png); background-repeat:no-repeat; } .wt-scroller .index{ background-position:0 0; cursor:pointer; } .wt-scroller .index-hl{ background-position:-7px 0; cursor:default; } /*start of scroller2 */ .wt-scroller2{ position:relative; display:block; font-family:Arial,Helvetica,sans-serif; background-color:#CCCCCC; width:720px; height:180px; } .wt-scroller2 .slides{ position:relative; width:700px; height:200px; float:left; overflow:hidden; z-index:1; } .wt-scroller2 .slides ul{ list-style:none; position:relative; width:999999px; margin:0px; padding:0px; z-index:0; overflow:hidden; } .wt-scroller2 .slides ul li{ position:relative; display:block; float:left; overflow:hidden; width:240px; height:200px; margin-left:5px; } .wt-scroller2 .slides ul li img{ position:absolute; top:0; left:0; z-index:0; border:0; } .wt-scroller2 .slides ul li p{ position:absolute; top:0; left:0; z-index:1; color:#FFF; font-size:12px; width:200px; padding:5px; margin:0; visibility:hidden; } .wt-scroller2 .outside{ background-color:#222; } .wt-scroller2 .inside{ -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); background-color:rgba(0,0,0,0.75); } .wt-scroller2 .prev-btn{ float:left; position:relative; width:20px; height:170px; cursor:pointer; } .wt-scroller2 .next-btn{ float:right; position:relative; width:20px; height:170px; cursor:pointer; } .wt-scroller2 .prev-btn{ background:url(assets/prev.png) center no-repeat; } .wt-scroller .next-btn{ background:url(assets/next.png) center no-repeat; } .wt-scroller2 .lower-panel{ display:block; position:relative; clear:both; text-align:center; font-size:0; } .wt-scroller2 .scroll-bar{ position:relative; background-color:#999; background:-moz-linear-gradient(top, #999 0%, #666 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0); -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; width:100%; height:5px; cursor:pointer; overflow:hidden; } .wt-scroller2 .thumb{ position:absolute; top:0; left:0; width:100px; height:5px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background-color:#FFF; background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0); } .wt-scroller2 .index, .wt-scroller2 .index-hl{ position:relative; display:inline-block; width:7px; height:7px; margin:0 4px; background-image:url(assets/circle.png); background-repeat:no-repeat; } .wt-scroller2 .index{ background-position:0 0; cursor:pointer; } .wt-scroller2 .index-hl{ background-position:-7px 0; cursor:default; } /*end of scroller2 */ I am looking for some help similar to this old post: http://www.codingforums.com/showthread.php?t=19588 I want my radio buttons to become submit buttons as well. So when a user clicks on a radio button it submits the action and refreshes the page accordingly. As of now using only using onclick="this.form.submit()" the page only refreshes with no change. Here is a copy of the entire form. It is a custom shipping options form (I did not create it). Any help would be appreciated. Code: <!-- Custom shipping form --> <form action="" method="post" name="update_shipping"> <table width="300"> <tr> <td><label> <input <?php if (!(strcmp($_SESSION['shippingmethod'],"1"))) {echo "checked=\"checked\"";} ?> name="grpshipping" type="radio" id="grpshipping_0" value="1" checked="checked" onclick="this.form.submit()"/> Ground Shipping</label></td> <td class="style261"><?php echo date("m/d/Y",$grounddelivery);?></td> <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){ echo number_format($row_rsshippingprices['Ground'] + ($row_rsshippingpricesover21['Ground'] * ($varWeightover)) ,2); } else { echo number_format($row_rsshippingprices['Ground'],2); } ?></td> </tr> <?php if($rainbowcart->ConditionalTotal("Quantity", "groundshiponly", "1") == 0) {//show other shipping options ONLY if a ground shipping only item is not in the cart ?> <tr> <td><label> <input <?php if (!(strcmp($_SESSION['shippingmethod'],"2"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="2" id="grpshipping_1" onclick="this.form.submit()" /> Fedex 3 Day</label></td> <td class="style261"><?php echo date("m/d/Y",$fedex3delivery);?></td> <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){ echo number_format($row_rsshippingprices['Fedex3'] + ($row_rsshippingpricesover21['Fedex3'] * ($varWeightover)) ,2); } else { echo number_format($row_rsshippingprices['Fedex3'],2); } ?></td> </tr> <tr> <td><label> <input <?php if (!(strcmp($_SESSION['shippingmethod'],"3"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="3" id="grpshipping_2" onclick="this.form.submit()"/> Fedex 2 Day</label></td> <td class="style261"><?php echo date("m/d/Y",$fedex2delivery);?></td> <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){ echo number_format($row_rsshippingprices['Fedex2'] + ($row_rsshippingpricesover21['Fedex2'] * ($varWeightover)) ,2); } else { echo number_format($row_rsshippingprices['Fedex2'],2); } ?></td> </tr> <tr> <td><label> <input <?php if (!(strcmp($_SESSION['shippingmethod'],"4"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="4" id="grpshipping_3" onclick="this.form.submit()"/> Next Day PM</label></td> <td class="style261"><?php echo date("m/d/Y",$nddelivery);?></td> <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){ echo number_format($row_rsshippingprices['ONPM'] + ($row_rsshippingpricesover21['ONPM'] * ($varWeightover)) ,2); } else { echo number_format($row_rsshippingprices['ONPM'],2); } ?></td> </tr> <tr> <td><label> <input <?php if (!(strcmp($_SESSION['shippingmethod'],"5"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="5" id="grpshipping_4" onclick="this.form.submit()"/> Next Day AM</label></td> <td class="style261"><?php echo date("m/d/Y",$nddelivery);?></td> <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){ echo number_format($row_rsshippingprices['ONAM'] + ($row_rsshippingpricesover21['ONAM'] * ($varWeightover)) ,2); } else { echo number_format($row_rsshippingprices['ONAM'],2); } ?></td> </tr> </table> <table class="eC_ButtonWrapper" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="left"><center>Choose an option above and click update to change your shipping preference.<br /><b>PLEASE BE SURE AND PRESS UPDATE IF YOU CHANGE YOUR SHIPPING OPTION<br /><br /><input type="image" name="Update_shipping" id="Update_shipping" value="Update_shipping" alt="Update_shipping" src="WA_eCart/Images/Nautica/Btn4_EN_update.gif" class="eC_ImageButton" /></center></td> </tr> </table> <?php } //end of show if ground ship item is not in the cart?> <?php if($rainbowcart->ConditionalTotal("Quantity", "groundshiponly", "1") <> 0) { ?> <font color="red">The cart contains a Ground Shipping only item, this order can only be shipped ground</font><br /><br /> <?php } ?> </form> <!-- End of Custom shipping form --> I'm trying to get a submit button to open a thank you page I created (i.e. thankyou.html) only after the user has filled out a series of questions for a form. If they don't fill out the required information, a pop up box informs them to fill out the section (this I have accomplished). I cannot get the submit button to not work if the fields are left un-answered. Can you guys help? Thanks for you help. -------------------------------------------------------------------------- This is what I have so far: <title>Customer Demographic Data Form</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ></meta> <style type="text/css"> body { font-family: Times New Roman; color: navy; background-color: #CCC } h1, h2, h5 { font-family: Times New Roman; color: black } body,td,th { color: #000; font-family: Times New Roman, Times, serif; } h1 { color: #000; } h2 { color: #000; } h5 { color: #000; } a { font-family: Times New Roman, Times, serif; } h1,h2,h3,h4,h5,h6 { font-family: Times New Roman, Times, serif; } </style> <script type="text/javascript"> function checkForNumber(fieldValue) { var numberCheck = isNaN(fieldValue); if (numberCheck == true) { window.alert("Please enter a numeric value!"); return false; } } function confirmSubmit() { var email = document.forms[0].email.value; if (document.forms[0].fname.value == "" || document.forms[0].lname.value == "") { window.alert("Please enter your first and last name."); document.forms[0].lname.focus(); return false; } else if (document.forms[0].address1.value == "" && document.forms[0].email.value == "") { window.alert("Please enter your Mailing Address or Email Address!"); document.forms[0].address1.focus(); return false; } else if (email.indexOf("@") == -1 && document.forms[0].email.value != "") { window.alert("Please enter a valid e-mail address."); document.forms[0].email.focus(); return false; } else if (email.indexOf(".") == -1 && document.forms[0].email.value != "") { window.alert("Please enter a valid e-mail address."); document.forms[0].email.focus(); return false; } else if(document.forms[0].city.value == '') { window.alert("Please enter your City"); document.forms[0].city.focus(); return false; } else if(document.forms[0].state.value == '') { window.alert("Please enter your State"); document.forms[0].state.focus(); return false; } else if(document.forms[0].zip.value == '') { window.alert("Please enter your Zip Code"); document.forms[0].zip.focus(); return false; } checkCookie() } function checkCookie() { var formInfo = decodeURI(document.cookie); var userInfo = formInfo.split("; "); var lname = userInfo[0].split("="); var fname = userInfo[1].split("="); if (lname[1] == document.forms[0].lname.value && fname[1] == document.forms[0].fname.value) { this.close(true); window.open("FormDenied.html"); return false; } else { setCookie(); return true; } } function setCookie() { var expiresDate = new Date(); expiresDate.setFullYear(expiresDate.getFullYear() + 1); document.cookie = encodeURI("lname=" + document.forms[0].lname.value) + "; expires=" + expiresDate.toUTCString(); document.cookie = encodeURI("fname=" + document.forms[0].fname.value) + "; expires=" + expiresDate.toUTCString(); window.alert("Your information has been saved."); } </script> </head> <body> <p> </p> <h1 align="left" style="text-align: left">Kudler Fine Foods contact form</h1> <form action="" method="get" enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit();" onreset="return confirmReset();" > <blockquote> <h2><u>Name</u></h2> <p> <input type="text" name="fname" id="fname" size="25" /> <label for="fname"><strong>First Name</strong><br> <br> </label> <input type="text" name="lname" id="lname" size="15" /> <strong>Last Name</strong></p> <h2>---------------------------------------<br> <u>Address</u> </h2> <p> <input type="text" name="address1" id="address1" size="30" /> <label for="address1"><strong>Address Line 1</strong></label> </p> <p> <input type="text" name="address2" id="address2" size="20" /> <strong>Address Line 2<br> <br> </strong> <input type="text" name="city" id="city" size="20" /> <strong>City</strong> </p> <p> <input type="text" name="state" id="state" size="2" /> <label for="state2"><strong>State</strong></label> </p> <p> <input type="text" name="zip" id="zip" size="10" maxlength="10" onChange="return checkForNumber(this.value);" /> <label for="zip2"><strong>Zip Code</strong></label> </p> <h2>--------------------------------------- </h2> <h2> <u>Other Information</u></h2> <table> <tr> <td width=300><strong>Telephone</strong></td> <td width=300><p><strong>Email address:</strong></p></td> </tr> <tr> <td> <input type="text" name="area" id="area" size="3" maxlength="3" onChange="return checkForNumber(this.value);" /> <input type="text" name="exchange" id="exchange" size="3" maxlength="3" onChange="return checkForNumber(this.value);" /> <input type="text" name="phone" id="phone" size="4" maxlength="4" onChange="return checkForNumber(this.value);" /></td> <td> <input type="text" name="email" id="email" size="30" /></td> </tr> </table> </blockquote> <h5> </h5> <blockquote><blockquote> <h3 align="center"> <input name="Submit" type="button" </h3> </blockquote> </blockquote> </form> </body> </html> Hi all, i have seen that there is an input type 'reset' which i presum clears all fields in a form? But anyway i did not know this existed and my implementation requires a bit more sophistication so i had already written code to do a custom reset of the boxes whilst keeping and updating certain key values. This works fine. My question is, for the actual 'submit' of the data in a form do i have to use a button of type 'submit'? It is actually better for me in this instance that i do not as the special message windows i am using will close - and in the case of errors in the user input this is not desirable - so i have written the error handling etc with window staying open in mind, so that user can correct their errors and resubmit. To accomplish this i changed my input into type 'button' and it works fine When i click 'the submit button' it checks fields for valid data first - can i use its return value to somehow activate or not the actual form data sending? Like i have Code: <input type = "button" style = "font-size:18;" value= " Submit "onclick = "CheckValid()"/> I could be calling 'SendForm()' or something here instead and have check valid called from within SendForm() i norder to determin it's return type, how can i use this to decide if the form data is valid to send or not? and how could i use the return value in the html like this? should i A: think it is possible to send all the data from within the onclick function so i use that to decide if it gets sent from internal calls there and display thank you message if so, if not display error message. should i B: Disable the sending button until the fields contain valid data? Or use a second button to confirm data then allow a submit button to be pressed? Hi everyone, I have a problem with something I am trying to do. I have a submit button and once I press it I want it to add a post value to my website. For example my website is www.something.net/test.php and once I press it I want it to refresh the site and becomes something like www.something.net/test.php&ca=test In other words I want it to use POST and then using GET I can get the value of the POST. I have posted this under javascript because I believe I have a problem with the javascript I use. Here is the javascript and the button I use Javascript Code: function reload(val) { //var val=form.accept.id; self.location='test.php?ca=' + val ; } Button Code: <form name='form1' method='post' action='' STYLE='margin: 0px; padding: 0px;'> <input type='submit' name='accept' id='trial' value='Approve' onclick=\"reload(test)\" /> </form></div></td>"; Can you please help me with that? 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"?
Whenever I click the Submit button, which should create a new window showing all the details entered in the form, it doesn't work ideas? javascript.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15"> <!-- The external style sheets --> <link rel="stylesheet" type="text/css" href="mystyle.css"> <script type="text/javascript" src="myjavascript.js"></script> <meta name="keywords" content="CO332"> <meta name="description" content="CO332 Exercise Website"> <meta name="author" content="Bradley Berwick"> </head> <body> <div id="container"> <div id="maincontent"> <div id="header"> <h1> Exercise Website </h1> </div> <div id="leftnav"> <ul> <li><a href="index.html" >Home</a> <li><a href="myjavascript.html" ><span class="currentpage">Services</span></a> <li><a href="#" >TBA</a> <li><a href="#" >TBA</a> </ul> </div> <div id="content"> <h2>About Yourself</h2> <form name="exampleform"> <h3>Name: <input name="yourname" type="text"></h3> <h3>Age: <input name="age" type="text" size="3" Onchange = ' if ( !( this.value > 0 && this.value < 150 ) ) { alert( this.value + " is not a valid age."); this.value=""; // clear age text box }' > </h3> <h3>Gender: <input name="gender" type="radio" value="male"> Male <input name="gender" type="radio" value="female"> Female </h3> <h3>Your favourite colour: <select name="colours"> <option value="None"> <option value="red">Red <option value="green">Green <option value="blue">Blue <option value="pink">Pink <option value="orange">Orange <option value="purple">Purple </select> </h3> <h3>Your hobbies a <br> <input name="running" type="checkbox"> Running <br> <input name="football" type="checkbox"> Football <br> <input name="golf" type="checkbox"> Golf <br> <input name="cycling" type="checkbox"> Cycling </h3> <textarea rows="10" cols="30"> Add comments. </textarea> <p> <input type="reset" value="Clear"> <input name="submit" type="button" value="Submit" onclick='submitForm()';> </p> </form> </div> </div> <div id="footer"> <div id="mailto"> Last updated on 28th Oct 2011<br> Maintained by Bradley Berwick </div> </div> </div> </body> </html> myjavascript.js Code: function displayMessage(msg) { // Open a new window var msgWindow = window.open('', 'Message'); // Write message in the new Window msgWindow.document.write(msg); msgWindow.document.close(); // Raise this window, in case it's not visible msgWindow.focus(); } var hobstring=""; function submitForm() { var nam=document.exampleform.elements["yourname"].value; var age=document.exampleform.elements["age"].value; var gend = document.getElementsByName('gender'); for (var i = 0; i < gend.length; i++) { if (gend[i].checked==true) { var sex=gend[i].value; } } var sel=document.getElementById('color'); var color=sel.options[sel.selectedIndex].value; var hobbs = document.getElementsByName('hobby'); for (var a = 0; a < hobbs.length; a++) { if (hobbs[a].checked==true) { hobstring+=hobbs[a].id+", "; } } var msg="Name: "+nam+"<br>Age: "+age+"<br>Gender: "+sex+"<br>Favorite color: "+color+"<br>Hobbies: "+hobstring; displayMessage(msg); } <input type="image" src="uploads/button_in_cart.gif" border="0" alt="Add to Cart" title=" Add to Cart " onclick="addtocart(1);"> in addtocart function I do some checking how can i change that if after some checking my variable valid=0 that it does not allow the user to submit the form? I need help making this timed quiz so when you hit submit it goes into a mysql database. right now it just tells you if you answered correctly or not Here is the code: what color is the grass? <input type = "text" id = "answer"> <input type = "button" id = "time" onclick="answer()"> <script type = "text/javascript"> var n = 60; // modify this for number of seconds to answer document.getElementById( 'time').value = "Answer in " + n + " seconds"; var i = setInterval('count()' , 1000); var tooLate; function count() { tooLate = 0; n--; if(n >=0) { document.getElementById( 'time').value = "Answer in " + n + " seconds"; } else { clearInterval(i); alert("Too late!"); document.getElementById('answer').value = ""; tooLate = 1; } } function answer() { var correct = "green"; // This is the correct answer if (tooLate == 0) { if(document.getElementById( 'answer').value == correct) { clearInterval(i); alert("Right Answer with " + n + " seconds remaining"); } else{ clearInterval(i); alert("Incorrect! The answer was " + correct); } } } </script> Hello Wondering something, I created a form and have I have it submit when the user clicks the Submit button. <!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> <title>Assignment 4</title> <style type="text/css"> </style> </head> <body style="color: #009999; background-color: #000000"> <form action="mailto:whatisthematrix01@hotmail.com" name="frmCustomer" method="post"> <table style="width: 85%; height: 222px;"> <tr> <td> <img alt="Space Ship" height="223" src="spaceship_cg2.jpg" style="float: left" width="761" /></td> </tr> </table> <p> </p> <table style="width: 100%"> <tr> <td class="style1">Interstellar Shipping - Customer Registration </td> </tr> </table> <p> </p> <table class="style2"> <tr> <td class="style3"> First Name:</td> <td colspan="2" style="width: 273px"> <input id="Text1" type="text" name="Fname" /></td> </tr> <tr> <td class="style3"> Last Name</td> <td colspan="2" style="width: 273px"> <input id="Text2" type="text" name="Lname" /></td> </tr> <tr> <td class="style3"> City: </td> <td colspan="2" style="width: 273px"> <input id="Text3" type="text" name="UseCity" /></td> </tr> <tr> <td class="style3"> Country:</td> <td colspan="2" style="width: 273px"> <input id="Text4" type="text" name="UserCountry" /></td> </tr> <tr> <td class="style3"> E-Mail:</td> <td colspan="2" style="width: 273px"> <input id="Text6" name="userEmail" type="text" /></td> </tr> <tr> <td class="style3"> Username:</td> <td colspan="2" style="width: 273px"> <input id="Text5" type="text" name="Username" /></td> </tr> <tr> <td class="style3"> Password:</td> <td colspan="2" style="width: 273px"> <input id="Password1" type="password" name="Userpassword" /></td> </tr> <tr> <td class="style3" style="height: 35px"> Gender:</td> <td style="width: 307px; height: 35px;"> Male <input name="radGender" type="radio" value="radMale" /> Female <input name="radGender" type="radio" value="radFemale" /></td> <td style="width: 273px; height: 35px;"> </td> </tr> <tr> <td class="style3"> <input id="Submit1" type="button" value="submit" onclick="doSave()"/></td> <td colspan="2" style="width: 273px"> <input id="Reset1" type="reset" value="reset" /></td> </tr> </table> </form> <script Language = "JavaScript"> function ltrim(varIn) {/*Purpose: Trims the leading spaces from a string*/ var varOut = "" if(!varIn) { // string is null, so nothing to do } else // string has at least one character { for(intI=0; intI < varIn.length; intI++) { if(varIn.charAt(intI) != " ") { //first non-space char found so return //string from this character forward varOut = varIn.substring(intI) break } } } return varOut } function doSave() { var fOk = true var strSuperMessage var superFirstName = document.frmCustomer.Fname var superLastName = document.frmCustomer.Lname var superUserCity = document.frmCustomer.UseCity var superUserName = document.frmCustomer.Username var superUserPassword = document.frmCustomer.Userpassword var superUserEmail = document.frmCustomer.userEmail var checkDigit = /\d/; if ((ltrim(superFirstName.value)).length == 0) { fOk = false strSuperMessage = "First Name Required" superFirstName.focus() } else { if ((ltrim(superLastName.value)).length == 0) { fOk = false strSuperMessage = "Last Name Required" superLastName.focus() } else { if ((ltrim(superUserCity.value)).length == 0) { fOk = false strSuperMessage = "City Required" superUserCity.focus() } else { if ((ltrim(superUserName.value)).length == 0) { fOk = false strSuperMessage = "Username Required" superUserName.focus() } else { if ((ltrim(superUserEmail.value)).length == 0) { fOk = false strSuperMessage = "E-Mail Required" superUserEmail.focus() } else { if (superUserEmail.value.indexOf("@") == -1 || superUserEmail.value.indexOf(".")== -1) { fOk = false strSuperMessage = "The entered e-mail address is not " + "valid.\nE-mail addresses must " + "be in the form name@domain." superUserEmail.focus() } else { if (superUserPassword.value.search(checkDigit) ==-1) { fOk=false strSuperMessage = "Please enter at least one digit in your password field."; superUserPassword.focus() } else { if ((document.frmCustomer.radGender[0].checked==false) && (document.frmCustomer.radGender[1].checked==false)) { fOk = false strSuperMessage = "Gender Required" } } } }}}}} if(fOk) { document.frmCustomer.submit(); //window.location="http://www.google.com" } else alert(strSuperMessage) } </script> </body> </html> Is it okay if I redirect to Google like I did here. if(fOk) { document.frmCustomer.submit(); //window.location="http://www.google.com" } I can't do it in the form action, because I have the mailto link. Simply put, what I did in the if statement, is that okay, there would be no problem with it? Hi there. I've been working on how to use the AnythingSlider (Github) And I have a problem, when I want to use 2 or more sliders on the same page. I want to change the green navigationpanels, and they should be different on each slider: When I have one slider I use this: Code: <script type="text/javascript"> var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2']; function formatText(index, panel) { return slider1[index - 1] || index; } </script> But when I have more sliders, I can't use this: Code: <script> $(function(){ var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2'], slider2 = ['jul', 'aug', 'sept', 'Quote #3', 'Image #3']; $('#slider1').anythingSlider({ navigationFormatter : function(index, panel){ return slider1[index - 1] || index; } }); $('#slider2').anythingSlider({ navigationFormatter : function(index, panel){ return slider2[index - 1] || index; } }); }); </script> It somehow conflicts with the slider.js I think. I'll post the HTML and the slider.js in the next two replies. Will you check it out and help me find the fault? Thanks I have a form with onchange events set on some of the text fields so that calculations can be made. By clicking the Submit button, the form data is then saved to the database. This all works fine as long as you leave a text field by tabbing to or clicking in another field before clicking Submit. However if you make a change in a text field and then directly click the Submit button, the onchange event occurs but the form submission does not. I have tried other types of events such as onfocus, onblur, etc. in place of onchange. I have also tried using the setTimeout function, with various time values, to cause a delay between the onchange and submit events. But the results are the same. Any advice would be appreciated. Thanks.
Hi, i'm sabrina from Asia. i'm new here and a new student in javascript. My english language is not fluent.i'm really sorry about that. i really need help in my assignment. i've already create a form that will pop up an alert message if there is an empty input. it went great. but after i edit <form onSubmit="return formValidator()"> to <form onSubmit="return formValidator()" action="html_form_submit.asp" method="get"> i don't know why my submit button cannot send this form to html_form_action.asp. Please help me.. below is the code that i've done so far..thank you. <html><head> <title>Kelab ICT OUM</title> </head> <body> <script type="text/javascript"> function formValidator(){ var nama=document.getElementById("nama"); var umur=document.getElementById("umur"); var tarikh=document.getElementById("tarikh"); var poskod=document.getElementById("poskod"); var email=document.getElementById("email"); var alamat=document.getElementById("alamat"); var negeri=document.getElementById("negeri"); if(isAlphanumeric(nama,"Sila isi nama anda")){ if(isNumeric(tarikh,"Sila isi tarikh lahir")){ if(isNumeric(umur,"Sila isi umur")){ if(isNumeric(poskod,"Sila isi poskod")){ if(emailValidator(email,"Sila isi email anda")){ if(lengthRestriction(alamat,"Sila masukkan alamat anda")){ if(madeSelection(negeri,"Sila pilih Negeri")){ return true; } } } } } } } return false; } function notEmpty(elem, helperMsg){ if(elem.value.length=0) { alert(helperMsg); alem.focus(); return false; } return true; } function isNumeric(elem, helperMsg){ var numericExpression = /^[0-9]+$/; if(elem.value.match(numericExpression)) { return true; }else{ alert(helperMsg); elem.focus(); return false; } } function isAlphanumeric(elem, helperMsg){ var alphaExp=/^[0-9a-zA-Z]+$/; if(elem.value.match(alphaExp)) { return true; }else{ alert(helperMsg); elem.focus(); return false; } } function emailValidator(elem, helperMsg){ var emailExp=/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zAz0-9]{2,4}$/; if(elem.value.match(emailExp)) { return true; }else{ alert(helperMsg); elem.focus(); return false; } } function lengthRestriction(elem,helperMsg){ var uInput=elem.value; if(uInput.length>15) { return true; } else{ alert(helperMsg); elem.focus(); return false; } } function madeSelection(elem, helperMsg){ if(elem.value == "Pilih") { alert(helperMsg); elem.focus(); return false; } else{ return true; } } </script> <form onSubmit="return formValidator()" action="html_form_submit.asp" method="get"> <table border="1" cellpadding="10" width="300"> <tr> <td colspan="3"><h1>Kelab iCT OUM</h1></td> </tr> <tr> <td>Nama</td> <td colspan="3"><input type="text" size="80" id="nama"</td> </tr> <tr> <td>Jantina</td> <td><input type= "radio" Name="Jantina" id="Jantina" value="p">Perempuan <br><input type= "radio" Name="Jantina" id="Jantina" value="l">Lelaki</td> <td>Umur <input type="text" size="10" id="umur"> Tahun <br><br> Tarikh Lahir <input type="text" size="10" id="tarikh"> </tr> <tr> <td>Alamat</td> <td><textarea name= "comments" rows="6" cols="20" wrap="virtual" id="alamat"> </textarea></td> <td>Poskod <input type="text" size="10" id="poskod"> <br><br>Negeri <select name= "negeri" id = "negeri"> <option value="Pilih" selected="select">Pilih</option> <option value="Perlis">Perlis</option> <option value="Kedah">Kedah</option> <option value="Perak">Perak</option> <option value="Selangor">Selangor</option> <option value="Negeri Sembilan">Negeri Sembilan</option> <option value="Melaka">Melaka</option> <option value="Kelantan">Kelantan</option> <option value="Pahang">Pahang</option> <option value="Terengganu">Terengganu</option> <option value="Johor">Johor</option> <option value="Wilayah Persekutuan">Wilayah Persekutuan</option> <option value="Sabah">Sabah</option> <option value="Sarawak">Sarawak</option> </select> <br><br>Email <input type="text" size="10" id="email"></td> </tr> </table><br> <input type="submit" value="Submit"> <input type= reset value ="Reset"> </form> </body> </html> Is there a way so that I can move the submit button outside of the form tags? and if this is possible, can you make it with multiple text boxes, each with their corresponding submit button? heres the coding Code: <html> <head> <script type="text/javascript"> <!-- function gotoURL() { var newURL = document.url2go.go.value document.location.href=newURL } //--> </script> </head> <body> <form action="javaScript:gotoURL()" method="get" name="url2go"> <input type="text" name="go" value="http://" size="50"> <INPUT TYPE="image" SRC="" id="go" HEIGHT="150" WIDTH="150" BORDER="0" ALT="Submit Form"> </form> </body> </html> Hi, I'm writing an android application to login into a website by injecting javascript into the HTML. So far it works for inputting the username and password, but I can't enable the submit button. Here is my code Code: "javascript: document.getElementById('user').value = '"+username+"'; document.getElementById('pass').value = '"+password+"'; document.getElementsById('submit').disabled = false;" Here is the code from the website concerning the submission form. Does anybody have any idea why this isn't working? Thank you for any help! Code: <form id="loginForm" name="query" method="post" action="/login/" enctype="application/x-www-form-urlencoded" autocomplete="off"> <p> <input type="hidden" name="one" value="wiscmail.wisc.edu" /> <input type="hidden" name="two" value="WiscMail Login" /> <input type="hidden" name="creds_from_greq" value="1" /> <input type="hidden" name="three" value="1" /> <input type="hidden" name="four" value="a5" /> <input type="hidden" name="five" value="GET" /> <input type="hidden" name="six" value="wiscmail.wisc.edu" /> <input type="hidden" name="seven" value="L2xvZ2lu" /> <input type="hidden" name="relay_url" value="https://wiscmail.wisc.edu/PubCookie.reply" /> <input type="hidden" name="eight" value="YXBwdXJsPXdpc2NtYWlsLndpc2MuZWR1L2xvZ2lu" /> <input type="hidden" name="fr" value="NFR" /> <input type="hidden" name="hostname" value="wiscmail.wisc.edu" /> <input type="hidden" name="nine" value="1" /> <input type="hidden" name="file" value="" /> <input type="hidden" name="flag" value="0" /> <input type="hidden" name="referer" value="(null)" /> <input type="hidden" name="post_stuff" value="" /> <input type="hidden" name="sess_re" value="0" /> <input type="hidden" name="pre_sess_tok" value="1714500944" /> <input type="hidden" name="first_kiss" value="1320154779-954466" /> <input type="hidden" name="pinit" value="0" /> <input type="hidden" name="reply" value="1" /> <input type="hidden" name="create_ts" value="1320154779" /> <label for="user">NetID</label><input type="text" id="user" name="user" size="20" tabindex="1" value="" /> </p> <p class="info"><a tabindex="4" href="/redirect/help-whatisit">What is my NetID?</a> (ie. bbadger)</p> <p><label for="pass">Password</label><input type="password" id="pass" name="pass" tabindex="2" maxlength="36" value="" /> </p> <p class="info"><a tabindex="5" href="/redirect/mynetid-reset">Forgot your password?</a></p> <p><label for="submit" class="invisible">Submit</label><input tabindex="3" class="submitButton" type="submit" id="submit" value="Login" /></p> </form> |