Change hr attributes on change elements - javascript

I suppose that it must be simple to do that but I've no experience with javascript and it's getting difficult to me.
I've got an hr element on my page and both a color picker and a dropdownlist with different values from 1 to 10.
What I need to do is change hr height and color when color picker or dropdownlist changes its values.
Here is my html code:
<div id="colourSelector" class="row">
<input id="backgroundcolor" name="backgroundcolor" size="6" maxlength="6" type="text" style="display: none;"><div class="colorPicker-picker" style="background-color: rgb(204, 204, 204);"> </div></div>
<div id="lineHeight" class="row">
<select name="lineHeight" id="lineHeight">
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></div>
<div id="divlineDemo" class="section row">
<hr id="lineDemo" style="height: 2px; background-color: red; border: 0;"> </div>
JS code:
<script type="text/javascript">
$(document).ready(function()
{
var val= $("select#lineHeight").val();
$("select#lineDemo").height().value;
});
</script>


Here is a working example of what you're trying to achieve.
You are setting lineHeight id 2 different times which caused me a headache to figure out. I renamed the ID of your select to lineHeightSelect and also changed the colorpicker to type="color".
$(function() {
var colorPicker = $('#backgroundcolor');
var headline = $('#lineDemo');
var lineHeight = $('#lineHeightSelect');
lineHeight.on("change", function(){
headline.css("height", $(this).val() + "px");
});
colorPicker.on("change", function() {
headline.css('backgroundColor', $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colourSelector" class="row">
<input id="backgroundcolor" name="backgroundcolor" size="6" maxlength="6" type="color" style="display: block;">
</div>
<div id="lineHeight" class="row">
<select name="lineHeight" id="lineHeightSelect">
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div id="divlineDemo" class="section row">
<hr id="lineDemo" style="height: 2px; background-color: red; border: 0;">
</div>


$('#lineHeight').change(function () {
var val = $('option:selected', this).val();
$('#lineDemo').css('height', val+'px')
})
$('#backgroundcolor').change(function () {
var val = $(this).val();
$('#lineDemo').css('background-color', val)
})
Demo
I used the value of selected option as height of the hr


jQuery('#lineHeight').on('change',function(){ jQuery('#lineDemo').css('color','red').css('height','4px')

Related

How to add a bottom margin to the div on select the option with JavaScript

I'm trying to add the margin of the select div when the value selected
I'm not an expert in the javascript
I found javascript on another blog but I think that does not work
Help me to do that
Here is my code
<style>
.container{
border:2px solid black;
margin-top: 20px;}
</style>
<div class="html-code-output">
<div class="main">
<p>Select an option to show the value and text of that option.</p>
<select class="addon-select">
<option value="">Select a Option</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div class="container">
<h4>Add a margin when we select the an option</h4>
</div>
</div>
</div>
<script>
jQuery('.addon-select').on('change', function () {
let val = $(this).val();
$(".main").css("margin-bottom", "1rem");
$(".main('" + val + "') ").css("margin-bottom", "5rem");
});;
</script>

If you have one element which you want to change its margin-bottom depending on what is selected on the select:
HTML
<body>
<div class="item">
Item
</div>
<select onchange="selectFunction(this)">
<option value="">Select option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</body>
JS
function selectFunction(selected){
var selectedOption = $(selected).val();
$(".item").css("margin-bottom",selectedOption*3);
}
If you have many items, and you want to change the padding of one of them depending on which option is selected on the select:
HTML
<body>
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<select onchange="selectFunction(this)">
<option value="">Select option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</body>
JS
function selectFunction(selected){
$(".item").css("margin-bottom",0);
var selectedOption = $(selected).val();
selectedOption --;
$(".item").eq(selectedOption).css("margin-bottom",10);
}

How To Control Dropdown Select Options Menu With Jquery

I am creating a web site. In this web site there is a form and user has to input details. So , in this form , I have added 2 dropdowns like below. Now I want, when I select number 9 from Adults menu, I want to disable children menu. Otherwise if the number is 8 or less than 8, still user can select from children menu. Then I used length in jquery. But, that not what I want.
How can I do this?
$(document).ready(function() {
var adults = parseFloat($('#adults').val());
var children = parseFloat($('#children').val());
var infants = $('#infants').val();
var Total = adults + children;
//$("#errorModal").html(Total);
$('#adults').change(function() {
var st = $('#adults option:selected');
if (st.length > 8) {
$("#children").prop('disabled', true);
}
});
alert(Total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Adults :
<select name="adults" class="form-control" id="adults">
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="children" class="form-control" id="children">
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
</div>
Search Flight Data
</form>

You just need to change length to
if (st.val() > 8)
DEMO: https://codepen.io/creativedev/pen/ERpXOa
To enable back when value is different:
if (st.val() > 8)
{
$("#children").prop('disabled', true);
}else{
$("#children").prop('disabled', false);
}

You should check against the selected value, not the length:
var adults = parseFloat($('#adults').val());
var children = parseFloat($('#children').val());
var infants = $('#infants').val();
var Total = adults + children;
//$("#errorModal").html(Total);
$('#adults').change(function() {
if (this.value > 8) { // check against the value of the adults drop down
$("#children").prop('disabled', true);
} else {
$("#children").prop('disabled', false); // probably need to re-enable it
}
});
// alert(Total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Adults :
<select name="adults" class="form-control" id="adults">
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="children" class="form-control" id="children">
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
</div>
Search Flight Data
</form>

Get value from select and clone form number of times

I have a select box , i want user to select value and then after getting value forms are to be added in page according to selected value , like if user selects "1" 1 form is to be added and if user select "10" 10 forms. also if nothing is given or not selected no form to display . It seems to be problem in my js , it does add forms but add other more forms too which i dont expect.
<div class="form-group">
<label>Number of travellers</label>
<select class="form-control" id="travellersNumber">
<option value="0">Select Numbers Of Travellers</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class=bookForm>
<div class=col-xs-12>
<h3 class=bookForm-heading>Submit your details</h3>
</div>
<div class="col-xs-12 col-md-3">
<div class=form-group>
<label>First Name</label>
<input class=form-control name=firstName>
</div>
</div>
</div>
.bookForm{
display:none;
}
function bookFormToggle(){
var traveller = $("#travellersNumber");
var form = $(".bookForm");
var heading = $('.bookForm-heading');
function unhideForm(){
var travellerValue = parseInt(traveller.val());
for(i=0;i<travellerValue;i++){
heading = heading.html('Traveller '+ (i+1) +' Information');
form.clone().insertAfter(form);
}
}
traveller.on("change",unhideForm);
unhideForm();
}
bookFormToggle();

Hope this is what you want.
$(function () {
$("#travellersNumber").on('change', function () {
var traveller = $(this);
var form = $("#original");
var heading = $('.bookForm-heading');
var travellerValue = parseInt(traveller.val());
$("#original").hide();
$("[id*='original_']").not("#original").remove(); //Remove all forms except original form
for (i = 0; i < travellerValue; i++) {
if (i == 0) {
heading = heading.html('Traveller 1 Information');
$("#original").show();
}
else
{
var cloneDiv = form.clone().prop("id", "original_" + i).appendTo("#travellersDetail");
cloneDiv.find(".bookForm-heading").html('Traveller ' + (i + 1) + ' Information');
}
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bookForm {
display: none;
}
</style>
<div class="form-group">
<label>Number of travellers</label>
<select class="form-control" id="travellersNumber">
<option value="0">Select Numbers Of Travellers</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="bookForm" id="original">
<div class=col-xs-12>
<h3 class="bookForm-heading">Submit your details</h3>
</div>
<div class="col-xs-12 col-md-3">
<div class=form-group>
<label>First Name</label>
<input class=form-control name=firstName>
</div>
</div>
</div>
<div id="travellersDetail"></div>

The problem is that you are not removing the old forms that you have added.
$(document).ready(function(){
var traveller = $('select[name="trav"]');
traveller.change(function(){
$('.bookForm').not('.bookForm:first').remove();
var travellerValue = traveller.val();
var form = $('.bookForm:first');
for(i=travellerValue;i>1;i--){
var newAdd = form.clone().insertAfter(form);
newAdd.find('.bookForm-heading').html('Traveller'+ (i)+' Information');
}
$('.bookForm').show();
});
});
.bookForm{
background-color:green;
padding:5px;
margin:5px;
}
#travellersNumber{
width:150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label>Number of travellers</label>
<select class="form-control" id="travellersNumber" name="trav">
<option value="0">Select Numbers Of Travellers</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="bookForm row">
<div class="col-xs-12">
<h3 class="bookForm-heading">Submit your details</h3>
</div>
<div class="col-xs-12">
<div class="form-group">
<label>First Name</label>
<input class="form-control" name="firstName">
</div>
</div>
</div>

<select id='populate' onchange='populate();'></select>
<div id='myform'></div>
function populate()
{
var forms=$("#populate").val();
if (forms!=0)
{
var formelements='';
for (i=1; i<=forms; i++)
{
var formelements .= "<div class=bookForm>" +i+ "</div>";
}
$("#myform").html(formelements);
}
}

How can I use jQuery to get a total from multiple drop down boxes?

I have a dynamic number of dropdown boxes with different values. I wan't to be able to calculate all of the totals from all of the boxes together.
Currently, I have a snippet that will calculate the total of one box, but when I select another box, it will show the total of that one instead. My program can have any amount of drop down boxes but it's random. Heres a snippet that calculates one box at a time
$('.drop').on('change',function() {
var val = $(this).val();
var price = $(this).attr('data-cost-per-unit')
var total = price * val
$("div.total-amount").text("$"+total);
});
My form rendered looks like this
<form accept-charset="UTF-8" action="/orders" id="payment-form" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="ia3sQyXOn0BP3GUDHmLmghjLFyK/27F8N9EEyhYN8UI=" /></div>
<li class='bullet-item'>
<div class='product panel'>
<div class='small-12'>
<h4>
<li class="product" id="product_2" value="2"><div class='row'>
<div class='small-2 columns switch'>
<input id='switchName0' type='checkbox'>
<label for='switchName0'></label>
</div>
<div class='small-7 columns'>
<input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="2" />
another
<br>
<div class='subheader'>$5.55</div>
</div>
<div class='small-3 columns'>
<select class="drop" data-cost-per-unit="555" id="another" name="order_products[][quanity]" prodindex="0"><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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option></select>
</div>
</div>
</li>
</h4>
</div>
</div>
</li>
<li class='bullet-item'>
<div class='product panel'>
<div class='small-12'>
<h4>
<li class="product" id="product_1" value="1"><div class='row'>
<div class='small-2 columns switch'>
<input id='switchName1' type='checkbox'>
<label for='switchName1'></label>
</div>
<div class='small-7 columns'>
<input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="1" />
test
<br>
<div class='subheader'>$0.33</div>
</div>
<div class='small-3 columns'>
<select class="drop" data-cost-per-unit="33" id="test" name="order_products[][quanity]" prodindex="1"><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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option></select>
</div>
</div>
</li>
</h4>
</div>
</div>
</li>
Can a jQuery expert help me out here?

//cache your selectors
var drop = $('.drop');
//your grand total variable
var grandtotal = 0;
//create a function to call to reuse for all drops
function getTotal(){
//cycle through each one
drop.each(function(i,el){
//i is the number and el is the element (or this)
var val = $(this).val();
var price = $(this).attr('data-cost-per-unit')
var total = price * val
grandtotal = grandtotal + total;
});
$("div.total-amount").text("$"+grandtotal);
}
//bind on change to all drops
drop.on('change',getTotal);

JavaScript - Reading from dropdown box

I need to be able to read from a dropdown box on a page get the value from it and thats it (for now) I currently have this code.
JavaScript
function main(input)
{
value = getValue();
alert(value);
}
function getValue()
{
var len = document.form1.values.length
var chosen = ""
for (var i = 0; i < len; i++) {
if (document.form1.values[i].selected) {
chosen = document.form1.values[i].value
}
}
return chosen;
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shopping Cart</title>
<link href="style.css" title="Style" rel="stylesheet" type="text/css">
<script src="javascript/js.js" type="text/javascript"></script>
</head>
<!-- Start content -->
<body>
<!-- Wrapper to hold all content in -->
<div id="wrapper">
<!-- Top header, site name, moto, all that -->
<div id="header">
<h1>Kyle's Legit Toys</h1>
<h2>We are more legit then 10th.exe</h2>
<h3>#SoundsLegit</h3>
</div>
<!-- Navigation Menu -->
<div id="menu">
Home
Client Validation
</div>
<!-- Item -->
<div class="first">
<p>Wickedy Walker</p>
<img src="i/car.jpg" width="85%" height="85%" alt="Car" title="#CoolCar">
<p>Cost: £30 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Faster than light car</p>
<img src="i/toycar.jpg" width="85%" height="85%" alt="ToyCar" title="#WickCar">
<p>Cost: £10 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Build stuff crane</p>
<img src="i/crane.jpg" width="85%" height="85%" alt="Toy Crane" title="#SweetCrane">
<p>Cost: £15 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Dynamicaly altered payment -->
<div id="payment">
<p>Payment</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<!-- Clear all floats -->
<div class="clear">
</div>
<!-- Item -->
<div class="first">
<p>Satch Boogie</p>
<img src="i/guitar.jpg" width="85%" height="85%" alt="Guitar" title="#BeLikeSlash">
<p>Cost: £20 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</form>
</div>
<!-- Item -->
<div class="item">
<p>HaxTop</p>
<img src="i/laptop.jpg" width="85%" height="85%" alt="Laptop" title="#Be1337hax">
<p>Cost: £150 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Train</p>
<img src="i/train.jpg" width="85%" height="85%" alt="Train" title="#ChoChoTrain">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Clear all floats -->
<div class="clear">
</div>
<!-- Item -->
<div class="first">
<p>Pedo Bear</p>
<img src="i/teddybear.gif" width="85%" height="85%" alt="Teddy Bear" title="#AwesomeTeddy">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Not a pony bear</p>
<img src="i/bear.jpg" width="85%" height="85%" alt="Teddy Bear" title="#EnvyOfHomies">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Patobo Bear</p>
<img src="i/irl.jpg" width="85%" height="85%" alt="Teddy Bear" title="#NotEvenRacist">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Clear all floats -->
<div class="clear">
</div>
<!-- Final footer -->
<div id="footer">
<p>Kyle Strudwick - ks339 - StudentNumber</p>
<p>Some copyright stuff</p>
</div>
</div>
</body>
</html>
Error in chrome
Firebug
Thanks a lot, when answering please try and explain what I did wrong, why it was wrong and the correct way.
Thanks

Change your HTML to this :
<select name="values" onchange="main(this)" >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
and you function to this :
function main(input)
{
var text = input.options[input.selectedIndex].text; // returns the text ie one / two etc
var value = input.value; // returns the value ie 1 / 2 / 3 etc
}
What i have changed - I have updated the onchange from main() to main(this) this change means thats its passing the current select list object to the main funciton - this makes accessing the actual select list changing from the function a lot easier - you dont have to go searching the DOM for the select list that changed.
What does the javascript do - this simplifies the process of getting the selected option, now we are passed the actual select list that has changed ie input = the correct select list. We can use input.selectedIndex to get the currently selected option and input.value to return the currently selected value
Using document.forms1 wasnt working becuase you have multiple forms with the name form1 on your page - using document.forms1[#] where # is the index of the form would work but its confusing ...
Further changes - you could remove all but one of the forms if you are using it exactly as you have in your question - as they really are doing nothing ... just surround the entire page (just the content) with a single form - using the above method to get the changed value will still work as it doesn't rely on the form !
Here is a quick example of the above working

All your forms have the name form1 so document.form1 actually returns an array of <form> elements. You can access them individually, for example document.form1[0].values for the first form. To maintain a generic function you need to pass the current select element (the one that the onchange event is fired from) into the function so that your function finds the correct form1 to operate on.

Categories

Resources