how to select values in the dropdown box

how to select values in the dropdown box - javascript

this is my code .
if i select tamilnadu , i must get chennai.
if i select kerla i must get kochi.
how to get the values if i submit.
enter code here
<td align='center' >STATE:</td>
<td> <select name ='state' onchange="showData()">
<option value="0">Select</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</td>
</tr>
<tr> <td> </td> </tr>
<tr>
<td align='center' name ='city'>city:</td>
<td> <select>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore<option>
</tr>

You can go with the correct tag formation like this:
jQuery
$('#state').change(function() {
$('#res').html($('#city option').eq($('#state option:selected').index()).val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tr>
<td align='center'>STATE:</td>
<td>
<select name='state' id='state'>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align='center' name='city'>city:</td>
<td>
<select name='city' id='city'>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore
<option>
</select>
</tr>
<br>
<br>RESULT : <span id='res'></span>
Javascript:
function listResult() {
var e = document.getElementById("state");
document.getElementById("res").innerHTML = document.getElementById("city").options[e.selectedIndex].value
}
<tr>
<td align='center'>STATE:</td>
<td>
<select name='state' id='state' onchange='listResult()'>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align='center' name='city'>city:</td>
<td>
<select name='city' id='city'>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore
<option>
</select>
</tr>
<br>
<br>RESULT : <span id='res'></span>

Related

Bring selected item values

I have this table in html and what I am trying to do is that when I give the button assign with jquery it brings me the values of the select and the model
<button type="button" class="assign" id="assign">assign</button>
<table id="example-table" class="table table-striped table-hover table-condensed">
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>SELECT</th>
</tr>
<tbody>
<tr>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Ford</td>
<td>Ranger</td>
<td>Blue</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Tacoma</td>
<td>Red</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Ford</td>
<td>Mustang</td>
<td>Silver</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Mercury</td>
<td>Sable</td>
<td>Silver</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Corolla</td>
<td>Blue</td>
<td id="ISINcb" class="lblCell_R" align="center">
<select>
<option id="ISIN1">A Abel</option>
<option id="ISIN2">B Babel</option>
<option id="ISIN3">C Cable</option>
<option id="ISIN4">E Enable</option>
</select>
</td>
</tr>
</tbody>
</table>
jquery
$(function() {
$('.assign').click(function(e) {
var select = Here the value of select
var model = Here is the model value
console.log(select );
console.log(model );
});
});
And additional put me the select disabled

Here an idea how you can do it. Iterating each one of rows and get the model of your row and get the selected item, something like this:
$('#assign').on('click', function(e){
$('tbody tr').each(function(){
console.log($(this).children().find("select").find(":selected").text());
console.log($(this).children()[1].textContent);
})
});
An advice ID's must be uniques, so you should change that in each one of your selects.

changing the selected value of element using jquery

I have the below html and jquery:
var result = {
"TPS on Desktop": "Green",
'TPS on mobile': 'Amber'
};
for (var key in result) {
$('td[id="checklist"]').each(function() {
if (JSON.stringify($(this).text().trim() === key)) {
$(this).closest('tr').find('td[class="tdcolor"] select option:selected').val(result[key]);
console.log(key + ' : ' + $(this).closest('tr').find('td[class="tdcolor"] select option:selected').val());
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="decisionTable" class="CSSTableGenerator" width="100%" border=1 id="table1">
<tr color="23145">
<th><b>CheckList</b></th>
<th><b>Health</b></th>
</tr>
<tr>
<td id="checklist">
TPS on Desktop
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
<tr>
<td id="checklist">
TPS on Mobile
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
</table>
Using the above jquery, I want to change the value of the dropdown in tdcolor td element and the same should reflect on the web page. But, I've not had luck with above code, however console.log output of the selected value says the new value is updated but the same isn't reflected.
Could you please help me in solving this issue? I want to change the color of tdcolor based on the colors passed in result map.
Many Thanks in advance.

Don't use duplicate ids, id value should be unique. Use another attribute like data-id instead.
Also, no need to use nested iterations
var result = {
"TPS on Desktop": "Green",
'TPS on Mobile': 'Amber'
};
$('td[data-id="checklist"]').each(function()
{
var value = result[ $(this).html().trim() ];
$(this).closest('tr').find('td[class="tdcolor"] select option:contains(' + value + ')').prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="decisionTable" class="CSSTableGenerator" width="100%" border=1 id="table1">
<tr color="23145">
<th><b>CheckList</b></th>
<th><b>Health</b></th>
</tr>
<tr>
<td data-id="checklist">
TPS on Desktop
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
<tr>
<td data-id="checklist">
TPS on Mobile
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
</table>

$('select').change(function(){
var value = $(this).find("option:selected").text();
var txtVal = $(this).parent().parent().find('#checklist').text();
console.log(txtVal.trim()+':'+value.trim());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="decisionTable" class="CSSTableGenerator" width="100%" border=1 id="table1">
<tr color="23145">
<th><b>CheckList</b></th>
<th><b>Health</b></th>
</tr>
<tr>
<td id="checklist">
TPS on Desktop
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
<tr>
<td id="checklist">
TPS on Mobile
</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
</tr>
</table>

When i select a value from select option it multiply by my set value and show on div

here i use a select option menu for select a value like 1, 2, 3 to 10 then it is automatically multiply by my set value like 1000 and show in my div
here is my code
<table width="100%" border="0">
<tr>
<td style="text-align:left; text-indent:10px;padding:5px;" width="39%"><b>Listing Type </b></td>
<td width="15%"><b>No. of listings </b></td>
<td width="18%"><b>Price Per Listings </b></td>
<td width="15%"><b>Listing Duration</b> </td>
<td width="13%"><b>Total Price </b></td>
</tr>
<tr>
<td style="font-weight:600;text-align:left; padding:0px 10px;" height="39">Successghar fast listing (should be consumed within 90 days of buying) </td>
<td><select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
<td>Rs. 1099 </td>
<td>90 Days </td>
<td> Price show here </td>
</tr>
</table>

This solution will populate the table row using a JS variable. It will also initially set the "price per listing" based on that variable. Here is a working plunkr.
HTML:
<table width="100%" border="0">
<tr>
<td style="text-align:left; text-indent:10px;padding:5px;" width="39%"><b>Listing Type </b>
</td>
<td width="15%"><b>No. of listings </b>
</td>
<td width="18%"><b>Price Per Listings </b>
</td>
<td width="15%"><b>Listing Duration</b>
</td>
<td width="13%"><b>Total Price </b>
</td>
</tr>
<tr>
<td style="font-weight:600;text-align:left; padding:0px 10px;" height="39">Successghar fast listing (should be consumed within 90 days of buying)</td>
<td>
<select id="num-listings">
<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>
</td>
<td id="price-per-listing"></td>
<td>90 Days</td>
<td id="total-price">Price show here</td>
</tr>
</table>
JavaScript:
$(document).ready(function() {
var pricePerListing = 1099.0;
var numListingsSelect = $('#num-listings');
var pricePerListingCell = $('#price-per-listing');
pricePerListingCell.html("Rs. " + pricePerListing);
function updateTotalPrice() {
numListings = numListingsSelect.val();
$('#total-price').html(pricePerListing * numListings);
}
numListingsSelect.change(function() {
updateTotalPrice();
});
updateTotalPrice();
});

how to get value in textboxes selecting dropdown list value?

hi i want to display value in textbox selected by dropdown value. suppose i selected sql
i got the value like jdbc:mysql://localhost/lportal?useUnicode=true&characterEncoding=UTF-8&useFastDateParsing=falsein jdbc url textbox.com.mysql.jdbc.Driver driver name in driver class textbox.
this type of code i want
<form>
<table>
<tr>
<td>Database Type</td>
</tr>
<tr>
<td><select name="Database Type" onclick="fillData()" id="sel_value">
<option value="DB2">DB2</option>
<option value="Derby">Derby</option>
<option value="Hypersonic">Hypersonic</option>
<option value="Ingres">Ingres</option>
<option value="MySQL">MySQL</option>
<option value="Oracle">Oracle</option>
<option value="P6Spy">P6Spy</option>
<option value="PostgreSQL">PostgreSQL</option>
<option value="SQL Server">SQL Server</option>
<option value="Sybase">Sybase</option>
</select>
</tr>
<tr>
<td>JDBC URL(required)</td>
</tr>
<tr>
<td><input type="text" name="jdbcUrl" style="width: 550px;" id="jdbcUrl"></td>
</tr>
<tr>
<td>JDBC Driver Class Name(Required)</td>
</tr>
<tr>
<td><input type="text" name="text" style="width: 550px;"></td>
</tr>
<tr>
<td>username</td>
</tr>
<tr>
<td><input type="text" name="text" style="width: 550px;"></td>
</tr>
<tr>
<td>password</td>
</tr>
<tr>
<td><input type="password" name="text" style="width: 550px;"></td>
</tr>
</table>
</form>

Replace the onclick with onchange. Here try this code:
<select name="Database Type" onchange="fillData()" id="sel_value">
<option value="DB2">DB2</option>
<option value="Derby">Derby</option>
<option value="Hypersonic">Hypersonic</option>
<option value="Ingres">Ingres</option>
<option value="MySQL">MySQL</option>
<option value="Oracle">Oracle</option>
<option value="P6Spy">P6Spy</option>
<option value="PostgreSQL">PostgreSQL</option>
<option value="SQL Server">SQL Server</option>
<option value="Sybase">Sybase</option>
</select>
Javascript:
function fillData(){
alert($('#sel_value').val());
}

Hide input boxes based on drop down selection

I want a drop down menu at the top of the page to determine how many boxes are then showing on the page.
If the user selects 1, only 1 table shows
If the user selects 2, 2 tables show
I have added the code so hopefully it makes more sense
<body>
<p>Please select number of puppies:</p>
<p>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td>
<input name="PuppyMicrochipNum2" type="text"
id="PuppyMicrochipNum2" />
</td>
</tr>
</table>

jsFiddle: http://jsfiddle.net/h3XLP/
very common to get jQuery answers but it's really not that comprehensive with standalone JavaScript
note: add the attribute style="display:none;" to the second table
var select = document.getElementsByTagName("select")[0];
select.onchange=function(){
if(select.value=="2"){
document.getElementsByTagName("table")[1].style.display="inline";
}else{
document.getElementsByTagName("table")[1].style.display="none";
}
}
however you should alternatively use below, as you may have more select and table elements in your document
http://jsfiddle.net/h3XLP/1/
var select = document.getElementById("selectnopuppies");
select.onchange=function(){
if(select.value=="2"){
document.getElementById("secondpuppytable").style.display="inline";
}else{
document.getElementById("secondpuppytable").style.display="none";
}
}
<p>Please select number of puppies:</p>
<p>
<select id="selectnopuppies">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1:</p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName1" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour1" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td> </td>
</tr>
</table>
<div id="secondpuppytable" style="display:none;">
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName2" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour2" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td>
<input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" />
</td>
</tr>
</table>
</div>

Given that option 1 should show table 1, option 2 show table 1 and 2, and so on.
Try this:
$('#dropdown').change(function(){
var dropdown = $(this);
var tables = $('.tableSelector');
tables.hide();
tables.slice(0,dropdown.val()).show();
});
Working jsfiddle: http://jsfiddle.net/v5TTz/
I have tagged all tables with a css class "tableSelector", then everytime the dropdown changes value, I show the number of tables corresponding to the current value of the dropdownlist. This solution requires the tables to be positioned in the correct order in the DOM.
However, in my ears, this sounds like a case for templates, like jQuery templates or Hoganjs.

I have modified your code... It's working now... try this...
<html>
<head>
<title>Sample</title>
<script type="text/javascript">
function go()
{
var Count = document.getElementById("selCount").options[document.getElementById("selCount").selectedIndex].value;
if(Count==1)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = 'none';
}
if(Count==2)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = '';
}
}
</script>
</head>
<body>
<p>Please select number of puppies:</p>
<p>
<select onchange = "go()" id="selCount">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0" id="Puppy1">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0" id="Puppy2">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td><input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" /></td>
</tr>
</table>
</body>
</html>

You can do something like this:
When you select 1st option, it will show you firSt table and for 2nd it will show you both tables.
$("table").hide();
$("select option").change(function(){
Val = $(this).val();
If(Val ==1) {
$("table")[0].show();
$("table")[1].hide();
} else {
$("table").show();
}
});

A little bit of javascript:
<script>
function showtable(o){
if(o.value==2){document.getElementById('table2').style.display='block';}
else{document.getElementById('table2').style.display='none';}
}
</script>
<p>Please select number of puppies:</p>
<p>
<select onchange="showtable(this)">
<option selected value="1">1</option>
<option value="2">2</option>
</select>
<table id='table2' width="330" border="0" style="display:none">

HTML Changes
<select onchange="showForm(this.options[this.selectedIndex]);">
Why it's needed ?
For listening the select box value change .
<table width="330" border="0" class="puppy">
Added class=puppy attribute for readability . For hiding table element will be generic and error prone.
Javascript Changes
function showForm(option){
//option user has selected.
var val = parseInt(option.value);
//form elements in a document.
var forms = document.getElementsByClassName("puppy");
for(var i=0,total=forms.length;i<total;i++){
var form = forms[i];
var display = form.style.display;
if(i<val && display == "none"){
form.style.display = "block";
}else if(i >= val && display != "none"){
form.style.display = "none";
}
}
}
Live Demo # http://jsfiddle.net/A3eFz/31/

Please try with following example, hope this helps.
<label for ="amount">Please select number of parameter</label><br/>
<select name="amount" id="amount" title="amount">
<option value="00">0</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
</select>
<form name = "AddQuery" id = "AddQuery" method = "POST" action = "submit.php">
<div id="groups">
</div>
<div id="other">
</div>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#amount').change(function(){
$('#groups').empty();
var group = '';
var number = parseInt($(this).val());
for(var i=0;i<number;i++){
group += '<div id="group">' +
'<label for="name['+i+']">Name'+i+'</label> '+
'<input name="name'+i+'" type="text" id="name'+i+'" value="">' +
'<label for="type['+i+']">Type'+i+'</label> '+
'<input name="type'+i+'" type="text" id="type'+i+'" value="">' +
'</div>';
}
$('#groups').append(group);
$('#other').empty();
var other = '';
other +='<div id="other"><input type="hidden" name="n" id ="n" value="'+number+'"/></div>';
$('#other').append(other);
});
});
</script>

Develop Reference

JavaScript is the programming language of the Web.

how to select values in the dropdown box - javascript

Related

Bring selected item values

changing the selected value of element using jquery

When i select a value from select option it multiply by my set value and show on div

how to get value in textboxes selecting dropdown list value?

Hide input boxes based on drop down selection

Categories

Resources