JavaScript - Getelementbyid And Table Id Issue
Hey All,
I've got the following few lines of code that set some radio button values within a table: Code: document.getElementById('Price' + lineNumber).value = price; document.getElementById('Term' + lineNumber).value=term; document.getElementById('Type' + lineNumber).value=Type; I also have a table with id="example" that these input fields sit within. In Firefox, this works without an issue, but in IE, I get a 'document.getElementById(...) is null or not an object' error. How can I fix the above code to work with a table ID? I need to keep the table ID present for some other JS code that works off of it. Any help would be greatly appreciated. Thanks. Similar TutorialsI'm working on a web site: http://84.9.221.75/domains/backingtr...usicindex.html I'm trying to get the Javascript that controls the scrolling text to scroll on both the left and right sides.....right now it only scrolls on the left, due to the use of getElementById() from what i can see.... So I'm trying to make the javascript see all references to the ID in the document, and make the right panel div scroll as well, but I'm not having any luck.... I have a very basic understanding of Javascript, so I need a little help here guys...thanks.. I need some help making a button function do what I want it to do. I have a index page that shows all my projects in a table with tabs you can click on that shows certain parts of all projects (ie tab for finance, project title). For now, every single project is shown on the website when you bring up the index page. Also the top part of the page, where I have the issue, there is a drop down list of all the projects with a "GO" button next to it. I want a user to be able to scroll down that list and click the button and the page would only show that particular project, ie choosing the tabs to go back and forth dealing with the one project only. The tabs are each its own .php file with the exact coding in all of them. Here is what I have on my index page that I need help on in order to make this button work. Any help will be appreciated. My main issue is this coding Code: <input type="button" value="GO" name="proj_list" /> But here is the whole index page Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>2009 Events</title> <link rel="stylesheet" type="text/css" href="../css/dddropdownpanel.css" /> <link rel="stylesheet" type="text/css" href="../css/sortable.css" /> <link rel="stylesheet" type="text/css" href="../css/datepicker.css" /> <link rel="stylesheet" type="text/css" href="../css/main.css" /> <link rel="stylesheet" type="text/css" href="../css/chromestyle.css" /> <link rel="stylesheet" type="text/css" href="../css/ajaxtabs.css" /> <script type="text/javascript" src="../includes/datepicker.js"></script> <script language="javascript" src="../includes/tablesort.js"></script> <script language="javascript" src="../includes/tableActions.js"></script> <script language="javascript" src="../includes/chrome.js"></script> <script language="javascript" src="../includes/ajaxtabs.js"></script> </head> <body> <div id="container"> <div id="header"> <?php include("../header.php"); ?> </div> <div id="navbar2"> <?php include("../menu.php"); ?> </div> <div id="content"> <div id="breadcrumb"> <script language="javascript" src="../includes/breadcrumbs.js"></script> </div> <?php // If the user wants to add a project if (isset($addproject)): else: $dbcnx = @mysql_connect("xxxxx", "xxxxxx", "xxxxxxxx"); if (!$dbcnx) { echo( "<P>Unable to connect to the xxxxxxxxx" . "database server at this time.</P>" ); exit(); } mysql_select_db("techweb", $dbcnx); if (! @mysql_select_db("techweb") ) { echo( "<P>Unable to connect to the xxxxxxx" . "database at this time.</P>" ); exit(); } // If a project has been submitted, // add it to the database. if ("SUBMIT" == $proj_submit) { $sql = "INSERT INTO projects SET " . "proj_priority='$priority', " . "proj_title='$title', " . "proj_bdlead='$bdlead', " . "proj_englead='$englead', " . "proj_objective='$objective', " . "proj_capability='$capability', " . "proj_approach='$approach', " . "proj_venue='$venue', " . "proj_tradeshow='$tradeshow', " . "proj_funding='$funding', " . "proj_src-ds='$src-ds', " . "proj_src-cap='$src-cap', " . "proj_src-irad='$src-irad', " . "proj_status='$status', " ; if (mysql_query($sql)) { echo("<P>Your project has been added.</P>"); } else { echo("<P>Error adding submitted project: " . mysql_error() . "</P>"); } } echo("<h1 style='text-align:left'> 2009 Projects </h1>"); // Request the text of all the projects $result = mysql_query( "SELECT * FROM projects"); if (!$result) { echo("<P>Error performing query: " . mysql_error() . "</P>"); exit(); } ?> <form id="projects" method="post" action="project.php"> <select id="project_list" name="proj_list"> <optgroup label="projects"> <?php // Display the details of each event in a table while ( $option = mysql_fetch_array($result) ) { echo("<option label=" . $option["proj_title"] . "value=" . $option["ID"] . ">" . $option["proj_title"] . "</option>"); } ?> </optgroup> </select> <input type="button" value="GO" name="proj_list" /> <? endif; ?> <div id="tabcontainer"> <ul id='tabs' class='shadetabs'> <?php // Populate tabs with data related to the selected project echo ("<li><a href='project.php' rel='container' class='selected'>Project</a></li>"); echo ("<li><a href='capability.php' rel='container'>Demo Capability</a></li>"); echo ("<li><a href='approach.php' rel='container'>Approach</a></li>"); echo ("<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>"); echo ("<li><a href='financials.php' rel='container'>Financials</a></li>"); ?> </ul> <!-- <ul id='tabs' class='shadetabs'> <li><a href='project.php' rel='container' class='selected'>Project</a></li> <li><a href='capability.php' rel='container'>Demo Capability</a></li> <li><a href='approach.php' rel='container'>Approach</a></li> <li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li> <li><a href='financials.php' rel='container'>Financials</a></li> </ul> --> <div id="divcontainer" style="border:1px solid gray; width:600px; margin-bottom: 1em; padding: 5px"> <p>Please select a project using the drop-down menu above. Use the tabs to view information about the selected project.</p> </div> <script type="text/javascript"> var countries=new ddajaxtabs("tabs", "divcontainer") countries.setpersist(true) countries.setselectedClassTarget("link") //"link" or "linkparent" countries.init() </script> </div> Hello! I am trying to collapse a table via JS, and the following code works in IE, yet not in Mozilla. I have read lots of other posts (on the world wide web) in regards to possibly tackling this with div, or span: however, in my case, I cannot modify the already existing HTML of the code. Could you please assist me - why is it that the following code works in IE, yet not in Mozilla? More INFO: Please note that although I am using the variable id below, I have also tried this via the defined element el. However -- using el doesn't work in either browsers. Please also note that the function is being called like so: HTP.p( '<table BORDER=0 BORDERCOLOR="#d1dce9" CELLPADDING="0" WIDTH=100% style="border-collapse:collapse;"> <tr> <td onClick="ftoggle(this);" width="100%" style="cursorointer;"><font face="Calibri" color ="#3A5894" size=2><B>[+] Click here to Show/Hide the Table</B></font></td> </tr><tr> <td colspan="1" style="display:none;color:#ff0000;">'); <head> <script language="JavaScript"> function ftoggle(id){ var el = document.getElementById(id); if(id.parentNode.nextSibling.childNodes.item(0).style.display=="") { id.parentNode.nextSibling.childNodes.item(0).style.display="none"; } else { id.parentNode.nextSibling.childNodes.item(0).style.display=""; } } </script> </head>'); hi, In my code below, I cannot get the setting_id value as it falls outside of the loop. I have just tried to put in the getElementById function but it's not working?! I get the error: missing ) after formal parameters JavaScript from this: Code: function confirmqualification(ID) { to this: Code: function confirmqualification(document.getElementById('setting_id')) { HTML from this: Code: <input type="button" name="remove" id="remove" value="Remove" onClick="javascript:confirmqualification('<?php echo $row1['setting_id']?>')" /> to this: Code: <input type="button" name="remove" id="remove" value="Remove" onClick="javascript:confirmqualification()" /> hi quick question, i have 640 hidden html inputs like this but with different names. <input type="hidden" name="b1r1c1" value"some value"> now i want to use document.getElementById('b1r1c1).value = "whatever"; will that work eventhough there is no id on my hidden value. it will be in a hta by the way. thanks Hopefully some of you guys can help. I'm self taught in Javascript so only know little bits here and there (and don't even know if the thread title is labelled right for what I'm doing!) so help would be greatly appreciated. I'm trying to create 4 buttons on a page (buttons shown by "click here to view c1, c2" etc.) however after I've clicked one button and the content is showing below, the content from the next button clicked does not show (almost as if it is hidden underneath). I'm looking for a way of showing the content when the button is clicked, but hiding it once another button is clicked so other content is shown. Hopefully this is clear enough. All help, tips or advice will be appreciated. Thankyou. Code: <script type="text/javascript" language="JavaScript"><!-- function InsertContent(tid) { if(document.getElementById(tid).style.display == "none") { document.getElementById(tid).style.display = ""; } else { document.getElementById(tid).style.display = "none"; } } //--></script> <table width="100%" cellspacing="4" cellpadding="4" border="0" align="center"> <tbody> <tr> <td width="25%"><a href="javascript:InsertContent('c1');"> Click to see C1</a></td> <td width="25%"><a href="javascript:InsertContent('c2');"> Click to see C2</a></td> <td width="25%"><a href="javascript:InsertContent('c3');"> Click to see C3</a></td> <td width="25%"><a href="javascript:InsertContent('c4');"> Click to see C4</a></td> </tr> </tbody> </table> <hr /> <div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c1">CONTENT C1 </div> <div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c2">CONTENT C2 </div> <div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c3">CONTENT C3 </div> <div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c4">CONTENT C3 </div> Hello smart people... perhaps someone can figure this one out. I hope it's not a PHP question. I have a form and need to populate FIELD2 with the result of FIELD1. Field one is a dynamic list from a database, where the value is an ID#, but the list shows the name. I want to populat FIELD2 with the name that is chosen, not the id (I can't get anything to work) Here is the code from the 2 fields: FIELD 1: Code: <select name = "" realname = "{#role#}" required="1" exclude = "-1" id = "roleselect"> <option value="-1" selected="selected">Choose</option> <option value = "{$roles[role].ID}" id="role{$roles[role].ID}">{$roles[role].name}</option> FIELD 2: Code: <input type="hidden" name="rolename" id="rolename" required="0" realname="rolename" /> Here is the javascript I tried to populate field 2 with the selected option of field 2: Code: function updaterole(){ document.getElementById("rolename").value =document.getElementById("role").value; I tried using name instead of value for field 1, but that didn't work either. The db just shows empty. thanks for any help! I have this code: Code: var player = 100; var part1 = ('ctl00_cphRoblox_TabbedInfo_GamesTab_RunningGamesList_RunningGamesListView_ctrl0_ctl00_PlayersRepeater_ct'); var part2 = ('_PlayerImage1'); var final = part1 + player + part2; var name = document.getElementById(final) The variable (name) turns up null when I try to see what it is. But, it is, infact, an element on the page, and when I do it manually it works. Help? Hi. I'm making a web site...And the following bit of code doesn't work...It sais "document.getElementById(...) is null or not an object"...I tried various combinations of getElementById and getElementsByName but nothing works...Any help is very much appreciated. Thanks. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Rudolf-site management</title> <script language="javascript"> <!-- function Val_imag(){ if(document.site.Imagini[0].checked){ for(var i=0; i<16; i++){ document.getElementById('Fs_img')[i].style.display='none' document.getElementById('Txt_img')[i].style.display='none'}} else{ if(document.site.Imagini[1].checked){ for(var i=0; i<16; i++){ document.getElementById('Txt_img')[i].style.display='none'} document.getElementById('Fs_img0').style.display=''} else{ if(document.site.Imagini[2].checked){ for(var i=0; i<16; i++){ document.getElementById('Fs_img')[i].style.display='none'} document.getElementById('Txt_img0').style.display=''} else{ for(var i=0; i<16; i++){ document.getElementById('Fs_img')[i].style.display='none' document.getElementById('Txt_img')[i].style.display='none'}}}}} function Cont_pag3(){ if(document.site.Imagini[0].checked){ document.site.pag3_5.disabled=false} else{ if(document.site.Imagini[1].checked){ if(document.site.Fis_img[0].value!=""){ document.site.pag3_5.disabled=false} else{ document.site.pag3_5.disabled=true}} else{ if(document.site.Imagini[2].checked){ if(document.site.Text_img[0].value.length>7){ document.site.pag3_5.disabled=false} else{ document.site.pag3_5.disabled=true}}}}} // --> </script> </head> <body bgcolor=#000437> <font color=#FDB91A> <form method="post" name="site" action="site.php" enctype="multipart/form-data"> <div id="pagina3" class="comanda"> Pasul III: Imagini<br/> Pentru a trimite imaginile care vor aparea pe site (daca exista), aveti 2 optiuni: sa ne trimiteti un fisier .zip, .rar, etc sau sa scrieti un link unde le vom putea gasi.<br/><br/> Le puteti organiza cum doriti dumneavostra, dar este preferabil sa folositi una dintre variantele urmatoa <br/><br/> (folder) pagina 1: (folder) pagina 1-1: imaginile care apar pe pagina 1-1<br/> <table style="color=#FDB91A"><tr><td width="155"></td><td width="250">imaginile care apar pe pagina 1 etc</td></tr></table><br/><br/> (folder) pagina 1: imaginile care apar pe pagina 1<br/> (folder) pagina 1-1: imaginile care apar pe pagina 1-1 etc<br/><br/> (folder - nu este necesar) site: toate imaginile care apar pe site<br/> <table style="color=#FDB91A"><tr><td width="200"></td><td width="250">fisier text (.txt, .doc, .docx etc) cu numele imaginilor si pagina pe care apar</td></tr></table><br/><br/> La toate exemplele, in loc de pagina 1 etc puteti scrie numele paginii.<br/> Puteti adauga pana la 10 fisiere si pana la 15 link-uri. Pentru a adauga inca un fisier/link apasati pe butonul corespunzator.<br/> Va rugam ca fisierele trimise sa fie de maximum 5 MB. (Puteti downloada si instala gratuit <a href="http://www.rarlab.com/download.htm" target="_blank">WinRar</a> si sa-l folositi pentru a face o arhiva impartita in mai multe bucati.)<br/><br/> <input type="radio" name="Imagini" value="NuAm" onClick="Val_imag();Cont_pag3()">Site-ul nu are imagini<br/> <input type="radio" name="Imagini" value="Fisier" onClick="Val_imag();Cont_pag3()">Trimite fisier<br/> <table id="Fs_img0" style="display: none"><tr><td><input type="file" name="Fis_img" size="100" onChange="Cont_pag3()"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img1').style.display=''"></td></tr></table> <table id="Fs_img1" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img2').style.display=''"></td></tr></table> <table id="Fs_img2" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img3').style.display=''"></td></tr></table> <table id="Fs_img3" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img4').style.display=''"></td></tr></table> <table id="Fs_img4" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img5').style.display=''"></td></tr></table> <table id="Fs_img5" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img6').style.display=''"></td></tr></table> <table id="Fs_img6" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img7').style.display=''"></td></tr></table> <table id="Fs_img7" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img8').style.display=''"></td></tr></table> <table id="Fs_img8" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img9').style.display=''"></td></tr></table> <table id="Fs_img9" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img10').style.display=''"></td></tr></table> <table id="Fs_img10" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img11').style.display=''"></td></tr></table> <table id="Fs_img11" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img12').style.display=''"></td></tr></table> <table id="Fs_img12" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img13').style.display=''"></td></tr></table> <table id="Fs_img13" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img14').style.display=''"></td></tr></table> <table id="Fs_img14" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img15').style.display=''"></td></tr></table> <table id="Fs_img15" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td></tr></table> <input type="radio" name="Imagini" value="Text" onClick="Val_imag();Cont_pag3()">Scrie/copiaza link-ul<br/> <table id="Txt_img0" style="display: none"><tr><td><input type="text" name="Text_img" size="80" onKeyUp="Cont_pag3()"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img1').style.display=''"></td></tr></table> <table id="Txt_img1" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img2').style.display=''"></td></tr></table> <table id="Txt_img2" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img3').style.display=''"></td></tr></table> <table id="Txt_img3" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img4').style.display=''"></td></tr></table> <table id="Txt_img4" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img5').style.display=''"></td></tr></table> <table id="Txt_img5" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img6').style.display=''"></td></tr></table> <table id="Txt_img6" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img7').style.display=''"></td></tr></table> <table id="Txt_img7" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img8').style.display=''"></td></tr></table> <table id="Txt_img8" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img9').style.display=''"></td></tr></table> <table id="Txt_img9" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img10').style.display=''"></td></tr></table> <table id="Txt_img10" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img11').style.display=''"></td></tr></table> <table id="Txt_img11" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img12').style.display=''"></td></tr></table> <table id="Txt_img12" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img13').style.display=''"></td></tr></table> <table id="Txt_img13" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img14').style.display=''"></td></tr></table> <table id="Txt_img14" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img15').style.display=''"></td></tr></table> <table id="Txt_img15" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td></tr></table><br/> Observatii:<br/> Daca aveti observatii/idei legate de imagini (amplasare, contur, text etc), le puteti scrie aici.<br/> Nu este un camp obligatoriu.<br/> <textarea name="Obs_img" cols="80" rows="7"></textarea><br/><br/><br/><br/> <input type="button" name="pag2_1" value="Pagina precedenta">     <input type="button" name="pag3_5" value="Continua comanda" disabled=true> </div> PS1: this code worked in firefox PS2: sorry for posting such a long code... Hello, I am retrieving xml - that works well. It is when I use "getElementByID" that things go weird. I can scoop up the elements, but it gives me 4 copies of each. When I try to run thru the first one, it doesn't recognize it as an array. hmm. In otherwords.. lets say I do this. var test = somevars.getElementByID('shoes'); test then looks like this: [shoes shoes shoes shoes] If I click on each "object" (shoes) - then I get the FULL xml in each... so I figure, ok - I'll just grab the first and reiterate thru that. ie.. for y=1 etc.. test[0].length but that doesn't work. Do I have to then reach into the childNodes of this and grab the "shoes" elements? Not sure if I am explaining this correctly. this is what I have: Code: function fireAjax(){ new Ajax.Request( flashconfig.genXML, { method: 'get', contentType: "application/xml", onSuccess: function( transport ) { var shoeTags = transport.responseXML.getElementsByTagName( 'shoes' ); var spotlightView = $H(); for( var b = 0; b < shoeTags.length; b++ ) { $w('title description link linkName image').each( function(cs){ spotlightView[cs] = getNodeValue(shoeTags[b],cs); }); builddisplay(displayModule, spotlightView); } so shoeTags does get an array, but each element/object actually has ALL the shoe items in it - but then repeats... for the other array positions. I tried just grabbing the ".first" or [0] like so, but that didn't work. var shoeTags = transport.responseXML.getElementsByTagName( 'shoes' ).first; or var shoeTags = transport.responseXML.getElementsByTagName( 'shoes' )[0] I am using javascript for adding and removing rows from table as per user require ment like if we press ADDROW button it adds extra row to table and if we pressREMOVEROW it delets the last row.. Now i want to access the data from textbox like this.. var crpt = document.getElementById("itrtr2").value; //no. of rows for(var k=1;k<=crpt;k++) { qtyc = document.getElementById("txtRowc3"+k).value; unit_pricec = document.getElementById("txtRowc5"+k).value; alert('QTYC:'+qtyc+' UPC:'+unit_pricec); cttl = qtyc * unit_pricec; document.getElementById("txtRowc6"+k).value = cttl.toFixed(2); csbttl = csbttl + cttl; } document.getElementById("subttlC").value=csbttl.toFixed(2); it shows the value of textRowc3i in qtyc in alert box but also givs error document.getElementById("txtRowc3"+k) is null.. I tried for this but problem is not solved please help... Thank You... I am trying to alter Playa to use input type images instead of buttons. Part of this involves the need for a rollover image eg. a play button highlights when the cursor is over it. This is the code I have: Code: if (Playa.btnState == "Stop") { document.getElementById("btnPlayStop").onmouseover = "this.src='images/stophover.gif'" document.getElementById("btnPlayStop").onmouseout = "this.src='images/stop.gif'"; } else { document.getElementById("btnPlayStop").onmouseover = "this.src='images/playhover.gif'"; document.getElementById("btnPlayStop").onmouseout = "this.src='images/play.gif'"; } <input type="image" src="images/stop.gif" onmouseover="this.src='images/stophover.gif'" onmouseout="this.src='images/stop.gif'" alt="Stop" id="btnPlayStop" onclick="Playa.doPlayStop();" /> Playa.btnState is the alt tag to say whether the state is stopped or started. I have the code working to alternate between "Play" and "Stop" images when the button is clicked, but the rollover doesn't happen. Any ideas? Thanks I am writing some javascript that when the user clicks on a link, it hides or displays content inside a div tag. I have been trying to add some code that would only allow for one div tag to be displayed at a time. Here is where I originally got the code (http://www.willmaster.com/library/hi...-to-reveal.php) Whenever I run this code I get this error: Code: Error: document.getElementById(months[x]) is null Source File: /resources/default.js Line: 30 This is the JavaScript that runs when the user clicks the link: Code: <!-- function accordion(tid) { var x; var months = new Array(); months[0]="January"; months[1]="February"; months[2]="March"; months[3]="April"; months[4]="May"; months[5]="June"; months[6]="July"; months[7]="August"; months[8]="September"; months[9]="October"; months[10]="November"; months[11]="December"; for (x in months) { document.getElementById((months[x])).style.display = "none"; } if(document.getElementById(tid).style.display == "none") { document.getElementById(tid).style.display = ""; } else { document.getElementById(tid).style.display = "none"; }} //--> Here is where the javascript is activated from PHP Code: <a href=javascript:accordion('$month2');>$month2</a><br /> <div id='$month2' style='display: none';> Hello $month2 </div> I've spent three days trying to figure this out without any luck. What i am attemping to do is to open an unframed tab using the link from a frame id. I want to be able to enter a js command in the browser on the page then have it open in a new tab unframed or just reload the link unframed. These are the commands i have tried in my browser: javascript:<a herf="document.getElementById("netlinkx").childNodes[1].src;"> javascript:<a herf="window.location.href=document.getElementById("netlinkx").childNodes[1].src;"> javascript:<a herf=document.getElementById("netlinkx").children[0]>.setAttribute('id','this_one');alert(getFrame("this_one").body.innerHTML);> and a few others that didn't work. None of my getElementById (or other) references produce anything but "undefined." This occurs in the latest versions of Fx, IE, Chrome, and Safari, so it must be something I am doing but not not seeing here. I have boiled it down to the following without success, and wonder whether there is some add on interaction. Fx 3.6.12 has the problem with this code: <code> <html> <head> <title>This is a test of getElementById</title> </head> <body> <div id="area" name="area_name">xxx</div> <script type="text/javascript"> var divs = document.getElementsByTagName('div'); var msg = ''; msg = 'Divs[0] contains ' + divs[0] + ' with width = ' + divs[0].width + "\n"; msg +='Test area width by id = ' + document.getElementById('area').width + "\n"; msg +='Test area width by name = ' + document.getElementsByName('area_name').width; alert(msg); </script> </body> </html> </code> I have a form that is used to insert a new classified ad or to update an existing ad. When the submit button is pressed a javascript function is called to validate the fields. Some of the fields are set as required. If the field is empty ( as form[i].value = '' ) then this sets an error flag and after all fields have been tested will display an alert and each field that has an error will be highlighted in red. This works great when a new ad is being created, but when the ad is being updated, and a required field is erased then it doesn't popup as an error, as if the script is just ignoring it. Here is the code snipit: Code: function submitbutton(mfrm) { var me = mfrm.elements; var r = new RegExp("[\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-]", "i"); var r_num = new RegExp("[^0-9\.,]", "i"); var r_email = new RegExp("^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]{2,}[.][a-zA-Z]{2,3}$" ,"i"); var errorMSG = ''; var iserror=0; // set notification background color var warnColor = '#<?php echo $this->error_color; ?>'; // loop through all input elements in form for (var i=0; i < me.length; i++) { // check if element is mandatory; here mosReq="1" if ((me[i].getAttribute('mosReq') == 1)&&(me[i].style.visibility != 'hidden')) { if (me[i].type == 'radio' || me[i].type == 'checkbox') { var rOptions = me[me[i].getAttribute('name')]; var rChecked = 0; if(rOptions.length > 1) { for (var r=0; r < rOptions.length; r++) { if (rOptions[r].checked) { rChecked=1; } } } else { if (me[i].checked) { rChecked=1; } } if(rChecked==0) { errorMSG += me[i].getAttribute('mosLabel').replace(' ',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n'; // notify user by changing background color, in this case to red me[i].style.background = warnColor; iserror=1; } } if ((me[i].value == '') || (me[i].value.length < 2)) { errorMSG += me[i].getAttribute('mosLabel').replace(' ',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n'; me[i].style.background = warnColor; iserror=1; } } } if(iserror==1) { alert(errorMSG); return false; } } hi, on my site he http://www.mypubspace.com/default.php I am requesting the rsCounty by Ajax, I am then trying to do the same to the page number value using getElementByID, and building up the querystring, but it's not working properly, on my countypubs.php page which is what I an requesting to get the counties I have added the function again to try and get the PAGE Code: <script language="javascript" type="text/javascript"> function countyFunction(){ var countyRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari countyRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ countyRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ countyRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server countyRequest.onreadystatechange = function(){ if(countyRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.innerHTML = countyRequest.responseText; } } var name = document.getElementById('name').value; //var rsCounty = document.getElementById('rsCounty').value; var page = document.getElementById('page').value; var queryString = "?name=" + name + "&rsCounty=" + rsCounty + "&page=" + page; //Add the following line countyRequest.open("GET", "http://www.mypubspace.com/countypubs.php" + queryString, true); countyRequest.send(null); } </script> <?php $dbhost = "xxx"; $dbuser = "xxx"; $dbpass = "xxx"; $dbname = "xxx"; //Connect to MySQL Server mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error()); if ($msg <>"") { echo "<div class=\"ui-widget\"> <div style=\"padding: 0pt 0.7em;\" class=\"ui-state-error ui-corner-all\"> <p style=\"padding-top:18px;\"><span style=\"float: left; margin-right: 0.3em;\" class=\"ui-icon ui-icon-alert\"></span> <strong>Alert:</strong> $msg</p> </div> </div>"; } $county = $_GET["rsCounty"]; echo $county .'<br />'; $tableName="pubs"; $targetpage = "default.php"; $limit = 20; $query = "SELECT COUNT(*) as num FROM $tableName WHERE rsCounty = '$county'"; $total_pages = mysql_fetch_array(mysql_query($query)); $total_pages = $total_pages['num']; $stages = 3; $page = mysql_escape_string($_REQUEST['page']); if( isset($_REQUEST['page']) && ctype_digit($_REQUEST['page']) ) { $page = (int) $_GET['page']; $start = ($page - 1) * $limit; }else{ $start = 0; } // Get page data $query1 = "SELECT * FROM $tableName WHERE rsCounty = '$county' ORDER BY rsPubName Asc LIMIT $start, $limit"; $result = mysql_query($query1); // Initial page num setup if ($page == 0){$page = 1;} $prev = $page - 1; $next = $page + 1; $lastpage = ceil($total_pages/$limit); $LastPagem1 = $lastpage - 1; $paginate = ''; if($lastpage > 1) { $paginate .= "<span class='paginate'>"; // Previous if ($page > 1){ $paginate.= "<a onClick='countyFunction();' id='page' value='$prev'>previous</a>"; }else{ $paginate.= "<span class='disabled'>previous</span>"; } // Pages if ($lastpage < 7 + ($stages * 2)) // Not enough pages to breaking it up { for ($counter = 1; $counter <= $lastpage; $counter++) { if ($counter == $page){ $paginate.= "<span class='current'>$counter</span>"; }else{ $paginate.= "<a onClick='countyFunction();' id='page' value='$counter'>$counter</a>";} } } elseif($lastpage > 5 + ($stages * 2)) // Enough pages to hide a few? { // Beginning only hide later pages if($page < 1 + ($stages * 2)) { for ($counter = 1; $counter < 4 + ($stages * 2); $counter++) { if ($counter == $page){ $paginate.= "<span class='current'>$counter</span>"; }else{ $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";} } $paginate.= "..."; $paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>"; $paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>"; } // Middle hide some front and some back elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2)) { $paginate.= "<a href='$targetpage?page=1'>1</a>"; $paginate.= "<a href='$targetpage?page=2'>2</a>"; $paginate.= "..."; for ($counter = $page - $stages; $counter <= $page + $stages; $counter++) { if ($counter == $page){ $paginate.= "<span class='current'>$counter</span>"; }else{ $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";} } $paginate.= "..."; $paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>"; $paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>"; } // End only hide early pages else { $paginate.= "<a href='$targetpage?page=1'>1</a>"; $paginate.= "<a href='$targetpage?page=2'>2</a>"; $paginate.= "..."; for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++) { if ($counter == $page){ $paginate.= "<span class='current'>$counter</span>"; }else{ $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";} } } } // Next if ($page < $counter - 1){ $paginate.= "<a href='$targetpage?page=$next'>next</a>"; }else{ $paginate.= "<span class='disabled'>next</span>"; } $paginate.= "</span>"; } echo 'Pubs found: '.$total_pages; // pagination echo $paginate; ?> <div id="ajaxCountylist"> <div id="accordion"> <?php while($row = mysql_fetch_array($result)) { echo '<div><h3><a href="#">'.$row['rsPubName'].', '.$row['rsTown'].'</a></h3><div>'.$row['rsAddress'].'<br />'.$row['rsTown'].', '.$row['rsCounty'].'<br />'.$row['rsPostCode'].'<br /><br />Region: '.$row['Region'].'<br /><br />Telephone: '.$row['rsTel'].'<br /><br />'; echo '<button onclick="gohere(\'viewpub.php?PUBID='.$row['PUBID'].'\')" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">View Pub</span></button>'; echo '</div></div>'; } echo '<span style="float:right;">'.$paginate.'</span>'; ?> </div> </div> I have only applied teh function to the previous button and the first page numbers! Hi there, So I got this problem, and can't seem to figure it out myself. I'm using JS ( no framework ). And that's the whole point of this script, so don't tell me to use one :P Code: var i=1; var x=10; // Number of extraContent linked with extraContainers for (i=1;i<=x;i++) { var content = "extraContent" +i; var container = "extraContainer" +i; document.getElementById(container).appendChild(document.getElementById(content)); } The problem here, that the container/content, in the getElementById will not return: extraContainer1/extraContent1 Any suggestions :) ~J Hello, I'm sorry if this has been asked before but I've been googling and looking in reference books for the last couple of days and just haven't been able to find an answer. I'm new to javascript and have just completed my first fully working script to crossfade images and have clickable links to go to a specific image, the code works perfectly when the code is inside of the html document with the elements but when you remove the javascript and put it in a seperate file its unable to get the value of the elements from the html. Is there a way to do this, give the document a alternative src to look in for the elements or something? An example below. Javascript snipit [CODE] imageId = "mainImage"; image = window.document.getElementById(imageId); alert(image); [CODE] image returns null. what I want it to return is the value fro the HTMl document that this file is included in. [CODE] <script type="text/javascript" src="fadeFunctions.js"> </script> </head> <body> <div id="imgHolder" style="position: absolute; top: 200px;"> <div id="topImage" style="position: absolute; top: 0px; left: 0px; z-index: 100;"><img id="mainImg" src="1.png" /></div> [CODE] Thanks for any help or suggestions that you can give. I have some simple javascript code that works fine in chrome and safari, but not Ie8 Code: <head><script type="text/javascript"> function val2() { //var num = Number(document.getElementById('PdRows').value) alert (document.getElementById('PdRows').value) } </script></head> <form action="" method="post"> <select name="PD" id="PdRows" onchange="val2()"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </form> Why? And how do I correct? |