Select form with javascript - php

Question

I would like to get select form with variable amount of fields. To achive this first I connect to db and converting data from php to javascript. Then i got array (wynik) with values, but when i try to print it i get empty select form and all values shown next to it. There is my javascript function:
<script language="javascript">
function addInput() {
document.getElementById('text').innerHTML += "<select name='add' /><br />";
for (i=0;i<wynik.length;i++)
{
document.getElementById('text').innerHTML += "<option value=" + "wynik[i]" + " />" + wynik[i] + "</option />";
}
document.getElementById('text').innerHTML += "</select />";
}
</script>
And HTML code:
<form name="add" action="add_form.php" method="post">
<div id="text">
</div>
<br>
<input type="submit" value="Submit" />
</form>
<input type="button" onclick="addInput()" name="add" value="Add value" />
Please help me to put that into form.

Answer 1

The browser will attempt to fix the DOM each time you write HTML to it, consequently you cannot write just a start tag to innerHTML.
Build all your HTML up in a string and then insert it in one go.
Better yet, use createElement, appendChild and friends instead.

Answer 2

Perhaps you need to remove <br /> after <select name='add' /> . Also </select /> does not need a / in the end (it has it in the begining) - </select>.

Answer 3

Another approach you can try with ajax:
<!-- Script -->
<script type="text/javascript">
$(function(){
$("#add").on('click', function(){
$.ajax({
url : 'ajax.php',
type : 'POST',
success : function(resp){
$("#backend").html(resp);
},
error : function(resp){
}
});
});
});
</script>
<!-- HTML -->
<div id="text"><select id="backend" name=""></select></div>
<input type="button" id="add" value="Add value" />
<!-- Backend ajax.php -->
<?php
#your query here to fetch $wynik
$str = "";
foreach($wynik as $value){
$str .= '<option value="'.$value.'">'.$value.'</option>';
}
return $str;