|
JavaScript - Noob Question About Looping Thru All List Items On A Page
Hi,
I am looking for an efficient way to go thru all the list items I have in an unordered page and change an attribute. I know I should be able to do it using getElementsByTagName, but I can't seem to get it all working. Can someone please point me in the right direction? Thanks, Thad Similar TutorialsI have a php web page with a list box. I select 4 items in the list and then submit to another php file to do some processing with those selected items. Then that script calls the original script - here's my question: Is there anyway to keep the four items selected when the original page is called again? Right now only one of the items is selected. I was thinking if the itemindex is 'remembered' then maybe the other items can be too? Or no? Thanks I was recommended to vertically align these list items using javascript. I am needing to vertically align the "identity" and "web presence" list items with each other: http://shilohcreative.gethifi.com/work#/esque Thank you in advance! I want to compare items based on what the user picks there will be 3 drop down menus and the drop down menus should alter the HTML table each time it is changed, giving different option values and stuff. I am wondering how to go about this I have the basic stuff setup but I am not really sure how to add to a table that all 3 options use. Any help would be greatly appreciated. Here is my current code for the drop downs. Code: <form name="compare"> <select name="compare"> <option value="V1">Value 1</option> <option value="V2">Value 2</option> <option value="V3">Value 3</option> <option value="V4">Value 4</option> </select> <select name="compare2"> <option value="V1">Value 1</option> <option value="V2">Value 2</option> <option value="V3">Value 3</option> <option value="V4">Value 4</option> </select> <select name="compare3"> <option value="V1">Value 1</option> <option value="V2">Value 2</option> <option value="V3">Value 3</option> <option value="V4">Value 4</option> </select> <input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="Compare"> </form> I want the user to select one of the options from above and a table to show up showing the differences between the others for example; someone selects Value 1 for compare, and Value 2 for compare 2, and Value 3 for Compare 3, they should be shown a table which has the differences between Value 1, Value 2, Value 3. So lets say Value 1 and Value 3 offers you "Help" while value 2 doesn't. it should show a table that says Features Value 1 Value 2 Value 3 Help YES NO YES how would I go about doing this? I haven't been able to find anything about this on here or clear direction on the net, so I'm hoping y'all can help me out. I have a dropdown list that I use to navigate pages on an external website. Currently, my dropdown list will open a new page in my current window. I want to be able to open the page in a new window. I'm sure it's a simple fix, but being somewhat of a noob to Javascript I can't figure out how to solve it. Here's what I have for the navigation dropdown: Code: <FORM
ACTION="../cgi-bin/redirect.pl"
METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Make Your Selection
<OPTION VALUE="http://url1.html>Choice 1
<OPTION VALUE="http://url2.html>Choice 2
<OPTION VALUE="http://url3.html">Choice 3
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>
And here's what I have in the header: Code: <SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}
//-->
</SCRIPT>
Any ideas? Hi, please tell how to dynamically insert items in list box in javascript.That is . When ever new element in stored in oracle that should be listed in listbox Kind of a novice here, but I've looked and looked... and looked, and can't find an answer to this seemingly simple problem. I apologize in advance: I'm trying to make it so radio buttons get looped, but have a different name/id each time through the loop. The code below is exactly what I need to do, but the problem is that in each loop, the radio button has the same name/id, so it only selects one button at a time. How do I fix that? Thanks! Code: <html>
<body>
<script type="text/javascript">
for (i = 0; i <= 5; i++)
{
document.write("<input type='radio' id='qg1' name='q1' value='Great' />Great!</> :: <input type='radio' id='qg1' name='q1' value='Good' />Good!</>");
document.write("<br />");
}
</script>
<p>This for loop starts with i=0.</p>
<p>As long as <b>i</b> is less than, or equal to 5, the loop will continue to run.</p>
</body>
</html>
I would like to use this code for multiple object on a single page. Code: <SCRIPT LANGUAGE="JavaScript">
function ClipBoard()
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}
</SCRIPT>
<SPAN ID="copytext" STYLE="height:150;width:162;background-color:pink">
Text of stuff
</SPAN>
<TEXTAREA ID="holdtext" STYLE="display:none;">
</TEXTAREA>
<BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON>
The problem is im not sure how to get more than 1 SPAN ID to work with the script. any help would be great! I'm a total noob who decided to learn som web programming, I hope it's okey to post such questions here. I've written a script to learn how to fill in a value into a textarea by a button click. (See below.) I get it to show the selected number of each button, however the numbers just flashes and disappers right away. I want it to stay in the textarea. How do I do that and why does this problem appear? Head section <script type="text/javascript"> function calculon(i) { document.forms['siffror'].elements['test'].value = i; return; } body section <form name="knappar"> <input name="sifferknapp" type="submit" value=1 onClick=calculon(this.value)> <input name="sifferknapp" type="submit" value=2 onclick=calculon(this.value)> <input name="sifferknapp" type="submit" value=3 onclick=calculon(this.value)><br /> <input name="sifferknapp" type="submit" value=4 onclick=calculon(this.value)> <input name="sifferknapp" type="submit" value=5 onclick=calculon(this.value)> <input name="sifferknapp" type="submit" value=6 onclick=calculon(this.value)><br /> <input name="sifferknapp" type="submit" value=7 onclick=calculon(this.value)> <input name="sifferknapp" type="submit" value=8 onclick=calculon(this.value)> <input name="sifferknapp" type="submit" value=9 onclick=calculon(this.value)><br /> </form> Could someone please change this line so that it respects the global namespace: Code: var selected = students.options[students.selectedIndex].value; The error console is telling me to use document.getElementById but I don't know where to put it. Thanks. Very new to javascript, so I apologize in advance. I honestly tried to figure this out on my own, and I'm just not able. I'm trying to create a family tree online that has several other related family charts. I want each person's name and birth year to be stored in javascript variables, then I want to be able to just go through the tree, and put the persons name once, and have it put the appropriate name and birthyear in the little boxes that the css is creating. In the js file... I would do this for each family member. Code: var johnname = "John Smith"; var johnbirthyear = "Jan 1 1930"; var janename = "Jane Doe"; var janebirthyear = "Jan 1 1940"; var mikename = "mike wilson"; var mikebirthyear = "Jan 1 1950"; var saraname = "sara johnston"; var sarabirthyear = "Jan 1 1960"; In the HTML file... Code: <div id = "boybox"> <script type="text/javascript"> id = "john"; <!-- this is the only thing I want to have to change --> name = id+"name"; document.write(name); </script> <div id = "year"> <script type="text/javascript"> birthyear = id+"year"; document.write(birthyear); </script> </div> </div> So I thought I had it all figured out. I thought that the above would take the id of John that I added, go to the line that sets the name, add john to the word name, and then document write the variable of johnname from the js file. I know you're laughing at me because of course it instead made the value of name to johnname, then wrote the word johnname in the box. Can anyone point me in the right direction please? ultimately I want to go through and be able to just type the persons name in the html for that box once, and have it update with their appropriate info. Thanks, and sorry for such a rookie question. Hi all, I sincerely apologise for the noob question. I have search and searched for an answer but to no avail, so I hope someone on here can help. I'm trying to get a fisheye verticle menu working. I've found somethin which fits the requirement he http://zendold.lojcomm.com.br/ifisheye/ and tried to make it work. It just doesn't. I've tried different versions of mootools etc but I think I'm missing something really stupidky simple. I'd really appreciate it if someone could have a look at my temp page (http://www.parkerbs.com/home1.htm) and point me in the right direction. Many thanks in advance. Paul Every year or two, I want to do something SIMPLE via JS, and each time it's like i've never been there before I simply want a button to show/hide something on click, and I THINK I'm close, but it's not quite working. Here's what I'm toying with. Code: <html>
<head>
<script type="text/javascript">
function showHide("idName") {
if(document.getElementById("idName").style.visibility=="hidden") {
document.getElementById("idName").style.visibility=="visible";
}
else {
document.getElementById("idName").style.visibility=="hidden";
}
}
</script>
</head>
<body>
<button type="button" onclick="showHide(1)">Click Me!</button>
<div id="1" "style=visibility:hidden;"><p>this is the stuff.</p></div>
</body>
</html>
How do I get the button to make that div (in)visible?? ~Mo Hi all, I'm desperately trying to figure out how to "transform" Javascript commands into HTML code. Excuse my noobness but I really know nothing about Javascript. Basically, I have this Google API Search code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Google AJAX Search API Application</title>
<script src="http://www.google.com/jsapi?key=CUT"></script>
<script language="Javascript" type="text/javascript">
//<![CDATA[
google.load("search", "1");
function OnLoad() {
// Create a search control
var searchControl = new google.search.SearchControl();
// Add in a full set of searchers
var localSearch = new google.search.LocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.VideoSearch());
searchControl.addSearcher(new google.search.BlogSearch());
// Set the Local Search center point
localSearch.setCenterPoint("New York, NY");
// Tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));
// Execute an inital search
searchControl.execute("Google");
}
google.setOnLoadCallback(OnLoad);
//]]>
</script>
</head>
<body>
<div id="searchcontrol">Loading...</div>
</body>
</html>
Now, what I'm desperately trying to do since 4-5 hours is to have the search results between the <div id="searchcontrol"></div> encoded as HTML in the loaded page. Currently, when the page is loaded and I look at the source code, I have the word 'Loading...' in the <div> tags, despite in the normal view there are G results listed. I need those results encoded as HTML for SEO reasons. Researching on this matter I thought the problem could be the OnLoad command, that makes the script load after all the other HTML elements are loaded. But I tried to make it load before all the elements in the page, and the problem persists. How can I solve this? Thanks in advance for any help! I create a webpage where i use pagination where it is predefined that i want to show 10 item per page.But i want to do that when a user logged in he have a option that how many items he wants to show per page?javascriptkit.com site use this type?please any one help me how can i do this?
HI I am trying to get rid of this warning over and over. My pages are located in directory WEBSERVER\APPLICATIONS\WC Master pages in WEBSERVER\APPLICATIONS CSS and Javsasripts are in WEBSERVER and in css I have background:url(Images/GlowTab.png) no-repeat right top; Dont know even though the image gets accessed by Https. why it is still giving that warning. I currently have a JavaScript function that works great except for what I am about to explain and wish that i can get it worked out by utilizing someones help in this forum. So, Here goes. I have 2 list boxes one that has a list of options and one empty. when I click the button between the two It places the values into the other box and vice versa which currently works fine. The thing is when I click the submit button to store that info from the list box to the empty box in a DB it does not record the value's as if the box was empty after I have already selected from the list. is there anyone that can help me in figuring this thing out, I would greatly appreciate it. Here is my code: JavaScript Code: <script language="javascript">
function validate_list()
{
if ( document.theForm.ToLB.value == "" )
{
alert ( "Please select header column from the list box. " );
return false;
}else
return true;
}
function move(tbFrom, tbTo)
{
var arrFrom = new Array(); var arrTo = new Array();
var arrLU = new Array();
var i;
for (i = 0; i < tbTo.options.length; i++)
{
arrLU[tbTo.options[i].text] = tbTo.options[i].value;
arrTo[i] = tbTo.options[i].text;
}
var fLength = 0;
var tLength = arrTo.length;
for(i = 0; i < tbFrom.options.length; i++)
{
arrLU[tbFrom.options[i].text] = tbFrom.options[i].value;
if (tbFrom.options[i].selected && tbFrom.options[i].value != "")
{
arrTo[tLength] = tbFrom.options[i].text;
tLength++;
}
else
{
arrFrom[fLength] = tbFrom.options[i].text;
fLength++;
}
}
tbFrom.length = 0;
tbTo.length = 0;
var ii;
for(ii = 0; ii < arrFrom.length; ii++)
{
var no = new Option();
no.value = arrLU[arrFrom[ii]];
no.text = arrFrom[ii];
tbFrom[ii] = no;
}
for(ii = 0; ii < arrTo.length; ii++)
{
var no = new Option();
no.value = arrLU[arrTo[ii]];
no.text = arrTo[ii];
tbTo[ii] = no;
}
}
</script>
Html Code: <table width="250" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100"> <select name="FromLB" size="26" style="width:200px" id="sourceSelect" multiple="multiple" ondblclick="move(this.form.FromLB,this.form.ToLB)"> <option value="Contract ID">Contract ID</option> <option value="Vendor ID">Vendor ID</option> <option value="Complete Upon Initial Receipt">Complete Upon Initial Receipt</option> <option value="Contract Complete">Contract Complete</option> <option value="Customer has Renewed">Customer has Renewed</option> <option value="Date Recieved">Date Recieved</option> <option value="Do Not Renew">Do Not Renew</option> <option value="Evergreen Clause">Evergreen Clause</option> <option value="GLB Compliant">GLB Compliant</option> <option value="GLB Sensitive">GLB Sensitive</option> <option value="Red Flag Sensitive">Red Flag Sensitive</option> <option value="Red Flag Compliant">Red Flag Compliant</option> <option value="Indefinite">Indefinite</option> <option value="Initial Termination">Initial Termination</option> <option value="Last File Upload">Last File Upload</option> <option value="M/N/A">M/N/A</option> <option value="Notice Date">Notice Date</option> <option value="Renewal Terms">Renewal Terms</option> <option value="Override Termination Date">Override Termination Date</option> <option value="Termination Date">Termination Date</option> <option value="Termination Letter Sent">Termination Letter Sent</option> <option value="Effective Date">Effective Date</option> <option value="Client">Client</option> <option value="Vendor">Vendor</option> <option value="Contract Completed Date">Contract Completed Date</option> <option value="Customer Desc">Customer Desc</option> </select> </td> <td width="100" align="center" valign="middle"> <input type="button" name="forward" id="button" style="width:95px" value="Add>>" onClick="move(this.form.FromLB,this.form.ToLB)"/> <br> <br> <input type="button" name="back" id="button" style="width:95px" value="<<Remove" onClick="move(this.form.ToLB,this.form.FromLB)"/> </td> <td align="left"> <select name="ToLB" id="ToLb" size="26" style="width:200px" multiple="multiple" ondblclick="move(this.form.ToLB,this.form.FromLB)"/> </select> </td> </tr> </table> Hi.. I just want to know how can I display Weeks in a drop down list per year. Thank you is it possible to refresh a select list on it's own without refreshing the whole page?
How can I execute this: From the dropdown list build up from mysql database (say a list of fruits). I select "Add New Fruit". This triggers it to either have a modal form to add new fruit or a table form. Once submitted, Select dropdown list RELOADS including the newly added data (fruit) without reloading the whole page which contains other form control such as textbox. Hi Everyone I'll explain the situation first: I need to build a website that allows students to select from a drop down list and then hit an 'Add button'. From there, that value will go to another part of the screen and display as bullets. Once that list is built, they can hit a final submit button that sends an email to someone with everything they selected. More Detail: LEFT SIDE OF SCREEN: [DROP DOWN LIST] <- this will have all the courses listed that we offer. Once once is selected. [ADD] <- add button that puts the values from the dropdown list to an array. RIGHT SIDE OF SCREEN: My Courses: * TEST1001 * TEST1002 This is being updated dynamically so that whenever the add button is hit, this lists grows. [SEND] <- Send button Thank you, |
|||||||