JavaScript - Calling Multiple Functions Help
Hello, so I'm trying to call multiple functions with onClick. It doesnt really work, just wondering why. Advice or tips would be nice, thank you guys for your time. By the way this is a project for school so the comments are for my professor
Code: <head> <title>Untitled Document</title> <script type="text/javascript"> //hello, this code doesn't work, I did it piece by piece so the bits work, but when I combined them, it stopped working function texter(newText){ var oldHTML = document.getElementById('outputPrompt').innerHTML; document.getElementById('outputPrompt').innerHTML = newText+"<br />"+oldHTML; console.log(newText); } // texter function from class function menuMain(){ var userInput = document.getElementById('input').value; var mainMenu; if (userInput == "3"){ mainMenu = menuThree(); } else if (userInput== "2") { mainMenu = menuTwo(); } else if (userInput== "1") { mainMenu = menuOne(); } texter(mainMenu) } //going to the functions by calling them function menuOne(){ var userInput = document.getElementById('input').value; if (userInput.length == 0){ texter("You need to enter something in the input box"); } else { texter("the string has been saved"); } } // if the length is equal to zero then there was nothing inputted function menuTwo() { var userInput = document.getElementById('input').value; var theArray = userInput.split(/\s|\n|\r/); //split string into words array i looked up the regex on coding forums //also had help to create this from coding forums var WordsFound = [i]; for (var i=0; i<theArray.length-0; i++) { if (theArray[i].length < 5) { WordsFound.push('eep- '+theArray[i]); } else { if (theArray[i].length > 5) { WordsFound.push(theArrray[i]+' -zzz'); } else { WordsFound.push(theArray[i]); } } } document.getElementById('outputPrompt').innerHTML = WordsFound.join('<br>'); } // if the array length is less than five the word will push it onto the array // vise versa with the array length being more than five //then i join the word with the array function menuThree() { var userInput = document.getElementById('outputPrompt').reset(); } //reset the output function combineFunctions() { menuMain(); menuOne(); menuTwo(); menuThree(); } // combining the functions into one function so i can call it on onclick function cleartext(){ document.getElementById('input').value=""; } </script> </head> <body> <h1>RoboSpeek</h1> <textarea type='text' id='input' onfocus="cleartext()" cols="40"rows="10" wrap="physical"> Please enter 1,2,3 or Exit</textarea><br /> <input type='button' onclick='combineFunctions()' value='submit'/> <p id='outputPrompt'>Please enter 1,2,3 or exit only</b> </p> </body> </html> Similar TutorialsHi, I'm very new to Javascript and I need some help on calling some existing functions. What i want to do is create a new function to call the first test1 and then call test2 to turn on the checkbox. i hope this isn't confusing. Code: function test1(inStore,onSale,newItem) { var daURL; if (inStore==true) { BSSetStoreOnly(true); daURL="s-2-Online-Store.aspx?ms=bsm1"; if (onSale==true){ daURL+='&SaleOnly=1'; } } else { BSSetStoreOnly(false); daURL="s-1-Our-Products.aspx?ms=bsm1"; if(newItem==true) { daURL+='&NewOnly=1'; } } location=daURL; } function test2() { var pInc; chk=document.getElementById("chkAll"); pInc=readCookie("overrideURL"); if (pInc==null) { pInc=0; } if (pInc==0) { chk.checked=false; } else { chk.checked=true; } } function callingTest1Test2 { } Hello all here is a more intelligent question. This one is just on an exercise I am doing. I have to call a function using parameter values. my main function is this Code: function showResults(race,name,party,votes) or just function showResults in the next lines below i have to call the function is this the right way Code: <script type="text/javascript"> { showResults=("race[0],name1,party1,votes1"); } </script> or should it be without the { and } like this? Code: script type="text/javascript"> showResults=("race[0],name1,party1,votes1"); </script> or is it like this Code: script type="text/javascript"> showResults(race[0],name1,party1,votes1); </script> Thanks all, what would be the proper method Thanks Hi, I have an embarrassingly similar problem to the last time I was here. I have a google map that generates links and checkboxes from an xml file and puts them in a sidebar. The links open infowindows and the checkboxes show or hide lines on the map. Which all works ok. But (like last time) I have another function that puts arrowheads along those lines to indicate directionality. The code which turns the lines off and on looks like this: Code: function togglePoly(poly_num) { if (document.getElementById('poly'+poly_num)) { if (document.getElementById('poly'+poly_num).checked) { gpolys[poly_num].show(); } else { gpolys[poly_num].hide(); } } } and the sidebar creation code is like this: Code: sidebar_html += '<input type="checkbox" id="poly'+poly_num+'" checked="checked" onclick="togglePoly('+poly_num+');">' + label + '<br />'; so I was thinking that I could just call the functions that put the arrows on the lines like this, to show/hide them along with their respective lines: Code: function togglePoly(poly_num,category) { if (document.getElementById('poly'+poly_num)) { if (document.getElementById('poly'+poly_num+category).checked) { gpolys[poly_num].show(); show(category); } else { gpolys[poly_num].hide(); hide(category); } } } and change the sidebar code to this: Code: sidebar_html += '<input type="checkbox" id="poly'+poly_num+'" checked="checked" onclick="togglePoly('+poly_num+','+category+');">' + label + '<br />'; and all would be well. But all is not well - I get an error saying that my category is not defined in the sidebar_html line. If you want to see it in action, here's without trying to toggle the arrows on and off: http://xelawho.com/map/busroutes2.htm and here's the version with the category undefined error: http://xelawho.com/map/busroutes3.htm can anybody help me out here? thanks in advance. i now have <a href=""javascript:NewCssCal('repaymentdate','ddMMyyyy')""> how can I have this after it calls teh newcsscal and fills in the textbox call another function. (i don't want to add it to newcsscal as that's used in multiple locations and I only need to call this function in 1 location. i have a script that will let you know what the date is.. as well as a countdown to thanksgiving.. it is called tday.js Code: function showDate() { thisDate = new Date(); var thisWDay=thisDate.getDay(); var thisDay=thisDate.getDate(); var thisMonth=thisDate.getMonth(); var thisYear=thisDate.getFullYear(); var mName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October","November", "December"); var wdName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); return wdName[thisWDay]+", "+mName[thisMonth]+" "+thisDay+", "+thisYear; } function calcThanksgiving(year) { var delta = year - 1900; var tday = delta % 12; tday = (tday + Math.floor(tday/4) + Math.floor(delta/12)) % 7; return (tday == 0)? 28 : (29 - tday); } function daysToThanksgiving() { var thisDate = new Date(); var year = thisDate.getFullYear(); var tday = calcThanksgiving(year); var tdate = new Date("November "+tday+", "+year); if (thisDate > tdate) { year++; tday = calcThanksgiving(year); tdate = new Date("November "+tday+", "+year); } return Math.floor((tdate-thisDate)/(1000*60*60*24)); } so now i have to call upon this script to print "today is ..the date.. . <br> there are ..days... till thanksgiving im kind of new of calling on javascript files but i came up with Code: <SCRIPT LANGUAGE="JavaScript" SRC="tday.js"> </SCRIPT><script type="text/javascript"> document.write('Today is: '+showDate()+'. There are '+daysToThansgiving()+' days until Thanksgiving.'); </script> and it doesnt seem to be working. Hi, I would like to do something like this: Code: function searchLocations(count) { var found = false; var input = document.getElementById('autocomplete').value; var inp = input.toLowerCase(); var count = 0; for (var j = 0; j < gmarkers.length; j++) { gmarkers[j].hide(); var str=gmarkers[j].myname.toLowerCase(); var patt1=inp; if (str.match(patt1)) { found = true; gmarkers[j].show(); count++; } } if (count==1) myclick(j); if (count>1) centerZoom(); if ( ! found ) alert("No matches found. Please check your spelling or refine your search."); } on this page here, but the functions - myclick(j); and centerZoom(); aren't getting called. I tried it with switches here, but that only made things worse. I know the functions work because if I put them two } up, they get called, but that takes them out of the if statements. Those if (count...) statements have to be where they are so that "count" will get the right value. Any ideas? Hi, i was wondering if there was a way to call a nested javascript function directly, from outside of the function its nested in? for example, if i have the following functions: Code: <script type="text/javascript"> var test = function(){ var testInner = function(){ alert('testInner'); } } </script> can i then call the 'testInner' function directly from an onclick action something like this: Code: <a href="#" onclick="test.testInner()">TEST JS</a><br /><br /> That code is obviously not working for me, but is there something similar to what ive shown here that will work? Thanks in advanced I am currently designing a table as such Code: ___________________________ | TABLE | | | FRAME A |___________________________| | last row clicked | FRAME B |___________________________| the top frame is a table and the bottom frame contains the last row clicked called through onclick. question: if frame B is a php file with a javascript object, how do i call the javascript object's function to print the data? here is what i have so far index.html //this is the source code for the site Code: <html> <frameset rows = "60%, 40%"> <frame src = "table_driver.php" name = "A" id = "FRAME1"> <frame src = "bottom_row.php" name = "B" id = "FRAME2"> </frameset> </html> printJSTable() //prints the table shown in frame A Code: function printJSTable() { echo '<script src = "java_script.js"></script>'; echo '<script src="sorttable.js"></script>'; echo '<table class = "sortable" id = "myTable" border = "1">'; echo '<thead id = "header"><tr>'; foreach($this->columns as $header => $order) { echo '<th>'; echo $header; echo '</th>'; } echo '</tr></thead><tbody>'; $counter = 0; for($i = 0; $i < $this->numRows; $i++) { //IMPORTANT changeRow(this) is JS call echo '<tr onclick = "changeRow(this)" onmouseover = "mouseOver(this)" onmouseout = "mouseOut(this)">'; foreach($this->data[$i] as $key => $value) { echo '<td>'; if($value!="") echo $value; else { echo ''; } $counter++; echo '</td>'; } echo '</tr>'; } echo '</tbody></table>'; echo '<form><input id = "'.$this->numRows.'"type = "button" value = "add row" onclick = "addRow(id)"></form>'; } and this is changeRow(this) which is supposed to create the table in frame b Code: //populates headersArr and rowArr correctly parent.B.obj = new TableData(headersArr, rowArr); parent.B.obj.printTable(); here are the function definitions for TableData Code: function TableData(headers, row) { this.headerArr = headers; this.rowArr = row; } TableData.prorotype.printTable = function() { for(i=0; i<this.headerArr.length; i++) { document.write('<tr><th>'); document.write(this.headerArr[i]); document.write('</th><td>'); document.write(this.rowArr[i]); document.write('</td></tr>'); } } and then, finally, this is the php file for the bottom frame Code: <html> <head> <link rel = "stylesheet" type = "text/css" href = "style.css"/> <script type = "text/javascript" src="java_script.js"></script> </head> <body> <script> obj = new TableData; </script> </body> </html> what i want to do is populate the variable obj from ^ (bottom_row.php) and then use the print function to print it out. right now it is populating correclt,y but i cant get it to print. The error console says that Value undefined (result of expression parent.B.obj.printTable) is not object. ?? sry for all the code! just didnt want to leave anything out thanks! so, I can pass a value from a select list to another function which then decides which function to call, but I want to cut out the middleman, and make the values the function calls, and call them directly on the onchange... I imagine something like this: Code: <select id="select" onchange="this.value"> <option selected value="function1()">Funtion 1</option> <option value="function2()">Function 2</option> <option value="function3()">Function 3</option> </select> is it possible? I still can't understand very well when to use and when NOT to use parenthesis when calling/using methods and functions. Case 1: Where I commented "// No parenthesis.", could someone explain why not. And at the end, where the commen reads "// Parenthesis. ? Code: /* This function will be used as a method inside the objects. */ function getPayment() { thePayment = 250; thePayment += (this.seats == 'leather') ? 100 : 50; thePayment += (this.engine == 'V-8') ? 150 : 75; thePayment += (this.radio == 'CD Player') ? 30 : 10; return thePayment; } /* Object Constructor (prototype of the object). */ function car(seats, engine, radio) { this.seats = seats; this.engine = engine; this.radio = radio; this.payments = getPayment; // No parenthesis. } /* Creates an instance called 'my_car' out of the 'car' object. */ var my_car = new car('cloth', 'V-6', 'Tape Deck'); /* Object Initializer - automatically instantiates the object. */ var carObj = { seats: 'leather', engine: 'V-8', radio: 'CD Player', payments: getPayment // No parenthesis. No comma after last item. } // Firebug... console.log(my_car.payments()); // Parenthesis. console.log(carObj.payments()); // Parenthesis. /* vim:set foldmethod=indent: */ Case 2: Please look at the comments. Code: window.onload = initAll; // Why no () here? function initAll() { window.doStuff(); // Why () here? } function doStuff() { var msg_text = 'I love you so much!'; var msg_link = window.document.getElementById('msg_link'); console.log(msg_link); var msg_box = window.document.getElementById('msg_box'); msg_link.onmouseover = function() { //msg_box.value = msg_text; msg_box.setAttribute('value', 'May the force be with you!'); }; msg_link.onmouseout = function() { /* This works in ie. */ //msg_box.value = ''; /* Doesn't work in ie7 (and probably not in ie6 either). * Perhaps the code above is reasonable. */ msg_box.removeAttribute('value'); } } /* vim:set foldmethod=indent: */ Hello, Our website is built in ASP.NET and uses a content management system. The CMS came with a wealth of JavaScript files and I decided to use one of these files for form validation. Although the file is over 2,300 lines, from what I can tell it is supposed to return true if the form is valid and false otherwise. The problem is that a function inside that file seems to get to a certain point, and somehow quit and return true no matter if the form is valid or not. I am calling this JS from an ASP.NET button control. When the button is clicked, a JS function ValidateForm(document.forms[0]) is called. My ValidateForm function calls another function inside the JS file (which calls another, and another...). No matter what, when that second function is called and executed, code execution stops at some point and the form submits (postbacks). I can see that the validation is working just before the postback, but it is not preventing the form from being submitted, and it also stops executing any code after it. Here is my code: ASP: Code: <asp:Button ID="SubmitBtn" runat="server" Text="Submit Form" CausesValidation="false" CssClass="submit_button" OnClientClick="FmValidate(document.forms[0]); return false;" OnClick="SubmitBtn_Click" /> My Javascript: Code: function FmValidate(formObj) { var strError = ''; var e = null; if (strError == '' && 'function' == typeof design_validateHtmlForm) { alert('before'); // this line causes execution to stop - located in external JS file // code states "Returns first invalid element, or null." e = design_validateHtmlForm(formObj); alert("e is " + e); if (e) { strError = e.title; } return false; } } In my ASP.NET button, changing the OnClientClick method to "return false" will prevent form submission, but "return FmValidate(formObj);" will not if that function calls design_validateHtmlForm(formObj). I receive the message box saying "before" but I never receive the second one. I have debugged using Fire bug, but the code seems to cycle through each element on the page and stepping through the code is not realistic (I have done so for 20-minute stretches). I am wondering if anyone has any ideas what code I could look for that would stop execution and return true no matter what, or how I could begin debugging this monster. Im having problems with this code working as it should. the top banner is supposed to cycle the second banner is supposed to be random the 3rd is a slide show that is supposed to work in order Everything works in random order. Any help would be appreciated. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>HTML and JavaScript</title> <script type="text/javascript"> var imgArray=new Array(4); imgArray[0]= new Image; imgArray[0].src="lions3.gif"; imgArray[1]= new Image; imgArray[1].src="tigers3.gif"; imgArray[2]= new Image; imgArray[2].src="bears3.gif"; imgArray[3]= new Image; imgArray[3].src="ohmy3.gif"; var index=0 function startup() { cycle(); select(); return } </script> <script type="text/javascript"> function cycle() { document.banner.src= imgArray[index].src; index++; if (index==4) { index=0; } setTimeout("cycle()",1000); return; } </script> <script type="text/javascript"> function select() { index=Math.floor(Math.random()*4); document.banner1.src=imgArray[index].src; setTimeout("select()",2000); return; } </script> <script type="text/javascript"> function doBack() { if (index>0) { index--; document.slideshow.src=imgArray[index].src; } return; } function doNext() { if (index<3) { index++; document.slideshow.src=imgArray[index].src; } return; } </script> </head> <body onload="startup()";> <center><img name="banner" src="lions3.gif" id="banner"> <div align="center"><img name="banner1" src="tigers3.gif" id="banner1"></div> </center> <div align="center"> <h2>My JavaScript Slideshow</h2> <p><img name="slideshow" src="lions3.gif"></p> <p><a href="javascript:doBack()">Back</a> * * * * <a href="javascript:doNext()">Next</a></p> </div> </body> </html> Hi, i have got this piece of code: Code: var f = []; var x = 1; f[0] = function(){alert(x);}; var x = 2; f[1] = function(){alert(x);}; f[0](); f[1](); I would like to display the number 1 at first and then 2. but this code produces number 2 for both alerts. I was able to achieve what i want with "new" constructor when creating functions but this is not a good practice and after all i am passing these functions as an event handler and it cant be done with "new" keyword because it is throwing error. I think there are some solutions with arrays e.g the x would be an array of numbers, but i don't like it. Am i missing something important? Thanks for your replies. hey all, I am now at the point of being able to see the light at the end of the tunnel (woot!). After a lot of help from you guys I have tackled my RSS feed issue (sort of) to the point where i have a page that does basically what I need it to (http://www.the-rational-investor.com/test042311.php/). I now need to incorporate this java script developed into the big picture and of course, there seems to be problems. Since I know it works on its own, I must be running into problems getting all the functions working simultaneously and I once again need to call on the board's brilliance in figuring out what I am doing wrong....so here it goes I have taken out a lot of unnecessary code just to focus on the java script. Yes there is PHP code embedded but please don't beat up on me too much for that. here is the main page code: Code: <head> <? // function for onmouseover to do ALL THREE tasks // ?> <script type="text/javascript"> function doChanges(y){ var z= y; var imagevar = myimages[z]; var imagethis = this.href; changeimage(imagevar,imagethis); changetext(z); var x=y; var rssfeedvar = myArrayRssFeed[x]; showRSS(rssfeedvar); } </script> <? // First Task - function for onmouseover TEXT // ?> <script type="text/javascript"> function changetext(z){ var s= z; var textchangeEntries = myArrayEntries[s]; var id = document.getElementById("DBtext_large"); id.innerHTML=textchangeEntries; var textchangeWebadr = myArrayWebadr[s]; var id = document.getElementById("DBtext_link").getElementsByTagName('a')[0]; id.nodeValue=textchangeWebadr; id.setAttribute('href',textchangeWebadr); id.innerHTML=textchangeWebadr; var textchangeEmail = myArrayEmail[s]; var id = document.getElementById("DBtext_email"); id.innerHTML=textchangeEmail; var textchangeRssUrl = myArrayRssUrl[s]; var id = document.getElementById("DBtext_rssUrl"); id.innerHTML=textchangeRssUrl; var textchangeRssFeed = myArrayRssFeed[s]; var id = document.getElementById("DBtext_rssFeed"); id.innerHTML=textchangeRssFeed; } </script> <? // Second Task - functions for onmouseover IMAGES // ?> <script type="text/javascript"> function changeimage(towhat,url){ if (document.images){ document.images.targetimage.src=towhat.src gotolink=url } } function warp(){ window.location=gotolink } </script> <script type="text/javascript"> var myArrayEntries = ["<?php echo implode('","',$map_entry_array);?>"]; var myArrayWebadr = ["<?php echo implode('","',$web_adr_array);?>"]; var myArrayEmail = ["<?php echo implode('","',$email_adr_array);?>"]; var myArrayRssUrl = ["<?php echo implode('","',$rss_url_array);?>"]; var myArrayRssFeed = ["<?php echo implode('","',$rss_feed_array);?>"]; var myimages=new Array() var gotolink="#" function preloadimages(){ for (i=0;i<preloadimages.arguments.length;i++){ myimages[i]=new Image() myimages[i].src=preloadimages.arguments[i] } } preloadimages(<?echo("$qs1");?>); </script> <? // Third Task - functions for onmouseover RSS FEED // ?> <script type="text/javascript"> function showRSS(str) { if (str.length==0) { document.getElementById("rssOutput").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("rssOutput").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getrss.php?q="+str,true); xmlhttp.send(); } </script> </head> getrss.php is unchanged Code: <?php //get the q parameter from URL $q=$_GET["q"]; //find out which feed was selected if($q=="http://twitter.com/statuses/user_timeline/53777622.rss") { $xml=("http://twitter.com/statuses/user_timeline/53777622.rss"); } elseif($q=="http://www.autisticsociety.org/rss/news2.php") { $xml=("http://www.autisticsociety.org/rss/news2.php"); } elseif($q=="http://sableresources.com/news/") { $xml=("http://sableresources.com/news/"); } elseif($q=="http://www.northgateminerals.com/rss/pressrelease.aspx") { $xml=("http://www.northgateminerals.com/rss/pressrelease.aspx"); } elseif($q=="http://www.thompsoncreekmetals.com/s/RSS.asp?MaxItems=4&Version=RSS2.0") { $xml=("http://www.thompsoncreekmetals.com/s/RSS.asp?MaxItems=4&Version=RSS2.0"); } elseif($q=="http://www.imperialmetals.com/s/RSS.asp?MaxItems=10&Version=RSS2.0") { $xml=("http://www.imperialmetals.com/s/RSS.asp?MaxItems=10&Version=RSS2.0"); } elseif($q=="http://investorrelations.walterenergy.com/corporate.rss?c=71978&Rule=Cat=news~subcat=ALL") { $xml=("http://investorrelations.walterenergy.com/corporate.rss?c=71978&Rule=Cat=news~subcat=ALL"); } elseif($q=="http://www.teck.com/framework/comp.aspx?portalName=tc&id=133613&rss=1") { $xml=("http://www.teck.com/framework/comp.aspx?portalName=tc&id=133613&rss=1"); } elseif($q=="http://www.tasekomines.com/tko/RSS.asp?MaxItems=10&Version=RSS2.0") { $xml=("http://www.tasekomines.com/tko/RSS.asp?MaxItems=10&Version=RSS2.0"); } elseif($q=="http://www.rocamines.com/s/RSS.asp?MaxItems=10&Version=RSS2.0") { $xml=("http://www.rocamines.com/s/RSS.asp?MaxItems=10&Version=RSS2.0"); } elseif($q=="http://www.breakwater.ca/rss/pressrelease.aspx") { $xml=("http://www.breakwater.ca/rss/pressrelease.aspx"); } $xmlDoc = new DOMDocument(); $xmlDoc->load($xml); //get elements from "<channel>" $channel=$xmlDoc->getElementsByTagName('channel')->item(0); $channel_title = $channel->getElementsByTagName('title') ->item(0)->childNodes->item(0)->nodeValue; $channel_link = $channel->getElementsByTagName('link') ->item(0)->childNodes->item(0)->nodeValue; $channel_desc = $channel->getElementsByTagName('description') ->item(0)->childNodes->item(0)->nodeValue; //output elements from "<channel>" echo("<p><a href='" . $channel_link . "'>" . $channel_title . "</a>"); echo("<br />"); echo($channel_desc . "</p>"); //get and output "<item>" elements $x=$xmlDoc->getElementsByTagName('item'); for ($i=0; $i<=2; $i++) { $item_title=$x->item($i)->getElementsByTagName('title') ->item(0)->childNodes->item(0)->nodeValue; $item_link=$x->item($i)->getElementsByTagName('link') ->item(0)->childNodes->item(0)->nodeValue; $item_desc=$x->item($i)->getElementsByTagName('description') ->item(0)->childNodes->item(0)->nodeValue; echo ("<p><a href='" . $item_link . "'>" . $item_title . "</a>"); echo ("<br />"); echo ($item_desc . "</p>"); } ?> Thanks again for all your wonderful help and all the best to you and your families on this Easter weekend, Brian Ok, so basically what I've got is a button which when clicked, "opens" a section of the page. I also need the button to "jump" to this section of the page, because it's below the current content and won't be visible. What I've got so far is ... Javascript <script language="javascript"> function toggle() { var ele = document.getElementById("toggleText"); var text = document.getElementById("displayText"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "show"; } else { ele.style.display = "block"; text.innerHTML = "hide"; location="#ordernow" } } function moveWindow(){window.location.hash="ordernow"} </script> HTML ... (The rest of the form is up here) <input name="Button" type="button" class="button" value="Order Now" onclick="toggle();moveWindow()" id="displayText"/> ... (This is the start of the section that becomes visible, along with the anchor point which is highlighted in red.) <div id="toggleText" style="display: none"> <a name="ordernow"></a> <fieldset> <legend>Order Confirmation</legend> <div class="standardinput"> <label>Company:</label> <input name="Company" type="text" class="textinput" id="Company" /> </div> If I put two separate buttons, both functions will work. Basically I need them to be on the same function, not sure how to do that? Thanks so much in advance =) Hello, I am new to javascript and have managed to create the below form with few fields validation that is working. I also have an email format validation function which is not working. Any help would be hightly appreciated. Below with the form with the javascript <html> <script language="JavaScript" type="text/javascript"> <!-- var radio_selection=""; function checkform ( form ) { **// ** START ** **if (form.name.value == "") { ****alert( "Please enter your name." ); ****form.name.focus(); ****return false; **} if (form.Phone.value == "") { ****alert( "Please enter your phone number." ); ****form.Phone.focus(); ****return false; **} **if (form.email.value == "") { ****alert( "Please enter your email." ); ****form.email.focus(); ****return false; } if (radio_selection=="") { alert("Please indicate your attendance."); return false; } *// ** END ** **return true; } function checkEmail(form) { if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value)) { return true; } alert("Invalid E-mail Address! Please re-enter."); return false; } //--> </script> <body> <form style="font-family:lucida calligraphy;font-size:120%;color:maroon" action="invitees.php" method="post" onsubmit="return checkform(this);checkEmail(this.email.value);"> <table cellspacing="5" cellpadding="5" border="0"> <tr> <td valign="top" > <style="font-family:lucida calligraphy;font-size:100%;color:maroon">Name: </td> <td valign="top"> <input type="text" name="name" id="name" size="40" value="" /> </td> </tr> <tr> <td valign="top"> Phone Number </td> <td valign="top"> <input type="text" name="Phone" id="Phone" size="40" value="" /> </td> </tr> <tr> <td valign="top"> Email Address: </td> <td valign="top"> <input type="text" name="email" id="email" size="40" value="" /> </td> </tr> <tr> <td valign="top"> Will You Attend </td> <td valign="top"> <input type="radio" name="Attendance" id="Attendance_0" value="Yes" onClick="radio_selection='yes'" /> Yes <input type="radio" name="Attendance" id="Attendance_1" value="No" onClick="radio_selection='no'"/> No <input type="radio" name="Attendance" id="Attendance_2" value="Maybe" onClick="radio_selection='maybe'"/> Maybe<br/> </td> </tr> <tr> <td valign="top"> Adults <select name ="adults" id="Adults" > <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> </td> <td valign="top"> Kids <select name="kids" id="Kids" > <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> </td> </tr> <tr> <td valign="top"> Post a Note </td> <td valign="top"> <textarea name="Note" id="Note" rows="6" cols="35"></textarea> </td> </tr> <tr> <td colspan="3" align="center"> <input type="submit" value=" Submit Form " /> </td> </tr> </table> </form> </html></body> I posted a thread a few days ago concerning a bit of javascript code to make checking one checkbox clear another one. I got some great, prompt help. However, I just got back to working on that web page, and realized that the functions only work on the first form on my web page. I have many forms and they are actively named using php. Here's are the functions (these works for just the first form on the page): Code: <script type="text/javascript"> function undo_Changes() { if (document.getElementById("Complete").checked==true) { document.getElementById("Needs_Change").checked=false; } } function undo_Complete() { if (document.getElementById("Needs_Change").checked==true) { document.getElementById("Complete").checked=false; } } </script> I call them from the checkboxes involved: Code: <input name="Complete" id="Complete" value="Yes" <?php echo($Complete=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onChange="this.style.color='#FF0000'" onClick="undo_Changes()"> <input name="Needs_Change" id="Needs_Change" value="Yes" <?php echo($Needs_Change=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onClick="undo_Complete()"> Here's how my forms are named: Code: <?php $DocName = "Schedule".$count; ?> <form name="<?php echo $DocName; ?>" action="ScheduleCode.php" method="post" id="<?php echo $DocName; ?>"> I've tried the following and it doesn't work at all: Code: <script type="text/javascript"> function undo_Changes(myForm) { if (myForm.getElementById("Complete").checked==true) { myForm.getElementById("Needs_Change").checked=false; } } function undo_Complete(myForm) { if (myForm.getElementById("Needs_Change").checked==true) { myForm.getElementById("Complete").checked=false; } } </script> <input name="Complete" id="Complete" value="Yes" <?php echo($Complete=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onChange="this.style.color='#FF0000'" onClick="undo_Changes(this.form)"> <input name="Needs_Change" id="Needs_Change" value="Yes" <?php echo($Needs_Change=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onClick="undo_Complete(this.form)"> Thanks for any help. Lisa I am having trouble running multiple windows.onload functions and having trouble how to implement them. I found a couple articles on but couldn't really get them to work. Here are the two functions I'm trying to load: Code: <script type="text/javascript"> //<![CDATA[ window.onload=function(){ //randomize order of contents with DIV class="group1" randomizeContent("group1") randomizeContent("group2") randomizeContent("group3") } //]]> </script> Code: <script type="text/javascript"> function showHideMore(obj) { var contObj = obj.parentNode.getElementsByTagName('div')[0]; var status = (contObj.style.display == 'block')? 'none' : 'block' contObj.style.display = status; <!-- obj.innerHTML = (status == 'block')? 'Show less' : 'Show more'; --> obj.curPic = (obj.curPic == 0)? 1 : 0; obj.style.backgroundImage = 'url("'+plusMinusPics[obj.curPic]+'")'; } window.onload=function(){ plusMinusPics = ['plus.png','minus.png']; oMoreLessSpans = document.getElementById('list1').getElementsByTagName('span'); for(i=0; i < oMoreLessSpans.length; i++){ oMoreLessSpans[i].curPic = 0; oMoreLessSpans[i].style.background = 'url("'+plusMinusPics[oMoreLessSpans[i].curPic]+'") no-repeat 0 50%'; oMoreLessSpans[i].onclick=function(){showHideMore(this);} } } </script> Every time I try to use the notEmpty function with an onClick event, the validation stops working. I also need to implement a pop-up that gives me this information - alert("Your name is"+firstname +lastname", your G.P.A. is "+gpa "your phone number is "+phone); anytime I try to use it as a function with onClick, it interrupts the validation as well. Please help! I'm completely lost. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- Date: 11/12/2014 Filename: validator.html Supporting files: None --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Validator</title> <script type='text/javascript'> function formValidator(){ // Make quick references to our fields var firstname = document.getElementById('firstname'); var lastname = document.getElementById('lastname'); var gpa = document.getElementById('gpa'); var phone = document.getElementById('phone'); // Check each input in the order that it appears in the form! if(isAlphabet(firstname, "Please enter only letters for your first name")){ if(isAlphabet(lastname, "Please enter only letters for your last name")){ if(gpaValidator(gpa, "Please enter a valid G.P.A.")){ if(phoneValidator(phone, "Please put a valid phone number")){ return true; } } } } return false; } // Functions that check values in input fields! function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); // set the focus to this input return false; } return true; } function isAlphabet(elem, helperMsg){ var alphaExp = /^[a-zA-Z]+$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function gpaValidator(elem, helperMsg){ var alphaExp = /^([0-3](\.\d\d?)?|4(.00?)?)$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function phoneValidator(elem, helperMsg){ var alphaExp = /\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } </script> </head> <body> <form onsubmit='return formValidator()'> <fieldset> <legend>Personal information:</legend><br /> First Name: <input type='text' id='firstname' /><br /> Last Name: <input type='text' id='lastname' /><br /> G.P.A.: <input type='text' id='gpa' /><br /> Phone Number: <input type='text' id='phone' /><br /> <input type='submit' value='Submit' /> </form> </body> </html> Hello, Ok so the following code works. Code: function myFunction(myName) { alert("You are "+myName); } callFunction = "myFunction"; parameter = "Joe"; window[callFunction](parameter); However this code doesn't work: Code: function myFunction(myName, myAge) { alert("You are "+myName+" and "+myAge+" years old."); } callFunction = "myFunction"; parameter = "Bill,15"; parameter = parameter.split(","); window[callFunction](parameter); The above code alerts: "You are Bill,15 and undefined years old." Thanks for the help! |