JavaScript - Dropdown Changes Text Elsewhere On Page

Hello,

I would like to know how can I send the selection from a dropdown from a webpage to another. In the first page where I have the dropdown list, I have this:

Code:

<td valign="top" align="left" nowrap width="90%">
<input name="time" style="width:100%" />
</td>	
	
<td valign="top" align="left" nowrap width="50">
           <select name="time2">
	    <option value="60">Minutes</option>
	    <option value="3600">Hour</option>
	    <option value="86400">Days</option>
	</select>
           </td>

In the second page, where I want this selection to be dispalyed, I created this code:
Code:

<td width="188" valign="top" align="left" nowrap>
<SCRIPT LANGUAGE="JavaScript">document.write(window.opener.document.form.elements["time"].value + " " + window.opener.document.form.elements["time2"].value);</SCRIPT>
				</td>

The issue I have with this is that the value dispalyed for the "time2" element is the actual attribute value (for instance 60) and not the actual value (for instance "Minutes").

If anyone have a clue what I'm doing wrong, I appreciate your help.

Regards,

How can I execute this:

From the dropdown list build up from mysql database (say a list of fruits).

I select "Add New Fruit". This triggers it to either have a modal form to add new fruit or a table form.

Once submitted, Select dropdown list RELOADS including the newly added data (fruit) without reloading the whole page which contains other form control such as textbox.

Hi all,

Thanks for reading. I'm having an issue trying to accomplish the following -

I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after.

This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly?

Code:

<script language="javascript">

fields = 1;

function addMore() {

if (fields = 1) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";

fields = 2;

} else if (fields = 2) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;

} else {

document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;

}

}

</script>

Here is the code in my HTML -

Code:

<input type="text" name="field1" size="25" /> <span>Field 1.</span>
<div id="addedMore"></div>
<p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p>

Thank you very much.

There are two pages,


folder/india.html
folder/usa.html
and dropdown menu in each page to switch between india and usa pages.


india.html page sells in INR and usa.html in USD with links to shopping carts for each currency.


link1(INR)
link2(USD)

Except the link and the currency information(selling price), contents in both the pages are same.

So here comes the problem. Google hates duplicate pages!

I am looking for a solution where,



a single page In That Page, a dropdown menu to select currency As the currency is selected, without page reload, the link to shopping cart and the pricing also should be changed according to the selected currency. So Single page should be able to handle both the currencies.

Kindly suggest me with codes as I am new to javascript. Thanks a lot

What I want to do, is that, when the user select one option out of many from the dropdown box some new fields appears.

I was so close to make it , using this example:
Code:

<script type="text/javascript">
function showInfo()
{
var elem = document.getElementById('verify');
if(document.forms[0].menu.value == "verify"){
elem.style.display="inline";}
else{
elem.style.display="none";}
}
</script>
</head>

<body>
<form action="#" method="post">
<select name="menu" onchange="showInfo()">
<option value="none">Select an option</option>
<option value="email">Email</option>
<option value="verify">Verify</option>
</select>

<div id="verify" style="display:none;">
<input type="text" value="Username" >
<input type="password" value="password" >
</div>
</form>

But what I do want, is that two differen things appear on the page and in the different location of the page. And this script does not read the second <div>. So the result is, that the only first <div> appears.

Here are some images of what I want to do.
Befo
http://img82.imageshack.us/img82/7093/beforens9.jpg

After
http://img246.imageshack.us/img246/2759/afterzh2.jpg (what has to be changed is on the red circules).

So can someone help me with this script?? Please! I am pritty noob to the javascript.

Hi,

I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now.

The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again?

I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution:

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>

<title>HTML Template</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript">
//<![CDATA[

function store(element) {

// store values

	var cl = element;
	
	var text_list = new Array();
			
	var value_list = new Array();
	
	var length = cl.length;
	
	for (var foo=0; foo<length; foo++) {
	
		text_list[foo] = cl.options[foo].text;
		
		value_list[foo] = cl.options[foo].value;
		
		alert("text array " + foo + " " + text_list[foo]);
		
		alert("value array " + foo + " " + value_list[foo]);
		
	}
	
	populate(cl, text_list, value_list);

}

