Select form with javascript

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.

<script language="javascript">? This is not 1997, please don't write HTML 3.2. — Quentin
– Quentin, Commented Jul 15, 2013 at 14:06
@pattyd — HTML 2 didn't have script elements. HTML 4 made the type attribute mandatory. I'm being somewhat facetious, the big pile of rogue /s mean that it is horrible tag soup rather than HTML 3.2. The real message is Write proper HTML. — Quentin
– Quentin, Commented Jul 15, 2013 at 14:11

Quentin · Accepted Answer · 2013-07-15 14:08:07Z

2

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.

answered Jul 15, 2013 at 14:08

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sergiy T. · Accepted Answer · 2013-07-15 14:15:51Z

0

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>.

answered Jul 15, 2013 at 14:15

Sergiy T.

1,4531 gold badge24 silver badges26 bronze badges

Comments

Nil'z · Accepted Answer · 2013-07-15 14:18:26Z

-1

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;

answered Jul 15, 2013 at 14:18

Nil'z

7,4831 gold badge20 silver badges28 bronze badges

Collectives™ on Stack Overflow

Select form with javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related