...

View Full Version : Using Select options to change hidden input field values



ZRVoyyd
12-11-2006, 09:33 AM
Hi All,
I'm trying to figure out a way to use Javascript to enable the selectedIndex of a select field change the values of two subsequent hidden input fields. From what I've read the onCHange evnt hadler should do this but I haven't mastered JavaScript syntax to figure this out...

I tried to use a script in an external file (below) but if there's a shorter way...

Function setNfo()

{



if (document.cardform.quant.SelectedIndex=0)
{document.cardform.Price.value="0.00";
document.cardform.Product.value="0 Business Cards";}

if (document.cardfor,quant.selectedIndex=1)
{document.cardform.Price.value="35.00";
document.cardform.Product.value="100 Business Cards";}

if (document.cardform.quant.selectedIndex=2)
{document.cardform.Price.value="60.00";
document.cardform.Product.value="500 Business Cards";}

if (document.cardform.quant.selectedIndex=3)
{document.cardform.Price.value="120.95";
document.cardform.Product.value="1000 Business Cards";}

if (document.cardform.quant.selectedIndex=4)
{document.cardform.Price.value="135.00";
document.cardform.Product.value="2000 Business Cards";}

if (document.cardform.quant.selectedIndex=5)
{document.cardform.Price.value="155.95";
document.carform.Product.value="5000 Business Cards";}
}

Any help would be appreciated Thanks ZRVoyyd

Ancora
12-11-2006, 12:28 PM
ZRVoyyd:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function updateFields(nVal){

if (nVal == ""){return}
var nForm = document.forms[0];
var info = nVal.split(",")
nForm['Price'].value = info[0];
nForm['Product'].value = info[1];
}

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:300px;margin:auto}
fieldset {width:300px;background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
label {font-family:times;font-size:12pt;color:#00008b;padding:5px}
select {display:block;margin:auto}
.submitBtn {display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Business Cards</legend>
<select name='quant' onchange="updateFields(this.value)">
<option value="">Choose a Quantity</option>
<option value="35.00,100">100</option>
<option value="60.00,500">500</option>
<option value="120.95,1000">1000</option>
<option value="135.00,2000">2000</option>
<option value="155.95,5000">5000</option>
</select>
<input type='hidden' name='Price'>
<input type='hidden' name='Product'>
<input type='submit' name='submit' value="Submit" class='submitBtn'>
</fieldset>
</form>
</body>
</html>

ZRVoyyd
12-11-2006, 03:37 PM
Mike,
Thanks for your answer. My only question now is do I have to use the css styles that you included in your solution as it may conflict with te styles I already have. Basically could I just use the Javascript in the header and not use the xml or css styles included in your solutions. Sorry if this is not as coherent as it could be... Need that first cuppa coffee....

Ancora
12-11-2006, 03:43 PM
ZRVoyyd:

You're welcome.

Oh, those styles are not important. It's just the "standard" form CSS I use.

You can get rid of them, and just use the markup and JavaScript as shown.

There is no xml in the code. Just use the function and "values pairs" as shown.

Sorry for not mentioning that.

ZRVoyyd
12-11-2006, 04:48 PM
Mike I plugged it in before I saw your reply and it worked beautifully! I'm using the code for the UltraDev shopping cart (I would normally use a database but it seemed like overkill for one product) which then passes it's values on to PayPal as the cc processor. There's a problem when passing on the quantity from the form to the Ultradev Shopping cart (quantity field displays price instead of quantity of items) but for the purpose of the site quantity would only be confusing and the quantity column can be eliminated without disorienting the viewer.

I'm really impressed by the brevity of the code and I have to ask "What should I be reading to learn JavaScript to use it with the facilty that you do?" I've tried a few books but I can't seem to wrap my head around many of the concepts and syntax.

If you ever need video converted or some s/w please let me know.

Totally indebted to you,
Walter Reed, ZRVoyyd

Ancora
12-11-2006, 05:00 PM
Walter:

I'm glad that you got it running with your PayPal requirements, and you are very welcome.

I've never bought a JavaScript book, nor even an HTML book. I'm a retired lawyer & CPA, and for about the last 6 years, coding in various languages has been a hobby. After years of trial and error, and learning by looking at other's examples on various coding forums, I'm starting to feel comfortable. I've taken what I thought were the best and most useful approaches to doing a variety of things and adapted and improved them to suit my own "style." You saw that I have a "standard" form and CSS for it. I tend to have a "standard" JS approach, but, I think everyone does, eventually.

So, sorry, I can't recommend any books, but I do recommend that when you see code that you like, save it, in an organized way. You can go back to the things you save from time to time, and make quick progress on your next project.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum