|
JavaScript - Dynamically Create Select
How do I dynamically create a <select> with <options> in Javascript?
Similar TutorialsHi, I have the following function to dynamically create an image (in this case a toolbox button): Code: function createButton(srcid,bttn)
{
if (bttn=='mag') {s='Magnify';h='Magnify';o='DoZoom(event,\'0\',\''+srcid+'\')';}
if (bttn=='frz') {s='Pause';h='Freeze/Unfreeze';o='setPicture(\''+srcid+'\',0)';}
if (bttn=='swp') {s='Swap';h='Swap maps';o='setPicture(\''+srcid+'\',2)';}
btn=document.createElement('img');
btn.setAttribute('src','toolbox/'+s+'.gif');
btn.setAttribute('width','16px');
btn.setAttribute('height','16px');
btn.setAttribute('id',bttn+'btn_'+srcid);
btn.setAttribute('class','button');
btn.setAttribute('name','Toolbox');
btn.setAttribute('title',h);
btn.setAttribute('onclick',o);
document.getElementById('ctrlDiv').appendChild(btn);
}
which works fine in IE8 and IE9, but in IE7 it refuses to pick up the style 'button'. I've even tried putting in btn.class='button' but JS throws up an error. If I specify the style by btn.style.position='Absolute' it picks this up OK. However, it won't respond to the onclick event either. I have heard that setAttribute is buggy with IE7, which is why I tried to specify each attribute directly. The style sheet for class button is: Code: .button
{
position: absolute;
left: 5;
top: 5;
z-index: 1;
}
(BTW, no link to a website as this is local on my machine atm) TIA, Gerald. I currently have a page which, when the user clicks a button creates a new row displaying a form. I also have other forms on this page however so I was wondering if anyone knew how to close a form using javascript? Thanks for any help. My code to create the table row and form are below... Code: myform = document.createElement("form");
myform.method = "post";
myform.action = "editdetails.php";
myform.id = "editemail";
myform.name = "editemail";
var a=document.getElementById('editdetailstable').insertRow(2);
var b=document.getElementById('editdetailstable').insertRow(3);
var x=a.insertCell(0);
x.innerHTML="New Email: ";
x.align = "right";
var y=a.insertCell(1);
y.innerHTML="<input type='text' name='email' id='email' />";
var z=b.insertCell(0);
z.innerHTML="<input type='button' value='Change' />"
z.colSpan = "2";
z.align = "center";
Let's say I would want to create a custom object with properties. The properties would get their values from text input fields. The only thing that I can't get is how to assign variables to the new instances of the object.Here's my go at it: //First create object prototype function Obj(prop1,prop2,prop3) { this.prop1=prop1; this.prop2=prop2; this.prop3=prop3; this.showProps=showProps; //This method will show all props } //Array for storing each object instance var Objects=new Array(),i=-1; //---Now the HTML code <form name="myform" onSubmit="Objects[i++]=new Obj(text1.value,text2.value,text3.value)"> <b>Age:</b><input name="text1"> <b>Sex:</b><input name="text2"> <b>Location:</b><input name="text3"> <input type="submit"> </form> Ok,so knowing that each array element can store anything,including another object I used an Array to store each object instance.But is there any other way of storing objects? like in variables. Can someone see what is wrong with this code: Code: frm=document.createElement('form')
frm.action="/cgi-sys/formmail.pl"
frm.method="POST"
fld=document.createElement('textarea')
fld.appendChild(document.createTextNode(simpleCart.items))
frm.appendChild(fld)
It is supposed to dynamically create a textarea and fill it up with the return of simpleCart.items() Hi there, so i am working on a website, and on it there is a video with youtube api. I need to hide all Table-rows that are not during each 5 second time frame. So for example, when it is at 0:36, it will hide all TR's besides the TR that has to do with the video between 0:35 and 0:40. Each TR displays a start time, content, and end time. Here is what the tables currently look like. Code: <table width="600" class="table" >
<tr class="item-titles">
<td width="75" class="none">Start</td>
<td width="400">Caption</td>
<td width="75">End</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(0, false)">0</a></td>
<td><a href="javascript:player.seekTo(0, false)"></a></td>
<td><a href="javascript:player.seekTo(5, false)">5</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(5, false)">5</a></td>
<td><a href="javascript:player.seekTo(5, false)"></a></td>
<td><a href="javascript:player.seekTo(10, false)">10</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(10, false)">10</a></td>
<td><a href="javascript:player.seekTo(10, false)"></a></td>
<td><a href="javascript:player.seekTo(15, false)">15</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(15, false)">15</a></td>
<td><a href="javascript:player.seekTo(15, false)"></a></td>
<td><a href="javascript:player.seekTo(20, false)">20</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(20, false)">20</a></td>
<td><a href="javascript:player.seekTo(20, false)"></a></td>
<td><a href="javascript:player.seekTo(25, false)">25</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(25, false)">25</a></td>
<td><a href="javascript:player.seekTo(25, false)"></a></td>
<td><a href="javascript:player.seekTo(30, false)">30</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(30, false)">30</a></td>
<td><a href="javascript:player.seekTo(30, false)"></a></td>
<td><a href="javascript:player.seekTo(35, false)">35</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(35, false)">35</a></td>
<td><a href="javascript:player.seekTo(35, false)"></a></td>
<td><a href="javascript:player.seekTo(40, false)">40</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(40, false)">40</a></td>
<td><a href="javascript:player.seekTo(40, false)"></a></td>
<td><a href="javascript:player.seekTo(45, false)">45</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(45, false)">45</a></td>
<td><a href="javascript:player.seekTo(45, false)"></a></td>
<td><a href="javascript:player.seekTo(50, false)">50</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(50, false)">50</a></td>
<td><a href="javascript:player.seekTo(50, false)"></a></td>
<td><a href="javascript:player.seekTo(55, false)">55</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(55, false)">55</a></td>
<td><a href="javascript:player.seekTo(55, false)"></a></td>
<td><a href="javascript:player.seekTo(60, false)">60</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(60, false)">60</a></td>
<td><a href="javascript:player.seekTo(60, false)"></a></td>
<td><a href="javascript:player.seekTo(65, false)">65</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(65, false)">65</a></td>
<td><a href="javascript:player.seekTo(65, false)"></a></td>
<td><a href="javascript:player.seekTo(70, false)">70</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(70, false)">70</a></td>
<td><a href="javascript:player.seekTo(70, false)"></a></td>
<td><a href="javascript:player.seekTo(75, false)">75</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(75, false)">75</a></td>
<td><a href="javascript:player.seekTo(75, false)"></a></td>
<td><a href="javascript:player.seekTo(80, false)">80</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(80, false)">80</a></td>
<td><a href="javascript:player.seekTo(80, false)"></a></td>
<td><a href="javascript:player.seekTo(85, false)">85</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(85, false)">85</a></td>
<td><a href="javascript:player.seekTo(85, false)"></a></td>
<td><a href="javascript:player.seekTo(90, false)">90</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(90, false)">90</a></td>
<td><a href="javascript:player.seekTo(90, false)"></a></td>
<td><a href="javascript:player.seekTo(95, false)">95</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(95, false)">95</a></td>
<td><a href="javascript:player.seekTo(95, false)"></a></td>
<td><a href="javascript:player.seekTo(100, false)">100</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(100, false)">100</a></td>
<td><a href="javascript:player.seekTo(100, false)"></a></td>
<td><a href="javascript:player.seekTo(105, false)">105</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(105, false)">105</a></td>
<td><a href="javascript:player.seekTo(105, false)"></a></td>
<td><a href="javascript:player.seekTo(110, false)">110</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(110, false)">110</a></td>
<td><a href="javascript:player.seekTo(110, false)"></a></td>
<td><a href="javascript:player.seekTo(115, false)">115</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(115, false)">115</a></td>
<td><a href="javascript:player.seekTo(115, false)"></a></td>
<td><a href="javascript:player.seekTo(120, false)">120</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(120, false)">120</a></td>
<td><a href="javascript:player.seekTo(120, false)"></a></td>
<td><a href="javascript:player.seekTo(125, false)">125</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(125, false)">125</a></td>
<td><a href="javascript:player.seekTo(125, false)"></a></td>
<td><a href="javascript:player.seekTo(130, false)">130</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(130, false)">130</a></td>
<td><a href="javascript:player.seekTo(130, false)"></a></td>
<td><a href="javascript:player.seekTo(135, false)">135</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(135, false)">135</a></td>
<td><a href="javascript:player.seekTo(135, false)"></a></td>
<td><a href="javascript:player.seekTo(140, false)">140</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(140, false)">140</a></td>
<td><a href="javascript:player.seekTo(140, false)"></a></td>
<td><a href="javascript:player.seekTo(145, false)">145</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(145, false)">145</a></td>
<td><a href="javascript:player.seekTo(145, false)"></a></td>
<td><a href="javascript:player.seekTo(150, false)">150</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(150, false)">150</a></td>
<td><a href="javascript:player.seekTo(150, false)"></a></td>
<td><a href="javascript:player.seekTo(155, false)">155</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(155, false)">155</a></td>
<td><a href="javascript:player.seekTo(155, false)"></a></td>
<td><a href="javascript:player.seekTo(160, false)">160</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(160, false)">160</a></td>
<td><a href="javascript:player.seekTo(160, false)"></a></td>
<td><a href="javascript:player.seekTo(165, false)">165</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(165, false)">165</a></td>
<td><a href="javascript:player.seekTo(165, false)"></a></td>
<td><a href="javascript:player.seekTo(170, false)">170</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(170, false)">170</a></td>
<td><a href="javascript:player.seekTo(170, false)"></a></td>
<td><a href="javascript:player.seekTo(175, false)">175</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(175, false)">175</a></td>
<td><a href="javascript:player.seekTo(175, false)"></a></td>
<td><a href="javascript:player.seekTo(180, false)">180</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(180, false)">180</a></td>
<td><a href="javascript:player.seekTo(180, false)"></a></td>
<td><a href="javascript:player.seekTo(185, false)">185</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(185, false)">185</a></td>
<td><a href="javascript:player.seekTo(185, false)"></a></td>
<td><a href="javascript:player.seekTo(190, false)">190</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(190, false)">190</a></td>
<td><a href="javascript:player.seekTo(190, false)"></a></td>
<td><a href="javascript:player.seekTo(195, false)">195</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(195, false)">195</a></td>
<td><a href="javascript:player.seekTo(195, false)"></a></td>
<td><a href="javascript:player.seekTo(200, false)">200</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(200, false)">200</a></td>
<td><a href="javascript:player.seekTo(200, false)"></a></td>
<td><a href="javascript:player.seekTo(205, false)">205</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(205, false)">205</a></td>
<td><a href="javascript:player.seekTo(205, false)"></a></td>
<td><a href="javascript:player.seekTo(210, false)">210</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(210, false)">210</a></td>
<td><a href="javascript:player.seekTo(210, false)"></a></td>
<td><a href="javascript:player.seekTo(215, false)">215</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(215, false)">215</a></td>
<td><a href="javascript:player.seekTo(215, false)"></a></td>
<td><a href="javascript:player.seekTo(220, false)">220</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(220, false)">220</a></td>
<td><a href="javascript:player.seekTo(220, false)"></a></td>
<td><a href="javascript:player.seekTo(225, false)">225</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(225, false)">225</a></td>
<td><a href="javascript:player.seekTo(225, false)"></a></td>
<td><a href="javascript:player.seekTo(230, false)">230</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(230, false)">230</a></td>
<td><a href="javascript:player.seekTo(230, false)"></a></td>
<td><a href="javascript:player.seekTo(235, false)">235</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(235, false)">235</a></td>
<td><a href="javascript:player.seekTo(235, false)"></a></td>
<td><a href="javascript:player.seekTo(240, false)">240</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(240, false)">240</a></td>
<td><a href="javascript:player.seekTo(240, false)"></a></td>
<td><a href="javascript:player.seekTo(245, false)">245</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(245, false)">245</a></td>
<td><a href="javascript:player.seekTo(245, false)"></a></td>
<td><a href="javascript:player.seekTo(250, false)">250</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(250, false)">250</a></td>
<td><a href="javascript:player.seekTo(250, false)"></a></td>
<td><a href="javascript:player.seekTo(255, false)">255</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(255, false)">255</a></td>
<td><a href="javascript:player.seekTo(255, false)"></a></td>
<td><a href="javascript:player.seekTo(260, false)">260</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(260, false)">260</a></td>
<td><a href="javascript:player.seekTo(260, false)"></a></td>
<td><a href="javascript:player.seekTo(265, false)">265</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(265, false)">265</a></td>
<td><a href="javascript:player.seekTo(265, false)"></a></td>
<td><a href="javascript:player.seekTo(270, false)">270</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(270, false)">270</a></td>
<td><a href="javascript:player.seekTo(270, false)"></a></td>
<td><a href="javascript:player.seekTo(275, false)">275</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(275, false)">275</a></td>
<td><a href="javascript:player.seekTo(275, false)"></a></td>
<td><a href="javascript:player.seekTo(280, false)">280</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(280, false)">280</a></td>
<td><a href="javascript:player.seekTo(280, false)"></a></td>
<td><a href="javascript:player.seekTo(285, false)">285</td>
</tr>
</table>
And you can see the page at http://134.117.226.43:8000/check_sub...ty/test101/91/ any help ? Hi, I have written a code below: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function emailRowContent(isSelected, emailAddress, severity)
{
var emailRowObj = document.getElementById('emailRow');
emailRowObj.childNodes[1].childNodes[0].checked = isSelected;
emailRowObj.childNodes[3].childNodes[0].value = emailAddress;
emailRowObj.childNodes[5].childNodes[0].checked = severity;
}
function LoadUp()
{
var emailAddressListObj = document.getElementById('emailAddressList');
var arrayOfEmails = new Array(5);
for (i = 0; i < 5; i++)
{
arrayOfEmails[i] = new emailRowContent( "checked", "fjkum@unknown.com" + i, i );
//emailAddressListObj.appendChild( arrayOfEmails[i] ); /* Somehow this line breaks */
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body onload="javascript:LoadUp();">
<div id="emailRow" class="emailRowClass">
<div><input type="checkbox" class="checkbox1"></div>
<div><input type="text" class="textfield"></div>
<div><input type="checkbox" class="checkbox2"></div>
</div>
<div id="emailAddressList" class="emailAddressClass"></div>
</body>
</html>
Basically, what I want to do is to dynamically create 5 instances of "emailRow" onto the web page making use of Javascript DOM. But have no success in getting it to work. Can anyone shed some light? Mike Hello all, I am doing a website project and in that currently I am designing a product page. I have to design add values to text boxes and drag and drop the text boxes in the workspace and delete the text boxes the user does not want and have to draw a graphical line between the text boxes which are in order. I have designed and coded everything except the graphical line part. I am a learner in javascript and Can we draw a graphical line dynamically between the text boxes in the webpage? If we can draw, can anyone let me know the tutorial for that so that I can learn and start coding as I have to submit that project soon. Thank you. Hi all, I have table in Javascript and it has addrow, deleterow, submit, and functions. when i click it automatically adds new row and it has select option to choose some of them for ex. in added two rows and one of drop down combox i chose Motherboard Asus and from other i chose Motherboard Gigabyte. So i need once i select the name from combobox, should not allow user to select same name in coming rows Here is my code. Thanks beforehands PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head><title>dinamik sheet</title> <script> var i=iteration; function addrow(){ var tbl = document.getElementById('sheet'); var iteration = tbl.rows.length; document.getElementById('count_rows').value = iteration; var row=tbl.insertRow(iteration); var cellLeft = row.insertCell(0); var textNode = document.createTextNode(iteration); cellLeft.appendChild(textNode); var cellRight = row.insertCell(1); var el = document.createElement('input'); el.type = 'text'; el.name = 'txtRow'+iteration; el.id = 'txtRow'+iteration; el.size = 15; el.value = '0'; el.onblur = sum; cellRight.appendChild(el); var cellRight = row.insertCell(2); var elaz = document.createElement('input'); elaz.type = 'text'; elaz.name = 'txtRowaz'+iteration; elaz.id = 'txtRowaz'+iteration; elaz.size = 20; elaz.value = '0'; elaz.onblur = sum; cellRight.appendChild(elaz); var cellRight1 = row.insertCell(3); var ela = document.createElement('input'); ela.type = 'text'; ela.name = 'txtRowe'+iteration; ela.id = 'txtRowe'+iteration; ela.size = 20; ela.value = '0'; ela.onblur = sum; cellRight1.appendChild(ela); var cellRightsel = row.insertCell(4); var sel = document.createElement('select'); sel.name = 'selRow' + iteration; sel.id = 'selRow' + iteration; sel.onchange = sum; sel.options[0] = new Option('MotherBoard ASUS', 'MotherBoard ASUS'); sel.options[1] = new Option('MotherBoard Gigabyte', 'MotherBoard Gigabyte'); sel.options[2] = new Option('MotherBoard MSI', 'MotherBoard MSI'); sel.options[3] = new Option('Graphiqcard ASUS', 'Graphiqcard ASUS'); sel.options[4] = new Option('GraphigCard ATI', 'GraphigCard ATI'); sel.options[5] = new Option('GraphigCard GefORCE', 'GraphigCard GefORCE'); cellRightsel.appendChild(sel); sum(); } function removeRowFromTable() { var tbl = document.getElementById('sheet'); var lastRow = tbl.rows.length; if (lastRow > 2) tbl.deleteRow(lastRow - 1); } function sum(){ var s1 = 0; var s2 = 0; var tbl=document.getElementById('sheet'); var iteration=tbl.rows.length-1; for(var i=1; i<=iteration; i++){//loop through table rows var el1 = document.getElementById('txtRow'+i);//Row's Income field var el2 = document.getElementById('selRow'+i);//Row's percentage menu var ela = document.getElementById('txtRowe'+i);//Row's Tax cell var elaz=document.getElementById('txtRowaz'+i); if(!el1 || !el2 || !ela||!elaz) continue; var txt = el1.value; if(txt != ( '' + Number(txt) )) continue; //reject non-numeric entries var tax = Number(txt) * Number(130); if(el2[el2.selectedIndex].value=="MotherBoard Gigabyte"){ var tax = Number(txt) * Number(150); } if(el2[el2.selectedIndex].value=="MotherBoard MSI"){ var tax = Number(txt) * Number(100); } if(el2[el2.selectedIndex].value=="Graphiqcard ASUS"){ var tax = Number(txt) * Number(85); } if(el2[el2.selectedIndex].value=="GraphigCard ATI"){ var tax = Number(txt) * Number(95); } if (el2[el2.selectedIndex].value=="GraphigCard ATI") { var tax = Number(txt) * Number(88); } ela.value = tax.toFixed(2); elaz.value=tax.toFixed(2)/Number(txt); if(isNaN(elaz.value)){ elaz.value=0; } s1 += Number(txt); s2 += tax; } var t1 = document.getElementById('total'); var t2 = document.getElementById('taxtotal'); if(t1){ t1.value = s1.toFixed(2); } if(t2){ t2.value = s2.toFixed(2); } } onload = function(){ addrow(); } </script> </head> <body> <form name="eval_edit" method="POST" action="part1.php?id=iteration-1"> <table align="center" width="75%"> <tr> <td align="center">Balance sheet</td></tr> <tr> <td align="center"> <table id="sheet" border="1"> <tr><td>object</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr> </table> </td> </tr> <tr> <td align="center"> <input type="hidden" name="count_rows" id="count_rows" /> <input type="button" value="Add" onclick="addrow()" /> <input type="button" value="Remove" onclick="removeRowFromTable()" /> <input type="button" value="SUM" onClick="sum()"/> <input type="submit" value="Submit" /><br /> </td> </tr> <tr> <td align="left"> <input id="total" name="total" type="text"/>total amount of products<br /> <input id="taxtotal" name="taxtotal" type="text"/>total price of products </td> </tr> </table> </form> </body> </html> Hello everyone! I have a select (combo box) element that gets filled with items when selected item changed in another one (master combo box). It works in Chrome, FireFox but not in IE (all latest browser versions). How do I populate the items in the child combo box: - ajax call of a PHP script - that returns items for the combo box: echo '<option value="' . $id . '">' . $name . '</option>'; - setting innerHTML attribute of the child combo box to a value that gets returned by the ajax call: document.forms['parametersForm'].elements['stationId'].innerHTML = html; Do I need to return JSON object (or XML) by the PHP script and programically add items (in JavaScript) in the ajax callback or is there an alternative? Obviously building DOM with echoing PHP result doesn't work well in IE. Thanks for your future help! Regards I am having trouble writing this javascript for my work, normally I would do this in ASP or PHP, but the environment I am working with will only allow javascript for dynamic function. The form has two different select boxes and based on your options selected for select box #1 and select box #2, the hidden input field "redirect" (which is currently empty) would then populate dynamically with the URL associated with that combination mentioned below. The hidden redirect input field (now containing dyanmically generated data) would then pass the new value via HTTP_POST to .net script that will handle the redirect processing step fed to it. Here are the mappings: If selections = Elementary & Vocabulary = http://www.widget.com/content/elem-vocab If selections = Elementary & Writing = http://www.widget.com/content/elem-writing If selections = Elementary & ELD = http://www.widget.com/content/elem-eld If selections = Middle School & Vocabulary = http://www.widget.com/content/midscl-vocab If selections = Middle School & Writing = http://www.widget.com/content/midscl-writing If selections = Middle School & ELD = http://www.widget.com/content/midscl-eld If selections = High School & Vocabulary = http://www.widget.com/content/hiscl-vocab If selections = High School & Writing = http://www.widget.com/content/hiscl-writing If selections = High School & ELD = http://www.widget.com/content/hiscl-eld Here's a snippet of a different method that I tried, but it did not work. I think the above mentioned method would probably be best. Code: <script language="javascript" type="text/javascript">
<!--
function build() {
document.fillgaps.redirect.value = "http://www.widget.com/content/" + document.fillgaps.grade.value + "-" + document.fillgaps.solution.value ;
//print example: http://www.widget.com/content/ELM-VOC
return true;
}
-->
</script>
<form name="fillgaps" action="http://www.widget.com/submit.aspx" method="post" onSubmit="return build();">
<input type="hidden" name="redirect" value="">
<table class="elqFormTable" border="0" cellspacing="2" cellpadding="2">
<tr>
<td valign="top">Grade:</td>
<td>
<select name="grade">
<option value="ELM">Elementary</option>
<option value="MID">Middle School</option>
<option value="HIG">High School</option>
</select>
</td>
</tr>
<tr >
<td valign="top">Solution:</td>
<td>
<select name="solution">
<option value="VOC">Vocabulary</option>
<option value="WRI">Writing</option>
<option value="ELD">ELD</option>
</select>
<!--truncated code -->
Hey chaps, hope someone can help with this: I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables: // tbl_main_colour: Code: ID, NAME 1, Red 2, Blue 3, Green // tbl_shade_colour: Code: ID, NAME, FK_MAIN_COLOUR_ID 1, Light Red, 1 2, Dark Red, 1 3, Light Blue, 2 4, Dark Blue, 2 5, Light Green, 3 6, Dark Green, 3 What I'm after is something to filter the second select option, after the first select option has been chosen // Select 1: Code: Red // Select 2: Code: Light Red Dark Red I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated. I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hi JS Experts, I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny Hey Guys When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this. <select size='1' onchange="updatecodes()" name='reason_code_master'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> Ok so I'm making this form which when a selection is made in one box it will run through the javascript(function getMgmtHours), and update the div(mgmthours). Then another box shows up allowing another selection to be made which runs through the javascript(function getDays) and updates another div(mgmtdate). My problem is that when I use the second box to run through javascript, it overwrites what shows up in the first div (mgmthours) when it should be updating a different div (mgmtdate). Any ideas what I can do to get it update the relevant div and not overwrite the other one? Here is part of the javascript I have in my page head: Code: function getMgmtHours(str)
{
if (str=="")
{
document.getElementById("mgmthours").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("mgmthours").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getmgmthours.php?dist="+str,true);
xmlhttp.send();
}
function getDays(str)
{
if (str=="")
{
document.getElementById("mgmtdate").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("mgmtdate").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdates.php?sunday="+str,true);
xmlhttp.send();
}
Here is the HTML/PHP portion being used: PHP Code: echo "<p>"; echo "Submit hours:"; echo "<form>"; echo "<select name='district' onchange='getMgmtHours(this.value)'>"; echo "<option value=''>Select a district:</option> <option value='1'>1</option> <option value='3'>3</option> <option value='4'>4</option>"; echo "</select>"; echo "</form>"; echo "</p>" echo "<p>"; echo "<form action='./hours.php' method='post' onSubmit='return checkMgmtHours'>"; echo "Weekending Day: "; echo "<select name='weekending' onchange='getDays(this.value)'>"; echo "<option value=''>Choose a Date:</option>"; while ($week < 32) { $nextsunday = strtotime("next Sunday"); if ($week > 0) { $timestamp = strtotime("-" . $week . " week", $nextsunday); } else { $timestamp = $nextsunday;} $weekending = date('M. d, Y', $timestamp); echo "<option value='" . $weekending . "'>" . $weekending . "</option>"; $week = $week + 1; } echo "</select>"; echo "<div id='mgmtdate' />"; echo "<div id='mgmthours' />"; echo "</p>"; Edit: Also, after getMgmtHours() runs, I can still use both getDays and getMgmtHours, howeer once I used getDays, I am no longer able to use getMgmtHours w/o refreshing the page. I have a select box that has ~7000 options, that based on a different dropdown select & input field, gets filtered to 0 - 300 entries. I have another select dropdown that has 13000+ options in total for all the ~7000 entries, but each entry may have 1 to 5 options of these 13000. Is there a way to change the options of the last select dropdown based on what the user chooses in the filtered select box? Currently the idea I'm having is to have the browser load all 13000+ items and filter out the ones that don't apply to the currently selected item, but I'm not sure what kind of lag the user would experience while the browser loads & filters through all these items. Any help would be appreciated. Thanks. I've got some directory list boxes on the site I'm working on. I made them big and fixed rather than drop-down so they're easier to use in this context. But I had to enable the "multiple" attribute to make that work. The site has no provision for multiple selections so it's a tad annoying when the search function selects more than one name in the list. It doesn't really affect the site's operation but it could be confusing to some people. Is there a way to make the listbox show multiple selections without allowing multiple selections? Thanks for any help. <select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:244px; width:220px; margin-bottom: 15px;"> <option>Loading</option> </select> Hi Guys, I am using the following bit of code to toggle information inside a webpage. Is there a way i can make this code more dynamic so that i do not have to use the next() function to initiate slidetoggle()? I would like to have it so i can pass an ID through to the function and it will then toggle my box but i can't figure it out. Javascript is not my strong suite. Here the function Code: function initMenu() {
//$('.items_wrapper').hide();//object to be hidden
$('.headline').click(//object to be clicked
function() {
$(this).next().slideToggle('slow');
//alert("doesn't work");
}
);
}
$(document).ready(function() {initMenu();});
I would like to create a link inside .headline such as .ViewItems If you need to see the code let me know and i will post it. --EDIT-- Right Now my code is like this and you click headline Code: <div class='headline'></div> <div class='items_wrapper'> </div> I would like it work with an internal element like this, so i can't use next() Code: <div class='headline'><div class='selector'>Click Here</div></div> <div class='items_wrapper'> </div> Thanks in advance. note: this is not homework Hi all, Currently I am doing this: Code: var e = document.getElementById('id');
e.style.color = '#ff0000';
e.style.fontFamily = 'sans-serif';
e.innerHTML = time;
...blah blah...
What I'm actually doing is inserting the current time into an existing DIV and updating it every second. THAT all works. What I want to do is also set an event for that div.... something like this: e.event.onclick = 'runThisCode()'; Of course, the above doesn't work... and I'm not even sure what to ask for doing a Google search... because I get no hits (or maybe it's not possible). So, is it possible, and if so, how? Thanks! -- Roger p.s. I really don't want to edit the code itself (where that div is) because it's part of another app that may change as they update it and I don't want to have to re-patch every new release. |
|||||||