Hi all, would like to convert this Javascript code versatile so it will be able to extend various inputs of a form.
javascript Code:
var instance = 0;
function moreFields() {
// Check if there isn't more than 3 fields
if(instance != 3) {
instance++;
// Create a child
var clone = document.getElementById('water_src').cloneNode(true);
// Make child unique
clone.id += instance;
clone.name += instance;
clone.style.display = 'block';
// Locate clone's home
var insertHere = document.getElementById('water_drop');
// Place clone in home
insertHere.parentNode.insertBefore(clone,insertHere);
}
}
window.onload = moreFields;
I want to do this by adding the
parentHome &
cloneHome parameters to the function and changing the
'water_src' &
'water_drop' to the corresponding ones.
javascript Code:
var instance = 0;
function moreFields() {
// Check if there isn't more than 3 fields
if(instance != 3) {
instance++;
// Create a child
var clone = document.getElementById('water_src').cloneNode(true);
// Make child unique
clone.id += instance;
clone.name += instance;
clone.style.display = 'block';
// Locate clone's home
var insertHere = document.getElementById('water_drop');
// Place clone in home
insertHere.parentNode.insertBefore(clone,insertHere);
}
}
window.onload = moreFields;
Unfortunately when I do this change the event handling function
onload, when triggered, pass the Event object as first and only parameter. i.e.
parentHome would be "[object Event]" (or similar) and
cloneHome would be undefined.
What modification to the javascript could I do to prevent this issue?
HTML code that uses javascript code
html4strict Code:
<div id="water_src" name="water_src" style="display: none"> <select> <option></option> <?php
while($row=mysql_fetch_array($result)) {
echo "\n\t\t\t\t<option value=".$row['water_ID'].">".$row['water_name']."</option>";
}
echo "\n";
?>
</select>
<input type="button" value="-"
onclick="if(instance > 1) { instance--; this.parentNode.parentNode.removeChild(this.parentNode);}" />
<input type="button" value="+"
onclick="moreFields();" /> <br /> </div> <form method="post" action="package_builder.php"> <span id="water_drop"></span> <input type="submit" value="Send form" /> </form>
Extending forms dynamically
