|
JavaScript - Javascript Multi Option Selected & Iframe Src On Page Refresh
i'm working with a city select option, a hotel select option & an iframe. the hotel select option is populated depending on the chosen city which then updates the iframe src. this is all working fine.
the trouble im having is that when the page is refreshed, normal f5 way, the hotel option changes whereas the city option & the iframe src remains the same?? this problem does not occur on a force refresh via control + f5 as then both select options & iframe src revert to their original state. I don't want the city option to change upon a normal page refresh. how do I go about this? below are the city, hotel select options & iframe Code: <form name="hotelslist" id="hotelslist">
<select id="cities" name="cities" onChange="hotel_list(hotelslist.cities.selectedIndex);loadHotel();">
<option value="Baddeck">Baddeck</option>
<option value="Banff">Banff</option>
</select>
<select id="hotelnames" name="hotelnames" onChange="loadHotel();">
<option value="Inverary Resort, Baddeck">Inverary Resort, Baddeck</option>
</select>
</form>
<iframe name="hotelframe" id="hotelframe" src="http://www.google.com" scrolling="no" width="660" height="1000" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe>
below is my javascript functions Code: function loadHotel() {
var destURL = document.hotelslist.hotelnames.options[document.hotelslist.hotelnames.selectedIndex].value;
window.frames["hotelframe"].location = destURL; }
var i;
function hotel_list(i){
var hotelslist = document.getElementById("hotelslist");
hotelslist.hotelnames.options.length=0;
switch(i)
{
case 0: //Baddeck
hotelslist.hotelnames.options[0] =new Option('Inverary Resort, Baddeck','http://www.test0.com');
break;
case 1: //Banff
hotelslist.hotelnames.options[0] =new Option('Banff Caribou Lodge & Spa','http://www.test1.com');
hotelslist.hotelnames.options[1] =new Option('Banff Ptarmigan Inn','http://www.test2.com');
hotelslist.hotelnames.options[2] =new Option('Banff Rocky Mountain Resort','http://www.test3.com');
hotelslist.hotelnames.options[3] =new Option('The Rimrock Resort','http://www.test4.com');
hotelslist.hotelnames.options[4] =new Option('Fairmont Banff Springs','http://www.test5.com/');
break;
}
}
can some one please advise on a cross browser solution? thanks in advance. Omar. Similar Tutorialshi there. i have a classic asp page that is using the winhttprequest object to get the contents of website from a different server. Then i modify the html i get to suit my needs.. save it to a file, and then finally, i display this stuff in an IFRAME. (i wrapped a div tag around the iframe so technically, i'm doing something like: "divtabframe.innerHTML = '<IFRAME SRC='myserver/somepage.html'></IFRAME>) My problem is that when i refresh the main page, i want the iframe to also display the latest data. It does get the latest data from the external site and its saved in "somepage.html". But the iframe isn't updated unless i explicitly right-click inside the frame and manually select refresh. I have added a <meta http-equiv="refresh" content="30"> line to make it auto refresh on it's own. But the users find it annoying that the page refreshes while they're reading it. It would be ideal if when they refresh the main page, the iframe gets updated too. or i could create a new button too... as long as both pages are updated i did find this solution on a different website: document.getElementById(FrameID).contentDocument.location.reload(true); My page inside the iframe is ultimately "local" so it sounds like the above code should work, but i'm not sure what event would be best to trigger this javascript... and i still need a way to refresh the main page too. thanks. What I would like to do is have a page with a dropdown menu, and depending on which option the user chooses from the dropdown, reload the page and display a particular iframe below the dropdown, based on the users choice. Also, a default iframe would load (the one connected to the default choice in the select box). Hopefully that makes sense. I was trying to make this work with PHP (without having the user having to click a submit button) but I couldn't find a way to make it happen.
I have a select box with a few options. When the page loads I need to get the selected option in this select box and alert its inner text. Yet everything I try out on the net that should work wont work in IE, all other browser its fine. Please can someone show me the TRUE and correct way to get the inner text of a option from a select box in IE? Thanks! when I upload a new javascript file to the server and refresh the webpage, the webpage behaves as if the old script is on the server, this happens with IE and firefox, even if I shut the programs down and restart them, can anyone help? I am sorry if this is a stupid question. I have never really used javascript before. I found some code online that I tried to piece together so I might not even be going about this the right way. I want the background to take up 100% and resize with the browser. That works fine. I also want the text "welcome to the ahi life" stick to the bottom left hand corner and the enter button to stick to the bottom right. I would like these to resize with the browser as well. It all kind of works, except the first time you load the page the text and the button are much smaller than I would like them to be. If you refresh the page everything is correct. The url is http://www.ahiapparel.com/landing.html Code: <style>
* { margin: 0; padding: 0; }
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#page-wrap { position:absolute; bottom:0; left:20px; width: 700px; margin: 50px auto;}
#welcometext { position: fixed; bottom: 20px; left: 25px; }
.welcometextwidth { width: 7%; }
.welcometextheight { height: 7%; }
#entertext { position: fixed; bottom: 20px; right: 25px; }
.entertextwidth { width: 7%; }
.entertextheight { height: 7%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function funct1() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
$(function funct2() {
var theWindow = $(window),
$welcometext = $("#welcometext"),
aspectRatio = $welcometext.width() / $welcometext.height();
function resizewelcometext() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$welcometext
.removeClass()
.addClass('welcometextheight');
} else {
$welcometext
.removeClass()
.addClass('welcometextwidth');
}
}
theWindow.resize(function() {
resizewelcometext();
}).trigger("resize");
});
$(function funct3() {
var theWindow = $(window),
$entertext = $("#entertext"),
aspectRatio = $entertext.width() / $entertext.height();
function resizeentertext() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$entertext
.removeClass()
.addClass('entertextheight');
} else {
$entertext
.removeClass()
.addClass('entertextwidth');
}
}
theWindow.resize(function() {
resizeentertext();
}).trigger("resize");
});
</script>
My best guess is that either the functions or some of the variables are conflicting somehow, but I have tried just about everything to fix it. Any help would be much appreciated. Thanks! FF, Safari, Opera all execute this javascript code to refresh the page properly, but in IE version 8.0.6001.18904 the page doesn't seem to refresh on click of orange_refresh button. I have checked out a different version of IE8, don't recall exact version, but it did seem to work fine in that one, whatever version it was probably the latest now that I think of it. Check out code below any sug.'s could be helpful, though its probably a bug.. Code: <a href="javascript:document.location.reload();" onmouseover="window.status='Refresh'; return true" onmouseout="window.status='Page Refreshed'"><img src="image/orange_refresh.png" width="30" height="30" border="0" /></a> I have a simple form with an options drop down box: Code: <form method="POST" name="form"> <select autocomplete="off" id="input" name="input" onchange="this.form.submit();goHere();"> <option>Choose...</option> <option>Question1</option> <option>Question2</option> <option>Question3</option> </select> I wish to identify the option chosen in the function but not by its value, by its position: Code: <script>
function goHere(){
var s = document.getElementById("input");
if (s.selectedIndex == -1) return;
var u = s.form.elements[i];
alert(u);
</script>
I was hoping that variable "u" would be either 0, 1, 2, or 3. How can I get a variable to alert me the position of the selected option in the form? I think it is elements[i]. I couldn't think of a way to explain my idea thoroughly, but I'm learning javascript and I have an html <select> form selected by using getElementById. Now, how do I access the data within the option tags to write to a variable? I know there are many simple ways of making it so that the value of the options are the html color name rather than hex code, but I'm doing this to learn javascript. I have experience with ruby (ok, not THAT much, but I understand the concepts). Anyway's the code explains my problem much better, so here it is: Code: <body>
<form action= "">
<fieldset>
<select id="selColor">
<option value="FFFFFF">White</option>
<option value="#A9A9A9">Gray</option>
<option value="#000000">Black</option>
<option value="#FF0000">Red</option>
<option value="#FFA500">Orange</option>
<option value="FFFF00">Yellow</option>
<option value="#9ACD32">Green</option>
<option value="#0000FF">Blue</option>
<option value="#4B0082">Indigo</option>
<option value="#9400D3">Violet</option>
</select>
<input type="button"
value="Change Color"
onclick="changeColor()" />
</fieldset>
</form>
<script type="text/javascript">
//<![CDATA[
function changeColor() {
var selColor = document.getElementById("selColor")
var color = selColor.value
var colorid =
if (confirm("would you like to change color to "+colorid+"?")) {
document.body.style.backgroundColor = color
}
}
//]]>
</script>
</body>
I haven't initialized var colorid, but I'm trying to set it to either of the highlighted parts of the following piece of my code. <option id=" white " value="FFFFFF"> White </option> I want to access that part of the option tags of the element that the user selects. So, without changing the hex values to the color equivalent, how do I access the name of the selected option tag? ( I could make an if/switch statement to translate the hex color into a name and put it into the variable, but I would like to know how to do what I'm asking in case I run into a similair problem.) I have a dropdown box with 2 options: Free or Upgraded I need to do 2 separate things depending on which one is chosen. If Free, then set the value in fourth text field to 9999 else, set value in Fourth field to 5555. Code: <head>
<script type="text/javascript">
function calculate()
{
var myLevel = eval(document.earningsform.level.value)
var memberType = eval(document.earningsform.type.value)
if(memberType==free){
document.earningsform.fourth.value = 9999;
}
else{
document.earningsform.fourth.value = 5555;
}
</script>
</head>
<body>
<table>
<form action="calculator.php" method="POST" name="earningsform">
<tr>
<td align="center">My Level: </td><td><input type="text" name="level" value="50" size="10"></td><td></td>
</tr>
<tr>
<td align="center">Member Type: </td><td>
<select name="type">
<option value="upgraded" name="upgraded" selected="selected">Upgraded</option>
<option value="free" name="free">Free</option>
</select></td>
<td></td>
</tr>
<tr>
<td align="center">4th Level: </td><td><input type="text" name="fourth" size="10" value="5"></td><td>7.5</td>
</tr>
</form>
</table>
</body>
Hello everybody, I have a javascript adding new options to a drop down select menu getting the information from the database. The code is as written below: Code: function setOptions1() {
var selbox2 = document.egitimgiris.alttipID;
selbox2.options.length = 0;
selbox2.options[selbox2.options.length] = new Option('Option1','22')
selbox2.options[selbox2.options.length] = new Option('Option2','23')
selbox2.options[selbox2.options.length] = new Option('Option3','24')
selbox2.options[selbox2.options.length] = new Option('Option4','25')
}
I want one of them to be added as selected. I will put an "if" check and if it the value of the option and the value in the database is equal I want that option to be added as "selected". Is this possible? If yes, how? Please help. Thanks and regards telmessos Hello Friends In my jsp,Struts project i am using the javascript calendar control for selecting the date and by using function calcage() i am calculating the age of the user but problem occurs when the page refreshes OR when user updated the other values such as name ,contact no. Then the value of the age is set as 0 in the textfield as 0 So can you please tell me why this problem occurs And please give me solution Thanks 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? ive been racking my brain looking for a code solution for this....im a html and css pro....and a javascript NOOB lol heres what im tryna do....i have a form...that has a Code: <option> in it for 6 dropdown options.... in one of those possible options.. when SELECTED...i want the div layer that i currently have under it...to appear and i cant seem to figure it out....heres my code in its entirety i want budget div...to appear when the option website design is selected Code: <label for="subject">What are you interested in?<em>•</em></label>
<select type="text" value="Choose a Service" name="subject" id="subject" />
<option selected> -- Select A Design Service --</option>
<option id="website"> Website Design </option>
<option> Twitter </option>
<option> Ning or Tumblr </option>
<option> Flyers </option>
<option> Business Card or Brochure</option>
<option>Other</option>
</select><br />
<div id="budget" style="display:none;"><label> Do you know your budget for this Project? </label> <input style="width:auto" type="radio" name="message" value="Not Sure"> Not sure
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="$400-$800"> $400-$800
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="$800-$1200"> $800-$1200
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="over $1200"> over $1200
</div>
Greetings, I am trying to make a form that collects "Number of Children" a parent has. If they select "4" from the select input, then I want to slidetoggle out the appropriate divs, one for each child. Code: <select id="NumberofChildren" name="NumberofChildren">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
The div IDs to display are 1child, 2child, 3child, 4child, 5child. I have been able to use slidetoggle in the past when attached to a button, but this one has me lost. Anyone know how to accomplish this? Your help is greatly appreciated! Thank you! Hi, I'm new to JavaScript. I'm trying to create my form in such a way that if 'Premium' is selected, a the text box with label 'membership no' is displayed and if 'bronze' is select, the drop-down list 'sponsor' is displayed instead....here's what my form looks like... PHP Code: <form id="form1" name="form1" method="post" action=""> <p> <label for="select">Membership:</label> <br /> <select name="select" id="select"> <option value="Premium" selected="selected">premium</option> <option value="Bronze">bronze</option> </select> </p> <p>Membership No:<br /> <input type="text" name="textfield" id="textfield" /> </p> OR<br /> Sponsor: <br /> <select name="select2" id="select2"> <option value="329">329</option> <option value="234">234</option> </select> </form> appreciate the help Hi, I am using following code-- Code: <td>
<centre>
<select id=\"extenddays\" size=\"1\" name=\"extenddays\">
<option value\=\"2\"> 2 </option>
<option value\=\"4\"> 4 </option>
<option value\=\"7\"> 7 </option>
</select>
<a href=?ext_days=\"extendform.extenddays.value\" & ?extfid=" . $data->{'fid'} ." \" >
<INPUT TYPE=\"SUBMIT\" NAME=\"extend\" VALUE=\"extend\" />
</a>
</centre>
</td>
Here, I want that when I click on 'extend' button, it should redirect to the url given in the href.. But while forming url run time , it is not retrieving the value of "extenddays" ( which is selected option value).. Please help. Cheers, Shashikant Shinde I'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've inherited this piece and now I'm suppose to add to it. Its basic function currently is when the "Other" option is selected, a hidden text field shows. Now, I need to add when "Athletics" is selected, another hidden select group will show. I've set up the new Select group already, but not sure how to incorporate it into the already existing script. I've been researching for two days, and hopefully this form will be helpful. Code: <select id="Program" name="Program" size="1" onchange="
$other = document.getElementById('other_program').style;
$invoice = document.getElementById('invoice');
if (selectedIndex==6) {
$other.visibility='visible';
if ($invoice.value == 'General Fund') $invoice.value='';
} else {
$other.visibility='hidden';
if (selectedIndex==1) {
$invoice.value='Renegade Fund';
} else {
$invoice.value='Please Specify';
}
}
">
<option selected="selected" value="Not Selected"> - - Select One - - </option>
<option value="Athletics">Athletics</option>
<option value="Drum Line">Drum Line</option>
<option value="Renegade Fund">Renegade Fund</option>
<option value="General Scholarships">General Scholarships</option>
<option value="President's Circle">President's Circle</option>
<option value="Other">Other</option>
</select>
<span id="other_program"><input type="text" id="invoice" name="invoice" size="15" /></span>
<!-- the following is the new select group ive set up
<span id="alumni">
<select id="select-alumni" name="select-alumni" size="1">
<option selected="selected" value="Not Selected">Yes or No</option>
<option value="Yes-alumni">Yes</option>
<option value="Not-alumni">No</option>
</select>
</span>
-->
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> |
|||||||