Here is my Javascript:
<script>
function disable()
{
document.getElementById("habits").disabled=true;
document.getElementById("habits2").disabled=true;
document.getElementById("exact").disabled=false;
}
function enable()
{
document.getElementById("habits").disabled=false;
document.getElementById("habits2").disabled=false;
document.getElementById("exact").disabled=true;
}
var counter =0;
var i = 0;
function duplicate() {
var original = document.getElementById('div');
var clone = original.cloneNode(true); // "deep" clone
i+=1;
clone.id = "div" + i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
document.getElementById('div' + i).getElementsByTagName('select').name += '_clone' + i;
counter+=1;
}
</script>
and this is my HTML code:
<button id="button" onclick="duplicate()">Add List</button><br><br>
<form id ="form" name="search" method="post" action="test.php">
<div id="div">
<div id="d">
<select name ="select" >
...options...
</select>
</div>
Value:<input type="text" id ="exact">
From: <input type="text" id="habits">
To: <input type="text" id="habits2">
<br>
<input type="button" name="answer" value="Range" onclick="enable()" >
<input type="button" name="answer" value="Exact" onclick="disable()" >
</div>
<br><br>
<input type="submit" name ="search" value="Submit">
</form>
My issue here is that, when I clone the div id=div
, all the buttons work for the original one, even the cloned buttons. Another thing is that, when I click the submit button to get the options from the drop-down list(s)
, but after submission, only the last drop-list is counted (cloned), but I want the original only.
Here is my page after clicking submit:
<?php
$item = $_POST["select"];
echo $item;
?>
How can I solve this? That is, changing the id
's and names, and functions working with the cloned elements?