|
JavaScript - How To Build A Redirect Url Dynamically Based On 2 Select Field Combinations Chosen?
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 -->
Similar TutorialsI have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work. Can I do this? Help Hi Guys, Im in need of some help with regards to forms. I am looking to build as basic as possible, a form that has 3 select dropdowns that have predetermined options. The user will select the first option and based on that option the second will populate and based on that, the third one will give the last option. Now, when the last one is selected, i need a div or a paragraph displaying information to be displayed. So here's the framework. Option 1 = fruit or vegitables of which fruit is selected is selected by the user Option 2 = Apples, Grapes, and pears of which apples is then selected Option 3 = Red, Green and Yellow of which Green is selected. Once green is selected, I need a description about the green aple to be displayed. Can anyone help me out on this? I am not sure where to begin and my boss is adament it must be done like yesterday. Ay help will be appreciated. Thanks. I have a table that has a series of dropdowns. Each dropdown is build with JavaScript based on the values of the prior dropdowns. The data for each of these dropdowns comes from a series of XML files which are loaded into a series of arrays on loading. This is all working. What I need (but can't figure out) is how to dynamically build a sub-table within a specific cell of the parent table based on the values of the prior dropdowns and if the prior dropdowns are changed, how do delete (not just hide) the dynamic table and rebuild it based on the values of the new dropdowns. Hello, I'm very new to javascript and am probably dabbling in stuff that I shouldn't if I am new to it. Nonetheless I've exhausted my resources and am seeking some answers from people who know what they're talking about. I've got this XML file: Quote: <?xml version="1.0" encoding="utf-8"?> <Menu> <Section> <Title>Product Information</Title> <Topic url="howto.html">How to use This Product</Topic> <Topic url="product.html">Product Overview</Topic> <Topic url="sysreq.html">System Requirements</Topic> </Section> ..... </Menu> There's more data than that but for brevity that's the way it's constructed and repeats with several Titles and Topics. Here's the JS i'm using to build a dynamic menu. The goal is to pick up the data and build an Accordion menu out of it: Quote: if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest(); //create ajax var } else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE } xhttp.open("GET","menu.xml",false); xhttp.send(""); xmlDoc=xhttp.responseXML; document.write("<div class='acc'>"); var x=xmlDoc.getElementsByTagName("Section"); for (i=0;i<x.length;i++) { document.write("<dt>"); document.write("<a href='#'>" + x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue + "</a></dt>"); document.write("<dd><ul>"); var y=xmlDoc.getElementsByTagName("Topic")[0].childNodes[0]; for (foo=0;foo<x.length;foo++) { document.write("<li class='acc_item'><a href='#'>" + x[i].getElementsByTagName("Topic")[0].childNodes[0].nodeValue + "</a></li>"); } document.write("</ul></dd>"); } document.write("</div>"); It creates the menu correctly... to a point. It has the correct styling, the accordion works perfectly, it has the correct Titles in the correct places, but when I "expand" one of the Titles it lists the first topic only, and lists it 5 times (the same amount of Titles I have). It then repeats this for every section. Example: Product Information How to Use This Product How to Use This Product How to Use This Product How to Use This Product How to Use This Product I'm not very confident in the syntax, or what it is exactly doing. Any guidance would be very appreciated. Please keep in mind I'm very new. Thanks! 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/ 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> 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 Hi Experts, I have designed an online registration system for a non profit in ASP/SQL. After the members register for classes they are automatically redirected to an invoice page with class fees. At the bottom of the page I have a Total Fees field of all the classes. The member is supposed to pay this amount to our organization. Question: We decided to do an online payment this year and would like to calculate a 2% additional amount on the Total Fees. This amount is paid to the Payment Merchant site. We cannot afford to lose the 2% since we are a non profit. Would really appreciate if someone can tell me how to 1) Add a new field under the Total field 2) And calculate the 2% additional fees and do a Grand Total. Thanks in advance. I have two drop down fields. When I select any value in the first drop down i want the second dropdown to automatically populate the value related to the first one. For e.g i have the first field as name and the second field as measured in. If I select 'Potato' in the first dropdown then the second drop down should populate 'kg'. Please help.
How do I dynamically create a <select> with <options> in Javascript?
I am very very new to programming and trying to create a web interface for a model. The user needs to be able to add as many compounds as they want and add a variable number of subgroups for each compound. Also, each input needs a distinct name. I have tried adapting someone else code to add/remove form inputs but am not having any luck creating subgroups. below is my code Code: <html>
<head>
<title>form</title>
<content="text/html"; />
<script type="text/javascript">
<!--
window.onload = function () {
if (self.init)
init();
}
var counter = 0;
var counter1 = 0;
function init() {
document.getElementById('moreFields').onclick = moreFields;
document.getElementById('moreFields1').onclick = moreFields1;
moreFields();
moreFields1();
}
function moreFields() {
counter++;
var newFields = document.getElementById('readcomp').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writecomp');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
function moreFields1() {
counter1++;
var newFields = document.getElementById('readsubgr').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter1;
}
var insertHere = document.getElementById('writesubgr');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
// -->
</script>
</head>
<body>
<div id="readcomp" style="display: none">
Comp name<input type=text name="comp" value="" size="2"/>
Concentration<input type=text name="comp_qty" value="" size="2"/>
<input type="button" value="Remove comp"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br/>
<span id="writesubgr"></span>
<input type="button" id="moreFields1" value="add subgroup" /><br/><br/>
</div>
<div id="readsubgr" style="display: none">
Subgroup Name<input type=text name="subgroup" value="" size="2"/>
Quantity <input type=text name="subgroup_qty" value="" size="2"/>
<input type="button" value="Remove subgroup"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>
<form action="cgi_bin\show_input.pl" method="post">
<span id="writecomp"></span>
<input type="button" id="moreFields" value="add comp" /><br/><br/>
<input value="Run Program" type="submit"> <input value="Reset all fields" type="reset">
</form>
</body></html>
any help would be appreciated. thanks Hi, I am trying to write some code that will test if a user enters a non-numeric character in an input text field, and if so, replaces it with a '0' Code:
<script type="text/javascript">
function IsNumVal (){
for (J=1; J<=3; J++){
if (isNaN(Number(document.getElementById('Intext' + J).value))){
document.getElementById('Intext' + J).value = 0;
}
}
}
</script>
<Body>
<table border="1" cellspacing="1" id = "Numbers">
<tr id="RowNum1">
<td ><input type="text" size = "5" name="Intext1" id="Intext1" value = "3"
onkeyup="IsNumVal()" /></td>
</tr>
<tr id="RowNum2">
<td><input type="text" size = "5" name="Intext2" id="Intext2" value = "9"
onkeyup="IsNumVal()" /></td>
</tr>
<tr id="RowNum3">
<td><input type="text" size = "5" name="Intext3" id="Intext3" value = "18"
onkeyup="IsNumVal()" /></td>
</tr>
</table>
</Body>
document.getElementById('Intext' + J).value = 0; doesn't work document.Schedule.'Intext' + J.value = 0; doesn't work document.Schedule.Intext2.value = 0; works, but I need to test each text field while looping, so I can't "hard code" the ID. Suggestions? 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> Can anyone help me out with a script that can redirect based on IP address? I want all of my computers on my LAN, 192.168.1.1-255 to be redirected to a specific page. IE When I type in test.homeip.com it goes to my web server and reads the index.html file. If the IP is in the 192.168.1.0 range it will redirect to 192.168.1.10:80 and if its any other IP it will send it to 192.168.1.11:80 Thanks! 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 Hello all. I have created a 2 frame site where I want the top frame (header) to redirect the other frame (main) to a different page depending on the date, time, and second. For example, on 12 FEB at 07:00:00, I would like the header frame to redirect the main frames page to EmmasBday.html; in which I would be alerted of my little sisters Birthday. This is for personal use and isn't going to be hosted online so I will just use JavaScript, it's basically a simple system to remind me of crucial events at certain times and dates so I don't forget them. The same events will apply every year, so there is no need to programme in specific years although having the option could prove useful. I am aware of other alternatives to achieve this, but would very much like to work with JavaScript; as I can expand it. As I state, this is for personal use and therefore won't be hosting it; I will use JavaScript throughout and cannot use anything else like PHP, Perl, etc. I am aware JavaScript takes the time & date from the computer hosting it (unlike PHP), which is fine. So, for example; at 14:30:00 I will be informed to get dinner; and at 15:00:45 I'll be informed to study. The knowledge you guys have presented so far is phenomenal, and I couldn't think of anybody better to ask for assistance. Anyway, I hope you can resolve my problem and I'm looking forward to a response! Thanks for your concern, you brain Gods you! AHa. Hi guys. I am kind of new to javascript, and was hoping that someone here could help out on a problem I have been having. What I am trying to do is to make a page which will redirect to three diffrent sites, based on date. I want it to change to diffrent sites during the time before summer to summer, the time before xmas till xmas and from before easter till easter. A bit more spesific this would be: From 29. march --> 22. july (summer) From 22. august --> 24. december (xmas) From 3. january --> 22. march (easter) Could you help me out? I have tried lots of diffrent ways to do this with javascripts if...else statements, but I havent yet found a way to make it work properly. Really thankful for answers! I am having some trouble trying to adapt some code to create a better user experience. I use a Rapid E-learning Dev Tool called Udutu. Its limited in some functionality but I'm hoping to find a workaround. As with a lot of e-learning, user activity including their assessment score is passed to the LMS via a Scorm connection. I need to get that score and then based on the percentage (i.e <= 79) re-direct the user automatically to a page. To get the score within Udutu is as follows: Code: <p>Your score is: <span id=theScore></span>
<script>try{var theScoreEl = document.getElementById('theScore');theScoreEl.innerHTML= Math.round(UDUTU_API.generateScore());}catch(ex){}</script>
% </p>
This bit works fine but now I need to include a if statement to look at the value that it produces and redirect the user accordingly. I've tried to do this but I keep breaking the above code. Any help would really be appreciated Hello, Im looking for a script where i can have people come to my websites index page, watch a short video and learn about what my site is about, then click a button called "always skip to "my website here" " so once they click that button, they will always be directed to my main website when they return. I belive it will need to be done with cookies aswell? Thanks Chris, I am trying to calculate age based on the date of birth input into a text field. the date field should allow users to enter a one or two digit month, one or two digit date and a two or four digit year. Users should be able to enter any of the following date formats: 11-2-10, 1-25-2010, or 01/25/2010. On some days it works and others it wont, like 11-1-91 returns that the user is under 18. Code: function checkAge(){
var stDate = document.getElementById("birth").value;
var dayPartToDate = parseInt(stDate.substring(0,2),10);
var monPartToDate = parseInt(stDate.substring(3,5),10);
var yearPartToDate = parseInt(stDate.substring(6,10),10);
var dtTo = new Date(yearPartToDate, monPartToDate-1, dayPartToDate);
var mydate = new Date();
mydate.setDate(mydate.getDate());
var bday = dtTo - mydate
if (bday < 18){
window.alert("You must be 18 to rent equipment.");
document.getElementById("birth").value = "";
}
}
|
|||||||