JavaScript - Best Way To Send User To Url Based On Selected Values?
I have a form which contains a few drop down lists.
The contents of the dropdown lists are dependent on each other and are populated via php scripts which are called each time a selection is made or changed by the user. When the view results button is clicked in the form I need the user to be directed to a specific page based on the selections they have made. The url of the page they need to be directed to is really based on what has been chosen in the first dropdown. The subsequent dropdowns form variables that I need to be sent to the page so that the data the user sees on that page is relevant. ie if the user has chosen bikes then a specific manufacturer then a specific price range the page they will be sent to will be the bike.php page with all the manufacturer specific bikes in their chosen price range visible. Can anyone tell me the best way to go about doing this please? I had thought about using the php header script along with an if statement but how do I then go about getting the variables sent to the page to be recognised? Would I be better looking at the window.location in js to do this? Any help and advice would be greatly appreciated on this. I can post the code for the form if that makes any difference. Similar TutorialsI'm taking a beginning javascript class and have been trying to figure out one last part of a homework assignment and am just not seeing how to work it out. Any help is greatly appreciated! What I'm having trouble with is doing the text verification. When a user selects an option from the select list they then need to type in the text area given. If the user doesn't type the word selected in the list then an error message should appear under the text area. If you look at my code you'll see that I have the text_check() function doing the verification. I can get it to work when there is only one option but once I add the other two it stops working. I've tried if... else and other variations, but can't seem to nail it down. Thanks! Code: function select_function() { var medical=document.getElementById("medical_list") var selected_item=medical.selectedIndex if (selected_item==0) { document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Medication" + "</span>"+ " Information" var comments=document.getElementById("comments"); comments.focus(); } if (selected_item==1) { document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Hospitalization" + "</span>"+ " Information" var comments=document.getElementById("comments"); comments.focus(); } if (selected_item==2) { document.getElementById("enter_info").innerHTML="Enter Your" +"<span style='color:blue'>" +" Physician" + "</span>"+ " Information" var comments=document.getElementById("comments"); comments.focus(); } } function text_check() { var user_comments=document.getElementById("comments").value.toLowerCase(); var med_comment=user_comments.indexOf('medication'); var hosp_comment=user_comments.indexOf('hospitalization'); var phys_comment=user_comments.indexOf('physician'); mySelectList = document.getElementById("medical_list"); if (mySelectList.value='Medication' && med_comment==-1) { document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Medication"+"</span>"+" somewhere in the text"; } if (mySelectList.value='Hospitalization' && hosp_comment==-1) { document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Hospitalization"+"</span>"+" somewhere in the text"; } if (mySelectList.value= 'Physician' && phys_comment==-1) { document.getElementById("word_error").innerHTML="You need to have the word,"+"<span style='color:red'>"+" Physician"+"</span>"+" somewhere in the text"; } } function submit_alert() { alert("You submitted the form") } function clear_error() { document.getElementById("word_error").innerHTML=""; } function changeDR() { var my_textarea=document.getElementById("comments"); var comment_string=my_textarea.value; var doctor=comment_string.indexOf('Dr.'); var comment_string2=''; if (comment_string < 0) { comment_string2=comment_string } else { comment_string2=comment_string.replace('Dr.','Doctor') } my_textarea.value=comment_string2; } </script> </head> <body style="background-color: silver"> <h2>Medical History</h2> Select Category: <br> <select id="medical_list" onChange="select_function();"> <option>Medication</option> <option>Hospitalization</option> <option>Physician</option> </select> <br><br><br> <div id="enter_info">Enter Your <font color="blue">Medication</font> Information:</div> <br> <form method="post" action=""> <textarea id="comments" cols="60" rows="15" onBlur="text_check();" onFocus="clear_error();" onkeyup="changeDR();"> </textarea><br> <div id="word_error"></div><br> <input type="submit" value="Submit Information" onClick="submit_alert();"/> </form> </body> </html> I have an options list that is generated from a database. It currently has ~125 options in it. I've received the request that the user be able to either enter the corresponding number or select the option from the list. How can I update the "selected" attribute in the options list based on a number that may be entered in another text entry box? Hi, Is there anyone who could help me figure out how to Change a Hidden Fields Name based on selected option. The hidden fields name is sent off and I need to change the name depending on what option they select. For if they select MyList the hidden field name needs to be SelectLists[40] or if they select testlist the hidden field name needs to be SelectLists[41]. This is probably way, way off but I've done this and it doesn't work. Any help would be greatly appreciated, thanks. <script language="JavaScript"> function changelist() { //here we assign the value of the hidden input to x x=eval(document.getElementByName("SelectLists[40]"); if(document.getElementById("SelectLists[40]").selected=true x=SelectLists[40] else(document.getElementById("SelectLists[41]").selected=true x=SelectLists[41] else(document.getElementById("SelectLists[42]").selected=true x=SelectLists[42] //now we assign the new value to the input document.getElementById("theHiddenInput").name=x; //and now we test alert(document.getElementById("theHiddenInput").name) } </script> <input type="hidden" id="theHiddenInput" name="SelectLists[40]" value="Yes"> <select class="inpBox" style="width: 287px" name='mailinglist' id="lists" onchange="changelist()"> <option value="SelectLists[40]" name="SelectLists[40]" id="SelectLists[40]">MyList</option> <option value="SelectLists[41]" name="SelectLists[41]" id="SelectLists[41]">testlist</option> <option value="SelectLists[42]" name="SelectLists[42]" id="SelectLists[42]">testlist2</option> Hello, I am hoping someone can help me with following search form. As you can see I have created a form but I don't know how to fix the coding so when a user select a category it will add a different hidden filed for that option for example: When the user selects category "Men" the hidden filed Code: <INPUT TYPE="HIDDEN" NAME="REFERRER" VALUE="http://men.com/acatalog/"> will be added and when the user selects category "Kids" the hidden filed Code: <INPUT TYPE="HIDDEN" NAME="REFERRER" VALUE="http://kids.com/acatalog/"> will be added and so on... Here is my form coding I am using: Code: <form name="simplesearch" method="get" action="" onsubmit="ssite=document.getElementById('sitelist');this.action=ssite.options[ssite.selectedIndex].value;return true;"> <input type="hidden" name="page" value="search" /> <input type="hidden" name="PR" value="-1" /> <input type="hidden" name="TB" value="A" /> <input type="hidden" name="NOLOGIN" value="1" /><input align="top" class="main_search_box" name="SS" type="text" value="search for ..." onfocus="this.value='';"> Search within: <select id="sitelist"> <option value="">Select Catagory</option> <option value="http://kids.com/cgi-bin/ss000001.pl">kids</option> <option value="http://men.com/cgi-bin/ss000001.pl">men</option> <option value="http://women.com/cgi-bin/ss000001.pl">women</option> </select><input type="submit" class="button" name="ACTION" value="Go!"> </form> Also I have one more question how do I make the "Select Catagory" a Must Choose and if not chosen to give message that say"Please Select a Category" Thank you in advance for any help you can give me... I am a bigginer so please go easy on me My goal is that when I click on the submit button, I just want to display an alert box with the values selected, and also look at this in the console.log. Can anyone help me? Thanks. Code: <html> <head> </head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(init); function init() { $ ("#t").submit(function() { var g = showCheckedValues(); console.log(g); alert(g); }); function showCheckedValues() { // Gather all values of checked checkboxes with name "bedrooms". var checked = $('input[name=bedrooms]:checked').map(function() { return this.value; }).get(); }} </script> <body> <form id="t"> <input type="checkbox" name="bedrooms" value="1">1 bedroom<br> <input type="checkbox" name="bedrooms" value="2">2 bedroom<br> <input type="checkbox" name="bedrooms" value="3">3 bedroom<br> <input type="checkbox" name="bedrooms" value="4+">4+ bedroom<br> <input type="submit" name="save-changes"></input> </form> </body> </html> Hi All, I'm using Philip M's great Javascript tutorial "Triple Combo Box" to populate three combo boxes on my site. The problem i'm having is that I use the combo boxes to allow users to submit a DB search request using GET Form and I need to have the submitted parameters "selected" when the search result page loads. I've searched all over the internet and I can't seem to find a usable solution so any help would be GREATLY appreciated. Thanks! If you need more information, lemme know! Nick total score from selected drop down values Hello friends the following is the code i am using without success Code: var numQuestn = 6; function GetScore(form) { var score = 0; var item = 0; var currQuestn = 0; for (i = 0; i < numQuestn; i++) { item = form.q1.selectedIndex; { score += eval(form.q1.options[item].value); } item = form.q2.selectedIndex; { score += eval(form.q2.options[item].value) } item = form.q3.selectedIndex; { score += eval(form.q3.options[item].value) } item = form.q4.selectedIndex; { score += eval(form.q4.options[item].value) } item = form.q5.selectedIndex; { score += eval(form.q5.options[item].value) } item = form.q6.selectedIndex; { score += eval(form.q6.options[item].value) } } form.total.value = score } i am not able to find the error Please help me Thank you in advance Hey javascript newbie, Im trying to figure out how to add different radio if its selected or not example: Radio_Button1 value="5": Selected Radio_Button2 value="15": Not Selected Radio_Button3 value="25": Selected Radio_Button4 value="35": Selected var addingitup = ??? and im lost???? I want to send a simple email with just email & subject only when the user clicks a link that opens a pdf. I'm thinking javascript is the best way to do this but I have no idea how. I have googled it a bunch but most information is about getting an email when someone clicks a link you send in an email. I don't want that. This is on a website. I'm not sure if php would be better to use. Any help would be most appreciated!
Let me first say I am not a java programmer but I can follow the tutorials and get some things to work. Here I am trying to create a password protected page, realizing the level of security is not very high. This page of code, link1.html, will be blank and if the correct password is entered then I want to automatically link to another page, barcs.html. I simply cannot find a way to do it.....Thanks Code: <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Psw test link 1</title> <script language="JavaScript"> <!--hide var password; var pass1="cool"; var pass2="awesome"; var pass3="geekazoid"; password=prompt('Please enter your password to view this page!',' '); if (password==pass1 || password==pass2 || password==pass3) alert('Password Correct! Click OK to enter!'); else { window.location="http://www.acma-rc.com/"; } //--> </script> </head> <body> This is link1.html<br> </body> </html> How come the below code is not woring for me? when someone comments on my facebook comments plugin I want to get an email. This is what i have Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : '220041184732123', // App ID channelUrl : '//http://www.corkdiscos.com/channel.html', // Channel File status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); FB.subscribe('comment.create', function(response){ // Here you need to do a call to some service/script/application // to notify your administrator about new comment. // I'll use jQuery ajax to call server-side script to illustrate the flow $.post('mail.php', { "action": "comment created", "url_of_page_comment_leaved_on": response.href, "id_of_comment_object": response.commentID }); }); }; // Load the SDK Asynchronously (function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> <div class="fb-comments" notify="true" data-href="http://www.corkdiscos.com/testimonials.html" data-num-posts="30" data-width="544"></div> </body> </html> I then have this php code to send me a mail in a mail.php file PHP Code: <?php $admin_email = 'corkdjs@gmail.com'; $commentID = $_REQUEST['id_of_comment_object']; $page_href = $_REQUEST['url_of_page_comment_leaved_on']; $message = "hello"; mail($admin_email, You have a new comment", $message); ?> what could be wrong and is there anyone that knows how to fix this to make it work? Dear expert (Ok, i am new to this and should maybe not address this as a letter ) I hope someone can help me ... this is what i want to achieve (I am using frontpage) I want to create a table (this i can do!) that require a user input (number of guests). It then has SEVERAL options: - Select an option from a drop down list, and a price is then loaded from somewhere to create a total for that option and display it in the table (And keep that total for adding later) - Check a box, and if checked it creates a further calculation, displaying and storing the number for further calculation. a number of the above options, and a grand total on the bottom. I found more or less a page on a site that does what i am looking for, but after looking at the code, i have even LESS of an idea how it works Can someone PLEASE help me, or point me in the right direction? (I am not looking for someone to just write the code for me, as this will not teach me anything, and i want to learn) Below is a link to the example .. http://www.ouma-se-kombuis.co.za/test.html Thank you! Hi there, I'll try to be brief: When a user submits a website in the input field on my site, I'd like there to be a background process that takes a screenshot of that website and then displays that image to the user. This website does it perfectly. The user writes the website to the right, and the screenshot is displayed to the left. I'm looking for a free alternative, and read that perhaps webkit(s) might be the solution? I'm a total newbie when it comes to this so any feedback is gold to me. Thank you so much guys/gals. I am having a problem sending info to a database. I have set up drag and drop with HTML5 and it is working, but I need to be able to get the values of the images uploaded to the database when each one is dropped into a dropzone. I don't need to upload the images to the database - just need the value of each image sent to it. Here is the HTML: Code: <ul id="images"> <li><a id="1" draggable="true"><img src="images/1.jpg" value = "flower"></a></li> <li><a id="2" draggable="true"><img src="images/2.jpg" value = "boy"></a></li> <li><a id="3" draggable="true"><img src="images/3.jpg" value = "girl"></a></li> </ul> <form name = "objects" id="form" action = "form.php" method = "post"> <div class="drop_zones"> <div class="drop_zone" id="drop_zone1" droppable="true" type = "text" name = "drop_zone1"> </div> <div class="drop_zone" id="drop_zone2" droppable="true" type = "text" name = "drop_zone2"> </div> <div class="drop_zone" id="drop_zone3" droppable="true" type = "text" type = "file" name = "drop_zone3"> </div> </div> and the javascript Code: var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { if (el && el.nodeName || el === window) { el.addEventListener(type, fn, false); } else if (el && el.length) { for (var i = 0; i < el.length; i++) { addEvent(el[i], type, fn); } } }; } else { return function (el, type, fn) { if (el && el.nodeName || el === window) { el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); } else if (el && el.length) { for (var i = 0; i < el.length; i++) { addEvent(el[i], type, fn); } } }; } })(); var dragItems; updateDataTransfer(); var dropAreas = document.querySelectorAll('[droppable=true]'); function cancel(e) { if (e.preventDefault) { e.preventDefault(); } return false; } function updateDataTransfer() { dragItems = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(dragItems[i], 'dragstart', function (event) { event.dataTransfer.setData('obj_id', this.id); return false; }); } } addEvent(dropAreas, 'dragover', function (event) { if (event.preventDefault) event.preventDefault(); this.style.borderColor = "#000"; return false; }); addEvent(dropAreas, 'dragleave', function (event) { if (event.preventDefault) event.preventDefault(); this.style.borderColor = "#ccc"; return false; }); addEvent(dropAreas, 'dragenter', cancel); // drop event handler addEvent(dropAreas, 'drop', function (event) { if (event.preventDefault) event.preventDefault(); // get dropped object var iObj = event.dataTransfer.getData('obj_id'); var oldObj = document.getElementById(iObj); // get its image src var oldSrc = oldObj.childNodes[0].src; oldObj.className += 'hidden'; var oldThis = this; setTimeout(function() { oldObj.parentNode.removeChild(oldObj); // remove object from DOM // add similar object in another place oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /> </a>'; // and update event handlers updateDataTransfer(); // little customization oldThis.style.borderColor = "#ccc"; }, 500); return false; }); and the php PHP Code: <?php $sql="INSERT INTO table_answers (drop_zone1, drop_zone2, drop_zone3) VALUES ('$_POST[drop_zone1]','$_POST[drop_zone2]','$_POST[drop_zone3]')"; if (!mysql_query($sql,$db)) { die('Error: ' . mysql_error()); } echo $_POST["drop_zone1"]; echo $_POST["drop_zone2"]; echo $_POST["drop_zone3"]; ?> There is no error, it is not registering that there is something in the dropzone - nothing is being sent through the php. I have tried doing it with just text(instead of the image) and that won't work either. I am unsure of how to target the value of each image through javascript/php. Please help if you can, Thanks So I am trying to make a form that will eventually take the user to a specified link. It is a form that uses drop down menus. I based this off of someone elses code (with permission ), but it shows everything <= user input. I cannot for the life of me figure out how to make it only show only one of the next options. here is the JS code: Code: <script language="JavaScript"> function ShowMenu(num, menu, max) { for(i = 1999; i <= num; i++){ var menu2 = menu + i; document.getElementById(menu2).style.display = 'block'; } var num2 = num; num2++; while(num2 = max){ var menu3 = menu + num2; document.getElementById(menu3).style.display = 'none'; num2=num2+1; } } </script> This is only the JS code. I didn't want to waste space with the rest of the code. If you want to see it let me know and I can include that. I am sure this is rather basic, but my JS knowledge is less than that...It has been some time since undergrad computer science class. Thanks in advance for any help! Ok I am very very new to java to the point where I only know how to use pre-made javascripts in my php code so be gentle. First, here is part of a form I have: Code: <select name = "pulmonologist" > <option selected="" value="">---Select--- <option value="none">None</option> <?php while ($row2 = mysql_fetch_assoc ($results2)) { ?><option value = "<?php echo $row2['staff_name'];?>"><?php echo $row2['staff_name'];?></option> <?php } ?> </select> Ok now I want to echo the value that the user selects on the SAME page (i.e. before the submit button is pressed) (so I can't do it with php, I need javascript) like this: Code: <input type="submit" value = "Contact <?php echo $pulmonologist;?>" /> Can you tell me how to do this? Thanks! I'm trying to add a body class of 'day' if it's 6am-5pm and 'night' if it's 5pm-6am based on the user's local time. I tried the following but it didn't work. Any ideas? In the <head> Code: <script> function setTimesStyles() { var currentTime = new Date().getHours(); if(currentTime > 5 && currentTime < 17) { document.body.className = 'day'; } else { document.body.className = 'night'; } } </script> Code: <body onload="setTimeStyles();"> Also, is there a more elegant way to achieve what I need? Hi, Please i am not getting clear understanding of a javascript code to redirect user to a different web page based on the day of the week. Please i have search for many script and not getting clear understanding from their code.I have also try several code myself but nothing good has come from it. Please can someone help me and write a descriptive code for me to understand better.I really plead you and your to help me...but i belief the Lord God will bless you for your time helping me. looking forward to here from you. Thank you. Clement Osei |