function populate(element, text, value) {

	// populate options with previously stored values
	
	var cl = element;
	
	var length = cl.length;

	cl.options.length=0;	
	
	for (var bar=0; bar<length; bar++) {
		
		cl.options[bar]= new Option(text[bar], value[bar], false, false);
		
	}
	
}

function crafty_set_country(code) {	

	var cl = document.getElementById('select');
	
	store(cl);
	
	for (var i=0; i<cl.length; i++) {

		if (cl.options[i].value == code) {

			alert(cl.options[i].value + " found");
			
			var value = cl.options[i].value;
			
			var text = cl.options[i].text;
			
			cl.options.length=0;
			
			cl.options[0]=new Option(text, value, true, true);
			
			/*
			for (var j=0; j<cl.length; j++) {
			
				alert("second loop " + cl.options[j].text);
				
				if (cl.options[i].value != code) {
				
					cl.options[j]
				
				}
			
			}
			*/
			
		} else {
		
		alert(cl.options[i].value);
		
		}
		
	}
	
}

//]]>
</script>

</head>
 
<body>

<form>

<select id="select">
  <option value="10">ten</option>
  <option value="20">twenty</option>
  <option value="30">thirty</option>
  <option value="40">fourty</option>
  <option value="50">fifty</option>
  <option value="60">sixty</option>
</select>

<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">

</form>

</body>
</html>

Many thanks!

Martin

like for example i have text areas named upload1 and upload2

when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts"

Hi all,

I have been struggling on a bit of code for a while now. I need to populate a second drop down list (Region) based upon the selection of the first (County).
I have found a piece of code that works on its own and have adapted to suit my needs - see below. However, when I drop it into my main page the javascript is not working. It's because of the formObject but I just don't know enough to resolve this! Furthermore, I need the textboxes the user has already completed in the form to retain their value once the javascript kicks in as the completed form will submit to a database.

This piece of code is working well . . . .
Code:

<?php

$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');

if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}

if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}

?>

<script language="JavaScript">

function autoSubmit()
{
var formObject = document.forms['theForm'];
formObject.submit();
}

</script>

<form name="theForm" method="get">

<!-- County SELECTION BASED ON city VALUE -->

<?php

?>

<select name="County" onChange="autoSubmit();">
<option value=''</option>

<?php

//POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN city

$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);

while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}

?>

</select>

<?php

?>

<br><br>

<?php

if($County!= null && is_numeric($County))
{

?>

<select name="Region" onChange="autoSubmit();">


<?php

//POPULATE DROP DOWN MENU WITH RegionS FROM A GIVEN city, County

$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);

while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}

?>

</select>

<?php

}

?>

What follows is my form where the javascript is not working - edited quite a bit to save on space!

Code:

<head>
 
<script language="JavaScript">

function autoSubmit()
{
var formObject = document.forms['subform'];
formObject.submit(); 
}

</script>

</head>

<form enctype="multipart/form-data" method="post" action="add_attraction01.php" FORM NAME="FormName">     
<input type="hidden" name="MAX_FILE_SIZE" value="32768" />    
<label for="Business_name">Business Name</label>    
<input type="text" size="60" STYLE="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: #72A4D2;"     
<id="Business_name" name="Business_name" maxlength=60/><font size="1" face="arial" color="red">Required field</font><br />    
<label for="StreetAddress">Address</label>    
<input type="text" size="60" rows="2" id="StreetAddress" name="StreetAddress" maxlength=120/><font size="1" face="arial" color="red">Required field</font><br />    
<label for="Town">Town</label>    <input type="text" size="25" id="Town" name="Town" maxlength=25/><font size="1" face="arial" color="red">Required field</font><br /> 

<?php

$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');

if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}

if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}

?>

<form name = "subform" method="get"> 

<select name="County" onChange="autoSubmit();"> 
<option value=''</option>

<?php

$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);

while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}

?>

</select>

<?php

?>

<br><br>

<?php

