Dynamicly add dropdown lists to a form populated with php/mysql query

[master44]

I am looking for a way to dynamically and repeatedly add a dropdown
list to a form populated with data from a mysql query:

So for example I have a php/mysql query:
SELECT * FROM fruits;

Which returns an array:
fruits('apple','bananna','pear','cherry');

Now I have a form with among other elements an add button and when
clicked creates a dropdown with a list of fruits from the php/mysql
array above.

I came up with the following which adds a new text field, but need to
modify it to accept an array from php/mysql to create the dynamic
dropdowns:

<script type='text/javascript'>
var counter = 0;
var limit = 3;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + "
inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1);
newdiv.innerHTML += " <br><input type='text' value='<?php echo
$counter; ?>' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>

<form method="POST">
<div id="dynamicInput"></div>
<input type="button" value="Add text input" onClick="addInput
('dynamicInput');">
</form>

Any ideas??

 

[SAM]

Le 9/4/09 2:42 AM, master44 a écrit :

I am looking for a way to dynamically and repeatedly add a dropdown
list to a form populated with data from a mysql query:

So for example I have a php/mysql query:
SELECT * FROM fruits;

Which returns an array:
fruits('apple','bananna','pear','cherry');

so in your JS in the head we have(*) :

var fruits = ['apple','bananna','pear','cherry'];

var count = 0;
function populate(myArray) {
if(myArray.length>0) {
var t = 'Entry #' + (count++) +
'<br><input value="'+myArray[0]+'" name="myInputs[]">';
myArray.shift();
return t;
}
return false;
}
function addInput(divName, myArray) {
var t = populate(myArray);
it(t) {
var p = document.createElement('P');
p.innerHTML = t;
document.getElementById(divName).appendChild(t);
}
else alert('You have reached the limit of adding');
}

Now I have a form with among other elements an add button and when
clicked creates a dropdown with a list of fruits from the php/mysql
array above.

That is not a dropdown, a dropdown is a select.

I came up with the following which adds a new text field, but need to
modify it to accept an array from php/mysql to create the dynamic
dropdowns:

<form action="#" method="POST" onsubmit="return false">
<p><input type="button" value="Add text input"
onClick="addInput('dynamicInput', fruits);"></p>
<div id="dynamicInput"></div>
</form>


(*)
<script type="text/javascript">
var fruits = [
<?php
for($i=0; $i<count($fruits); $i++)
{
if($i!=count[$fruits]) echo "'$fruits[$i]',\n\t";
else echo "'$fruits[$i]'\n\t";
?>];

 

[Thomas 'PointedEars' Lahn]

I am looking for a way to dynamically and repeatedly add a dropdown
list to a form populated with data from a mysql query:

So for example I have a php/mysql query:
SELECT * FROM fruits;

Which returns an array:
fruits('apple','bananna','pear','cherry');

How is that an array?

Now I have a form with among other elements an add button and when
clicked creates a dropdown with a list of fruits from the php/mysql
array above.

I came up with the following which adds a new text field, but need to
modify it to accept an array from php/mysql to create the dynamic
dropdowns:

Use JSON or an equivalent. Generally, Object initializers are the way to go:

{
fruits: ["apple", "banana", "pear", "cherry"]
}

Suppose you assign the result of this to a property named `o', you could use

o.fruits[0]

to get "apple".

<script type='text/javascript'>
var counter = 0;
var limit = 3;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + "
inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1);
newdiv.innerHTML += " <br><input type='text' value='<?php echo
$counter; ?>' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>

<form method="POST">
<div id="dynamicInput"></div>
<input type="button" value="Add text input" onClick="addInput
('dynamicInput');">
</form>

Any ideas??

That code does not have anything to do with dropdowns (or, more precisely,
`select' elements). However, your form is not Valid, and you should avoid
`innerHTML' to begin with.

<http://validator.w3.org/>


PointedEars