Adding dropdown dynamically
Hi,
I want to offer my users a means where they can select an item from a dropdown and select the quantity from another dropdown. I don't know how many items they want in advance, so want to create the item/quantity dropdown pairs dynamically.
What happens is the new pairs ids and names increment, but the previous ones ids and names don't.
This is the code:
<?php
session_start ();
?>
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form action = 'testselectprocess.php' method='POST'>
<div>
<select id='test' name='test0'>
<option name='first' value = '1'>option 1</option>
<option name='second' value = '2'>option 2</option>
<option name='third' value = '3'> option 3</option>
</select>
<select id='counting' name='count0'>
<option name='first' value = '1'>1</option>
<option name='second' value = '2'>2</option>
<option name='third' value = '3'>3</option>
</select>
</div>
<button type='button' class="more">Add another...</button>
<script>
var c=0;
$('.more').on('click', function() {
c++;
alert(c);
$(this).before( $(this).prev().clone());
$('#test').attr('name', 'test'+ c)
$('#counting').attr('name', 'count'+ c)
});
</script>
</form>
</body>
</html>
There's a JSFiddle here: http://jsfiddle.net/robgratt/yw0ydg6r/
The image attached is a screen shot of the Firefox debugger.
I've been tearing my hair out for days over this. Seemed simple when I started!
All help appreciated,
Rob
I want to offer my users a means where they can select an item from a dropdown and select the quantity from another dropdown. I don't know how many items they want in advance, so want to create the item/quantity dropdown pairs dynamically.
What happens is the new pairs ids and names increment, but the previous ones ids and names don't.
This is the code:
<?php
session_start ();
?>
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form action = 'testselectprocess.php' method='POST'>
<div>
<select id='test' name='test0'>
<option name='first' value = '1'>option 1</option>
<option name='second' value = '2'>option 2</option>
<option name='third' value = '3'> option 3</option>
</select>
<select id='counting' name='count0'>
<option name='first' value = '1'>1</option>
<option name='second' value = '2'>2</option>
<option name='third' value = '3'>3</option>
</select>
</div>
<button type='button' class="more">Add another...</button>
<script>
var c=0;
$('.more').on('click', function() {
c++;
alert(c);
$(this).before( $(this).prev().clone());
$('#test').attr('name', 'test'+ c)
$('#counting').attr('name', 'count'+ c)
});
</script>
</form>
</body>
</html>
There's a JSFiddle here: http://jsfiddle.net/robgratt/yw0ydg6r/
The image attached is a screen shot of the Firefox debugger.
I've been tearing my hair out for days over this. Seemed simple when I started!
All help appreciated,
Rob