JavaScript - Simple Form But Not Working
Hi I am new to teaching JavaScript I need to show how to create a form with validation and feedback. I can get it to validate a text with a message, but I cannot get it to validate a set of radio buttons and conform the radio selected.
Code below- <html> <head> <title>Exam entry</title> <script language="javascript" type="text/javascript"> function validateForm() { var result = true; var msg=""; if (document.ExamEntry.name.value=="") { msg+="You must enter your name \n"; document.ExamEntry.name.focus(); document.getElementById('name').style.color="red"; result = false; if (document.ExamEntry.subject.value=="") { msg+="You must enter the subject \n"; document.ExamEntry.subject.focus(); document.getElementById('subject').style.color="red"; result = false; } } if(msg==""){ return result; } { alert(msg) return result; } } </script> </head> <body> <h1>Exam Entry Form</h1> <form name="ExamEntry" method="post" action="success.html"> <table width="50%" border="0"> <tr> <td id="name">Name</td> <td><input type="text" name="name" /></td> </tr> <tr> <td id="subject">Subject</td> <td><input type="text" name="subject" /></td> </tr> <tr> <td><input type="reset" name="Reset" value="Reset" /></td> </tr> </table> </form> <script type="text/javascript"> function lengthpass() { var s1=document.getElementById("password"); if(s1.value.length != 4) { alert("Please enter an exam number which is 4 characters long"); return false; } return true; } </script> </head> <body> <form onsubmit="return lengthpass();"> Exam Code <input type="text" id="password" name="password"> (Four Numbers) <br> <br> <h1>option button form validation</h1> <script type="text/javascript"> function option1() { var checkedop=null; var examop=document.getElementsByName("exam"); for (var i = 0;i<examop.length;i++) { if(examop[i].checked) { checkedop=examop[i]; } } if(checkedop==null) { alert("please select an exam"); return false; } { confirm("you have chosen"+checkedop.value+ "is this correct?"); } } </script> </head> <body> <form name="examtype" onsubmit="return option1();"> Select an exam type<br> <input type="radio" name = "exam"value= "GCSE"> GCSE<br> <input type="radio" name = "exam"value= "AS"> AS<br> <input type="radio" name = "exam"value= "A2"> A2<br> <input type="submit"name="submit"value="Submit Form"/> </form> </body> </html> Similar TutorialsI have entered the following in a file named welcome.htm when the form is submitted the Test! Alert comes up but the alert fields indicating the fields are empty do not appear. Please let me know if you can see why. Thanks Code: <html> <head> <script type="text/javascript"> alert('Test!'); function submitform() { alert('Test!'); alert('In fname is '+document.form.fname.value); if (document.form.fname.value == ""){ alert('The fnamefield is empty!'); return false; } if (document.form.age.value == ""){ alert('The fnamefield is empty!'); return false; } return true; } </script> </head> <body> <form id="myform" action="welcome.php" method="post" onSubmit="return submitform()" > Name: <input type="text" name="fname" /> Age: <input type="text" name="age" /> <input type="submit" /> </form> </body> </html> index.html Code: <html> <head> <title>:: wtmp</title> </head> <body> <p>Welcome to my page</p> <script type="text/javascript" src="file.js"></script> </body> </html> file.js Code: function one(p1, p2) { var j_text=p1+" "+p2; return j_text; } function two() { var rslt=one("Hi", "there!"); } document.write(rslt); var mainscrpt=one("Hello", "world!"); window.alert(mainscrpt); Simple random pic script that I found on the some other forum (I forget what it was) [CODE]var aryimages = new Array('images/pic/01.jpg', 'images/pic/37.jpg', 'images/pic/02.jpg', 'images/pic/family/08.jpg','images/pic/08.jpg', 'images/pic/food/03.jpg'); randompic.src = aryimages[Math.floor(Math.random() * aryimages.length)]; [CODE] code anchors to HTML markup [CODE]<img name="randompic" id="bg" />[CODE] it is working perfectly for Safari and Chrome. Nothing is showing for FF. Any suggestions appreciated. i am new in programming and learning it from lynda but i am trying to make a program which according to me is good enough but its not working and i am using free javascript editor for compiling and coding <!DOCTYPE html> <html> <body> <script> var a = 5; var b = 10; var c = 30; var d = a + b + c; alert("the value of d is" + d); </body> </html> Please tell me where is it i am making mistake Reply With Quote 01-08-2015, 11:56 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts You forgot the </script> ending tag. Hi. Just started fooling around with Ajax a bit back. So far, it's been fine. Today, though, I'm hitting some error I can't figure out. It *should* work, but it doesn't, and I have no idea why. Simple HTML form page with a bit of css. No big deal. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="livesearch.js"></script> <style type="text/css"> #livesearch { margin:0px; width:194px; } #txt1 { margin:0px; } </style> </head> <body> <form> <input type="text" id="txt1" size="30" onkeyup="showResult(this.value)" /> <div id="livesearch"></div> </form>type </body> </html> Problem area below in bold. Code: function showResult(str){ if (str.length == 0) { document.getElementById("livesearch").innerHTML = ""; document.getElementById("livesearch").style.border = "0px"; } var xmlhttp = getXMLHttpObject(); if (xmlhttp == null){ alert("Your browser does not support XML HTTP requests!"); return; } var url = "livesearch.php"; url = url + "?q=" + str; url = url + "&sid="+Math.random(); xmlhttp.onreadystatechange=stateChanged ; xmlhttp.open("GET", url, true); xmlhttp.send(null); } function stateChanged(){ if (xmlhttp.readyState == 4){ alert("Never seems to hit a readystate==4"); document.getElementById("livesearch").innerhtml = xmlhttp.responseText; document.getElementById("livesearch").style.border="1px solid #A5ACB2"; } } function getXMLHttpObject(){ //Current browsers if (window.XMLHttpRequest){ return new XMLHttpRequest(); } //For IE 5/6 if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); } else { return null; } } My PHP file is just a simple echo statement to see that it works to that point. It doesn't. For whatever reason, it never seems to hit readyState ==4. It enters the function (I've checked with alerts), but the if statement never comes out to be true. I have no idea why. I've combed over the code for errors for a while now and I can't find anything. Any ideas? Would be much obliged. I have a simple javascript for validating the radio buttons. But for what ever reason window.location does not redirect. this is my code: <SCRIPT LANGUAGE="JavaScript"> function checkRadio (frmName, rbGroupName) { var radios = document[frmName].elements[rbGroupName]; for (var i=0; i <radios.length; i++) { if (radios[i].checked) { return true; } } return false; } function valFrm() { if ( checkRadio("frm1","radio1")==true && checkRadio("frm1","radio2")==true) window.location="price.jsp"; else alert("You didnt select any price"); } </script> when i replace an alert with the redirect line it works fine. any help would be appreciated. Do you see anything wrong with this code... Code: <SCRIPT LANGUAGE="JavaScript"> if(GetCookie('upgrade8') != null) { location.href="cookie-in.html" } </SCRIPT> Also tried this (didn't work either)... Code: <SCRIPT LANGUAGE="JavaScript"> var readCookie = getCookie("upgrade"); if (readCookie("upgrade") != null){ // if cookie already exists, go to url document.location = "lesson1"; } else { // else go someplace else document.location = "lesson2"; }; </script> I've tried posting in both the head and body. Still can't get it to redirect. I'm a little new to this. Your help would be appreciated. thanks I have used this formula before, for some reason it isnt working properly. If the value is equal to 0 it will give an alert and return false. Then if you change the value of the drop down it won't let you submit. Does anyone see anything wrong? Code: <script type="text/javascript"> <!-- function validate_form ( ) { valid = true; if ( document.week_picks.blowout.value == "0" ) { alert ( "Please Select a Blowout" ); } return false; } //--> </script> Code: <form name="week_picks" method="post" action="confirm.php" onsubmit="return validate_form()"> <select id="blowout" name="blowout"> <option value="0">..</option> .... </select> Thanks for any help. I'm new to JavaScript, I just finished some basic things, like getAttribute, setAttribute, getElementByID etc. I understand that inline javascript isn't the best way to go, and all the JavaScript should go on an external JS file. I also know that you should be able to downgrade gracefully, allowing people whose browser do not/blocked javascript to still use the site. So I just want to do a simple go back function in an external javascript, however it's not exactly working. This is my JS code: Code: window.load = preparePage(); function preparePage(){ if (!document.getElementById()) return false; if (!document.getElementByTagName()) return false; var backDiv = document.getElementByID("back"); links.onclick = function(){ history.go(-1); return false; } } Here is my HTML code Code: <div class="back"> <a href="http://forum.thekks.net">Back</a> </div> Hi, I have a small script that tries to open a child window. if successful, it then closes the child window and redirects the parent window. If this process fails, there is no child window, no redirection. the script below works fine in FireFox but in Chrome, if the process fails, the redirection still happens. I'm new to JS would appreciate your help many thanks Code: <script type="text/javascript"> function openwindow(){ testWindow = window.open("popup.php","interaction"); setTimeout(function() { testWindow.close(); },1000); setTimeout(function() { window.location = "http://www.google.com"; },1000); } </script> Can someone please help with this code. The window is supposed to automatically scroll and move but it isn't working. (It was taken from a discontinued book called javascript in 24hrs) The javascript: Quote: var pos=100; function Scroll(){ if (!document.getElementById ) return; obj=document.getElementById("thetext"); pos -=1; if(pos < 0-obj.offsetHeight + 130) return; obj.style.top=pos; window.setTimeout("Scroll();", 30); } //start scrolling when the page loads window.onload=Scroll; the css: Quote: #thewindow{ position:relative; width:180px; height:150px; overflow:hidden; border:2px solid red; } #thetext{ position:absolute; width:170px; left:5px; top:100px; } the html: Quote: <!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>Untitled Document</title> <link rel="stylesheet" type="text/css" href="scroll.css" /> </head> <body> <h1> scrolling window example</h1> <p>This example shows a scrolling window created using javascript and the w3cdom.The red border window is actually a layer that shows a cliped portion of a larger layer"</p> <div id="thewindow"> <div id="thetext"> <p>This is the first paragraph of the scrolling message.The message is created with regular html</p> <p>Entries within the scrolling area can use any html tags.They can contain <a href="#">links</a></p> <p> No limit to the number of paragraphs that you can include here...</p> <ul> <li>For example you could format items using a bulleted list.</li> </ul> <p>The scrolling ends when the last part of tht scrolling text ids on the screen.You've reached the end.</p> </div> </div> </body> </html> Hi, I'm new to Javascript, so bear with me. I'm trying to use a script that replaces the contents of a div, based on div id's. I've gotten it to work how I want he http://www.sixnations.be/home1.html But can't get it to work here, and I'm not sure why: http://www.sixnations.be/menu.html Relevent code, Javascript: Code: function changeMenu(obj) { if (obj == 'food') { //alert('food'); var fd = document.getElementById('food'); fd.style.display = 'inline'; var fdi = document.getElementById('foodImages'); fdi.style.display = 'inline'; var dr = document.getElementById('drink'); dr.style.display = 'none'; var dri = document.getElementById('drinkImages'); dri.style.display = 'none'; } else if (obj == 'drink') { //alert('drink'); var fd = document.getElementById('food'); fd.style.display = 'none'; var fdi = document.getElementById('foodImages'); fdi.style.display = 'none'; var dr = document.getElementById('drink'); dr.style.display = 'inline'; var dri = document.getElementById('drinkImages'); dri.style.display = 'inline'; } } HTML (the data's tabular, hence the tables): CSS: Code: /*-- MAIN CONTENT --*/ .maincont { width: 930px; margin: auto; margin-top: 10px; overflow: auto; } .backcont { position: relative; width: 620px; margin-right: 296px; } .backrightcont { float: right; width: 296px; } .backtop, #info_En, #info_Fr, #info_It, #drink, #food, .backrighttop { background-image: url(../sixnations_images/backtop.png); background-repeat: repeat-x; background-position: bottom; border-right: 1px solid #21201C; border-left: 1px solid #21201C; width: 100%; height: 57px; text-align: center; } .backbottom { background-image: url(../sixnations_images/backbottom.png); } #info_En, #info_Fr, #info_It, #food, #drink { background-image: url(../sixnations_images/contentback4.png); background-repeat: repeat; padding-bottom: 30px; text-align: left; height: auto; } .backright, .backrighttop, .backrightbottom { width: 100%; } .backright { background-image: url(../sixnations_images/backright.png); } .backrighttop { background-image: url(../sixnations_images/backtop2.png); background-position: top; border: 0; } .backrightbottom { height: 50px; background-image: url(../sixnations_images/backrightbottom.png); border: 0; } .backrighttop h1, .backright h1 { font-family: 'Cambria', Palatino, Georgia, serif; font-size: 1.6em; color: #eee; line-height: 70px; text-align: center; } .backright h1 { width: 95%; line-height: normal; border-top:1px dashed #333; padding-top: 15px; } #noborder { border:0; } .twitter { margin-left: 15px; } #info_Fr, #info_It, #drink { display: none; } .lang, #info_En p, #info_En h1, #info_Fr p, #info_Fr h1, #info_It p, #info_It h1, #food h1, #food p, #drink h1, #drink p { width: 71%; margin: auto; } #info_En h1, #info_Fr h1, #info_It h1, #food h1, #drink h1 { font-family: 'GothamBook','Cambria', Georgia, serif; font-size: 2.5em; color: #000; padding-bottom: 10px; padding-top: 20px; margin-bottom: 15px; font-variant: small-caps; letter-spacing:.1em; text-align: center; border-bottom: 1px dashed #777; } .lang { margin-top: 35px; padding-top: 5px; border-top: 1px dashed #777; font-size: 1em; font-variant: small-caps; text-align: right; color: #777; } .lang a:hover { background-color: #777; color: #eee; } /*-- MAIN CONTENT -- SPORTS ON TV / FOOD & DRINK --*/ table.sports, table.menu1 { width: 90%; margin: auto; } table.sports thead td, table.menu1 thead td { font-size: 1.3em; font-variant: small-caps; color: #777; border-bottom: 1px dotted #999; width: 100%; padding-top: 20px; } table.sports tr, table.menu1 tr { border-bottom: 1px dotted #999; } table.menu1 tr { border: 0; } table.sports td { padding: 7px; } table.menu1 td { border:0; padding: 8px; } table.sports td.foot, table.sports td.rugby { background-image: url(../sixnations_images/ball1.png); background-repeat: no-repeat; background-position: bottom left; padding-left: 35px; } table.sports td.foot { background-image: url(../sixnations_images/ball2.png); } table.menu1 td.desc { color: #888; font-style: italic; padding-top: 0px; font-size: .9em; } Any ideas? 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 simple function to display an image when called, but if I try to rewrite the function to take the image as an argument, it stops working. I've looked at other function examples on the web but can't figure out what I am missing. Can anyone help? works: Code: <html> <script language="JavaScript"> var ImagePlusSign = '<img src="plus.jpg" name="slide" width="65" height="50"/>'; function FlashImagesThenWait() { document.getElementById("first").innerHTML = ImagePlusSign } setTimeout(FlashImagesThenWait, 1500); </script> <body>Hello. <div id="first"> </div> </body> </html> does NOT work : Code: <html> <script language="JavaScript"> var ImagePlusSign = '<img src="plus.jpg" name="slide" width="65" height="50"/>'; function FlashImagesThenWait(z) { document.getElementById("first").innerHTML = z } setTimeout(FlashImagesThenWait(ImagePlusSign), 1500); </script> <body>Hello. <div id="first"> </div> </body> </html> Please help if you can. My problem is that i have simple paypal form. When user select 10 accounts then below textbox shows amount to be paid. But when i click at paypal it again multiply with accounts and shows multiple amount at paypal page. For example if you select 10 then amount will be 18.5$ but after clicking at pay button it shows amount at paypal page $185.00 Code: <body> <form name="frm1" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="business" value="accounts@freelanceswitch.com"><br /> <strong>How Many Acounts you want</strong> <select name="quantity" onchange="calculate()" id="quantity"> <option value="5">5</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30">30</option> </select> <br /> <input type="hidden" name="no_shipping" value="0"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="lc" value="AU"> <input type="hidden" name="bn" value="PP-BuyNowBF"> <input type="hidden" name="return" value="http://net.tutsplus.com/payment-complete/"> <br /> <p>$ <input type="text" name="amount" id="amount" value="0" readonly="readonly"/> <br /> <input type="submit" value="Pay with PayPal!"> </p> </form> <script type="text/javascript"> function calculate (){ ac=document.getElementById('quantity').value; var z=1.85; total =ac*z; document.frm1.amount.value=total; } </script> </body> I am trying to have the page go to another page after clicking the submit button. is it possible to add to this function an else statement ? if form is filled then go to this page Code: function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); return false; } return true; } Hey all, I'm finishing up a project at work that has a web-based front end. Our tightly compressed schedule has left me with no time to properly learn Javascript, so I need some help. I have two pages that need client side validation... Page 1: several text inputs, one select, one textarea, and (maybe) a checkbox There are some complex things I could do here, but for now, I just need to make users behave. The textarea must have something in it, certain select options need a Yes/No popup, and if the checkbox is written to the page (ASP determines this) then it must be checked before certain select options are submitted. I could copy some examples I've found, but how do I ignore the checkbox when it doesn't exist? Page 2: two selects and a textarea Options must be selected and the textarea must have something in it. Straightforward, except that it's a dynamic form where each element has a name + i where i is a number that increments each time the user expands the form. Will wildcards work here? I know this looks like "do my homework" but any help would be greatly appreciated. This is desired to work in IE6, but if that can't happen, I can force an IE8 upgrade on everyone. Hey there world. I'm not one for making my own scripts, so not quite sure about the best way to go about doing this. I've got a form with 2 different sets of radio buttons. Upon submitting, I'd like to redirect the user to a certain page, based on the selections they made among the radio buttons. Thanks in advance. This form retrieves results from a mysql database. It works fine but when I click submit it shows the result only for a second. When I hold down submit the result stays there. How do I get the result to stay on the screen after I hit submit? Even better how do I get it to spit out results without having to hit a submit button or press enter? Code: <html> <head> <script type="text/javascript"> function showUser(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("getSpecs").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getspecs.php?model="+str,true); xmlhttp.send(); } </script> </head> <body> <form> Model: <input onchange="showUser(this.value)" /> <input type="submit" value="Submit" /> </form> <br /> <div id="getSpecs"><b>Product info listed here.</b></div> </body> </html> |