if($County!= null && is_numeric($County))
{

?>

<select name="Region" onChange="autoSubmit();">


<?php

$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);

while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}

?>

</select>

<?php

}

?>
<input type="text" size="20"id="Tel_No" name="Tel_No" maxlength=20 onkeypress="return isNumberKey(event)"/><font size="1" face="arial" color="red">Required field</font><br />    
<br/>    
<input type="submit" value="Submit your attraction" name="submit" onclick="return BothFieldsIdenticalCaseSensitive();"/>   
</form>
</body>
</html>

It's probably obvious to you guys!!

Thanks in advance for your help.

hey guys
The first dropdown has some options as :
abc(a)
bcd(a)
cde(b)
def(b)
efg(c)
fgh(c)
The second dropdown has :
a
b
c
On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance.

Hello, I am completely new to HTML/JS/CSS, therefore I know very little.

I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July".

I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected).

If it matters, I am using IE8. Thanks!

How do I make it so that typing into a text box and hitting a button will take me to a different page and populate a text box on that page with the text from the previous page?

Good Morning all
I have a code that worked and i messed something up trying to add on to it and i cant figure out what i did
I have a form for gift certificates (giftcerticate.html)user enters to: amount: from: then can choose a gift card to include with it. to do so they click a link that sends them to another page (giftcards.html) with a group of radio buttons. they choose a radio button where the result is to be sent back to the first page (giftcerticate.html) and place the result in a text box with a sample of the giftcard image.
My issue is that when i go back to the first page it does not pass any of the values to the textboxes. it does show the the text box id's in the URL but no values or place them in the boxes.
here is what it sends in the url:

http://www.allyscandle.com/index/GIF....html?product1[]2=&product1[]=&price1=&giftcardstocknumber=BBA+-+003&submit=CARD+STYLE+CHOOSEN

here is the script:

<script type="text/javascript">
function getURI(string,parm) {
var url = location.href; // Get the current URL
var gsn = (location.href.split('giftcardstocknumber=')[1].split('&')[0]).replace(/\+/g,' ');
var img = (location.href.split('img=')[1]).replace(/\+/g,' ');

document.getElementById('gsn').value = gsn;
document.getElementById('gsn-img').src = 'GIFTCARDS/'+img;
}
window.addEventListener?window.addEventListener('load',getURI,false):window.attachEvent('onload',get URI);
</script>


here are the two forms
http://www.allyscandle.com/index/GIFTCERTIFICATES.html
http://www.allyscandle.com/index/GIFTCARDS.html

any help would be great i have been at this for a week now

While on vacation I've been writing a bunch of javascript/css text effects for fun and I'm planning to look into how I can implement my code inside a url. So now I want to know how I can recognise and grab the text from any random webpage and put it inside of a variable, my script can take it from there.

Is there a way to pull a text off a certain div on a page, and put it into a javascript string? I'm certain that the field has a particular name and id that I can use, if need be.

Just wondering if there is a way to scan a page for strings of text where the combined text has more than 6 concurrent numbers and then highlight that particular string? I work backend on a project and i have to watch for strings in which if there is more than 6 numbers in a row have to be deleted.

The HTML of the backend for one string looks like this:
Code:

<tr class="row2"><th><a href="7457301/">7457301</a></th><td class="nowrap">May 19, 2011, 10:59 a.m.</td><td class="nowrap">May 19, 2011, 10:59 a.m.</td><td>asdf485920</td><td><div class="jquery-buttongroup"><input type="radio" id="form-1-status_A" name="form-1-status" value="A" /><label for="form-1-status_A">Approved</label><input type="radio" id="form-1-status_I" name="form-1-status" value="I" checked="checked" /><label for="form-1-status_I">Inactive</label><input type="radio" id="form-1-status_D" name="form-1-status" value="D" /><label for="form-1-status_D">Deleted</label></div></td><input type="hidden" name="form-1-kid_id" value="7457301" id="id_form-1-kid_id" /></tr>

The part i want to search though is the name part <td>asdf485920</td> and not the account number <a href="7457301/">7457301</a>