|
JavaScript - Select Tag Javascript (dependent Dropdownlist)
Code:
I have to create two dropdownlists that are dependent
In my first select tag there are 4 selections ,,, year,quarter,month and week.
and in second select it should automatically populate..If user select year from first select in second select values should be 1 to 365.. if quarter values in second select(dropdown) should be 1 to 4. if month 1 to 12 and if week is selected 1 to 7.. can anyone help me to achieve this.. I will post that code and please help me to resolve this error as iam naive user to javascript..
<select id="user_defn_uom" name="user_defn_uom" onchange="alert(this.options[this.selectedIndex].text)" align="center">
<option selected value="">
<option value="Yearly">Yearly
<option value="Quarterly">Quarterly
<option value="Monthly">Monthly
<option value="Weekly">Weekly
</td>
<td>.
<select name="user_defn_day" align="center">
<option selected value="">
<script type="text/javascript">
alert(this.options[this.selectedIndex].text)
for (var i = 1; i <=366; i++)
{
document.write('<option value="' + i + '">' + i + '</option>');
}
</script>
</select>
Similar TutorialsHi Experts, i have 2 JS array and i need to have dependency between them knowing that 1st Array has parent element of the 2nd one. i.e ARRAY1 ID VAL ID2 2 Dep1 10 3 Dep2 20 4 Dep3 30 ARRAY2 ID VAL ID2 PARENT 20 team1 11 10 21 team2 12 10 22 team3 13 20 23 team4 14 30 i need to have two different DDL's where when i choose VAL = Dep1 on ARRAY1 , i should see on the 2nd DDL only elements with parent corrsponding to Dep1 ( PARENT =10). how this can be possible thanks I have an ajax dependent drop down set up for location fields and am having trouble figuring out how to clear the dependent selects if the parent select is changed to blank. I set up a function to clearFields: Code: <script>
function clearFields() {
document.getElementById('cb_state').value = "";
}
</script>
And then set the parent to clearFields onchange: Code: onchange='ajaxFunction();clearFields();' This doesn't clear the field, but even if it did it would clear the field on change regardless of what's selected, what I need is for the function to fire only if the blank option is selected. How do I need to go about this? Hi, i need a dropdownlist in javascript... in which the dropdown list contains the names.... the names should come from database.... by this query "select distinct c_main from kpitable" can some body help me... Hi everyone, now I need to add items into a dropdown list, and the items would be sorted alphabetically and it does not allow duplicate items to be added. Can anyone help take a look and see what's wrong with my code? Javascript Code: function addAnotherOption()
{
var newItem = document.getElementById("Text44");
if (!newItem.value == "")
{
var answer = confirm ("Are you sure you want to add? ")
if (answer)//if answer is true
{
var lst = document.getElementById('comboBox'); // listbox control id
// Now we need to create a new 'option' tag to add to MyListbox
var newOption = document.createElement("option");
newOption.value = newItem.value; // The value that this option will have
newOption.innerHTML = newItem.value; // The displayed text inside of the <option> tags
for (var i = 0; i < lst.options.length; i++)
{
arrTexts = lst.options[i].text;
if (arrTexts.toLowerCase() == newItem.toLowerCase())
{
alert ("That option is already included in the list - please enter another item.");
return false;
}
else
{
// Finally, add the new option to the listbox
lst.appendChild(newOption);
//sort items in listbox in alpha order
arrTexts = new Array();
for(i=0; i<lst.length; i++)
{
arrTexts[i] = lst.options[i].text;
}
arrTexts.sort();
for(i=0; i<lst.length; i++)
{
lst.options[i].text = arrTexts[i];
lst.options[i].value = arrTexts[i];
}
}
}
}
}
else
{
if(newItem.value == "")
{
alert("Key something to textbox please.");
}
else
alert("Cancelled.");
}
}
HTML Code: <input id="Text44" type="text" />
<input id="Submit22" type="submit" value="Add" onclick="addAnotherOption()" /><br />
<select name="combo" id= "comboBox" style="width: 323px">
<option value="H">Hearts</option>
<option value="D">Diamonds</option>
<option value="C">Clubs</option>
<option value="S">Spades</option>
</select>
Here's part of the code, problem I have is I have it set up for 5 rows, I need it to be able to make more than this, but not sure how many more, this is dependent on user input, how should I go about this? Also how would I go about making the users orders correspond with the right item number? I'd need to sort the array somehow? document.write('<table border="1">'); document.write("<tr>"); document.write('<th colspan="5">ORDER</th>') document.write("</tr>"); document.write("<tr>"); document.write('<th align="left">Item #</th>'); document.write('<th align="center">Name</th>'); document.write('<th align="center">Price</th>'); document.write('<th align="center">Quantity</th>'); document.write('<th align="center">Total</th>'); document.write("</tr>"); document.write('<td align="center">0</td>'); document.write('<td>' + productName[0] + '</td>'); document.write('<td> $' + sausagePrice + '</td>'); document.write('<td> ' + orderItemQty[0] + '</td>'); document.write('<td> ' + sausageTotal + '</td Hi Peers, i have a Drop down list with 10 choices (skillset). users must choose one skillset and the corresponding level (beginer/intermediate/master). ( they have to do this 10 times for all the sillsets) what i want is : 1 - i need to show up only one record (dropdowanlist) with level then have a button to add new skill and level if required 2- then when they choose the 1st skill from the dropdown , this one will not show up on the 2nd choice dropdown. is it possible any help ? thanks guys 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. Hey guys I need a small help. I am new to Javascript. I want to save data from dropdownlist to XML file. Save function is working but I dont know how to load data list from dropdown to xml file. I can do with input element but dont know how to work with dropdown element. How to do this? Look at my codes below: HTML markup (index.html): FOCUS ON RED <body> <form name="reg" action="index.html" method="get"> Name: <input type="text" name="name_input" /> Pass: <input type="text" name="pass_input" /> <select id="language"> <option name="select_afrikaans">Afrikaans</option> <option name="select_english">English</option> </select> <br /> <input type="button" value="SAVE" onclick="javascriptk_click();" /> </form> </body> Javascript: function ok_click() { var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.6.0"); xmlDoc.async = false; xmlDoc.load("data.xml"); if (xmlDoc.readyState == 4 && xmlDoc.parseError.errorCode == 0) { var root = xmlDoc.documentElement; var _input_name = xmlDoc.createTextNode(document.reg.name_input.value); var _input_pass = xmlDoc.createTextNode(document.reg.pass_input.value); var _select_afrikaans = xmlDoc.createTextNode(document.reg.select_afrikaans.value); var _select_english = xmlDoc.createTextNode(document.reg.select_english.value); var input_name = xmlDoc.createNode(1, "USER", ""); var input_pass = xmlDoc.createNode(1, "PASS", ""); var input_select = xmlDoc.createNode(1, "LANGUAGE", ""); input_name.appendChild(_input_name); input_pass.appendChild(_input_pass); select_afrikaans.appendChild(_select_afrikaans); select_english.appendChild(_select_english); var cust = xmlDoc.createNode(1, "CUST", ""); cust.appendChild(input_name); cust.appendChild(input_pass); cust.appendChild(select_afrikaans); cust.appendChild(select_english); root.appendChild(cust); SaveXML(xmlDoc, "data.xml"); alert("Save!"); } } // It is working fine function SaveXML(xmlDoc, filename) { var outputXML = new String(xmlDoc.xml); var mfObj = new ActiveXObject("Scripting.FileSystemObject"); var absPath = getPath(); var file = mfObj.CreateTextFile(absPath + filename, true); file.Write(outputXML); file.Close(); } //it is working fine function getPath() { var path = document.location; var str = new String(path); var end = str.lastIndexOf("/"); var absolutePath = str.substring(8, end) + "/"; absolutePath = absolutePath.replace(/ /g, " "); return absolutePath; } XML File: <?xml version="1.0"?> <DATA> <CUST> <USER>natalie</USER> <PASS>80</PASS> </CUST> ........ here should display xml data from dropdown list.....how? </DATA> Your help would much appreciated. Thank you very much Regards Natz Hello guys, How to populate array from dropdownlist? I've tried like this var array = new array(); var d = document.getElementById("DropDownListl"); for (var i = 0; i < d.options.length; i++) { array[i] = d.options[i].value; } Thank you Hi, I have this web browser which opens up a website that has a drop down list showing values that the user can select. And when I the firebug to inspect the elements in the page, what shows in the inspection window is this: Code: <select id="instance2" name="instance2">
<option value="0">All instances</option>
<option value="1">Item0</option>
<option value="2">Item1</option>
<option value="3">Item2</option>
.
.
.
<option value="23">Item22</option>
What I'm supposed to do is to get the values and update them automatically to the database. I'm actually using HtmlUnit to do this project, and I've heard how I can use getElementById() to get the values. But I don't know how to start. I'm a beginner so I might need a lot of help on this matter. Help is kindly appreciated. Thanks. i have a dropdownlist with some values,ex: One, Two and Three; One being the default value selected on load of dropdown list. When I select Two or Three, there is onselectedchange event fired and I can write custom code in handler. But I also want to do some custom handling when page is loaded and user justs clicks on default value of "One". I want to take an action when user clicks on default value, "One" of dropdwn. any suggestions/ideas? Hi All. I have a dropdown list on a web form containing dates. My Question: How can I call data for that selected item(date) from a MySQL database and display it to the user? And more specifically, if that selected date has no data in the data base, I want to be able to display that as well. I'm looking for a Javascript solution, and if possible a php solution. Thank You! I've got no knowledge/experience of javascript, but i'm pretty competent with html and css. I've put together a site for my University radio statio, and i'd like to have a section that displays the show name thats broadcasting at the time. Can anyone point me towards a script, or tutorial, that might help me out? Thanks in advance! Hullo again, CF.com, So, now I have a curious question on arrays, selections, options and the like. My current project is available for perusal in order to assist me at: http://www.projectvoid.co.uk/ As you can see, I make it so that once the product type is selected, you can then select a wattage. This dependent drop-down works, however I want it so that when I select a value in the left-hand side (wattage), then the one on the right will offer a pre-defined value that replaces the wattage I have. For example, a GU-10 in 'Type of Lamp' offers a 50, 35 and 20 watt bulb in 'Current Lighting Products'. In 'Energy Efficient Products', it offers 5 and 3. I wish to make a statement somewhere so that if they select 50 on the left, it selects 5 on the right. If they select 35 on the left, it select 3 on the right. I would also like it to do multiple offers, so that if they select say, a 35 of the MR-16, I want the right hand side to offer both 5 and 3. The only way I can think of doing this is via a lot of 'IF' statements. Is there a quicker way to do this? Please assist and, if it's not too much to ask, could you comment the code? Thank you! I have my cumulative totals box at the very end of my order form and I'm required to have another underneath that one that will give a particular discount depending on how great the total of the order is. Would someone please be able to give me the javascript codes that will allow me to do this and also tell me where I'm to put them. I am working a form with radio button and calendar. What I would like to do is when the user selects Done - be able to display the calendar and if Not Done is selected, disable the calendar. Here is my code: <tr> <td class="tajuk_kecil"><div align="right">Status </div></td> <td class="tajuk_kecil"><div align="center">:</div></td> <td> <label><input name="status" type="radio" value="Done" checked>Done </label> <label><input name="status" type="radio" value="Not Done">Not Done</label> </td> </tr > <tr> <td class="tajuk_kecil"><div align="right">Date</div></td> <td class="tajuk_kecil"><div align="center">:</div></td> <td> <?php $myCalendar = new tc_calendar("date5", true, false); $myCalendar->setIcon("calendar/images/iconCalendar.gif"); $myCalendar->setDate(date('d'), date('m'), date('Y')); $myCalendar->setPath("calendar/"); $myCalendar->setYearInterval(2000, 2015); $myCalendar->dateAllow('2008-05-13', '2015-03-01'); $myCalendar->setDateFormat('j F Y'); $myCalendar->writeScript(); ?> </td> </tr> Any suggestions would be greatly appreciated. Thanx Hi all, I am a newbie to JS. So please extend your help suggesstion to solve this problem I have. I have 2 select boxes. Data in one select box is corresponding to the data in the other select box. When the user comes in and selects example the 3rd element from the first or second select box the correspoinding 3rd element from the other select box should be selected. Please help with the solution.Thanks in advance I have got this piece of code where JavaScript will change a FORM OPTION if it has been selected before (incase the user returns to the page - doesn't have to refill in things), but its not working and my web browser reports this error: Quote: Error: document.getElementById("Dr") is null This is the code: Code: <SCRIPT type="text/javascript">
document.getElementById("<?php echo $_SESSION['recipient']['title']; ?>").selected = "selected";
</SCRIPT>
Code: <FORM action="process.html" method="post"> <DIV class="deliveryinformationdata"> <DIV> <B>Title:</B> <SELECT name="title"> <OPTION></OPTION> <OPTION id="Dr">Dr</OPTION> <OPTION id="Miss">Miss</OPTION> <OPTION id="Mr">Mr</OPTION> <OPTION id="Mrs">Mrs</OPTION> <OPTION id="Ms">Ms</OPTION> </SELECT> </DIV> <INPUT type="submit" value="Submit"> </DIV> </FORM> Can anyone see a problem? Hi, would someone know how to convert the left side (textbox) into the same thing as the right has (select box) also by modifying the JS code from the example of this URL: http://www.mredkj.com/tutorials/tableaddrow.html ? It would be a really good feature to have if two select options were used from side-to-side rather than a textbox and a select list. Calculating quiz answers? Code: var correctAnswers = new Array();
correctAnswers[1] = "Extensible Hypertext Markup Language";
correctAnswers[2] = "<p></p>";
correctAnswers[3] = "<br />";
function checkAnswers(){
var score = 0;
for (i=1; i<4; i++){
correctAnswers = getSelectValue("quiz","q" + i);
if (correctAnswers == correctAnswers[i]){
score++;
}
}
|
|||||||