dynamic form fields with javascript an php: It doesn't work

Question

I have a small javascript which add form-fields dynamically.

My javascript snippet without any php codes works fine.

<script type="text/javascript">
var counter = 0;
$(function(){
 $('p#add_field').click(function(){
 counter += 1;
 $('#container').append(
 '<strong>Artikel ' + counter + '</strong><br />'
 + '<input id="field_' + counter + '" name="dynfields[]' + '" type="text" class="login-username" /><br />'
 + '<input id="field2_' + counter + '" name="dynfields2[]' + '" type="text" class="login-username" /><br />' );
 });
});
</script>

But in this script i need an array that read entries from a database for a select option field (dropdown).

I do it like this:

<script type="text/javascript">
var counter = 0;
$(function(){
 $('p#add_field').click(function(){
 counter += 1;
 $('#container').append(
 '<strong>Artikel ' + counter + '</strong><br />'
 + '<input id="field1_' + counter + '" name="dynfields[]' + '" type="text" class="login-username" /><br />'
 + '<input id="field2_' + counter + '" name="dynfields2[]' + '" type="text" class="login-username" /><br />'
 + '<select name="dynfields3[]' + '">

    <?php
        $abfrage = "SELECT * FROM artikel";
        mysql_query("SET NAMES SET 'utf8'");
        $ergebnis = mysql_query($abfrage);
        while($row = mysql_fetch_object($ergebnis))
        {
         $id = $row->id;
         $name = $row->name;
         $beschreibung = $row->beschreibung;
         $preis = $row->preis;
         echo " <option value='$row->id'>$row->name;</option>  ";
        }
    ?>
        </select><br />'

     );

     });
    });
    </script>

It doesn't work. I get the following error Uncaught SyntaxError: Unexpected token ILLEGAL

What's wrong? Iam very glad for any help.

Regards, Stefan

Answer 1

You can try this :

<script type="text/javascript">
var counter = 0;
$(function(){
 $('p#add_field').click(function(){
 counter += 1;
 $('#container').append(
 '<strong>Artikel ' + counter + '</strong><br />'
 + '<input id="field1_' + counter + '" name="dynfields[]' + '" type="text" class="login-username" /><br />'
 + '<input id="field2_' + counter + '" name="dynfields2[]' + '" type="text" class="login-username" /><br />'
 + '<select name="dynfields3[]">' +

 + '<?php $abfrage = "SELECT * FROM artikel"; mysql_query("SET NAMES SET 'utf8'"); $ergebnis = mysql_query($abfrage); while($row = mysql_fetch_object($ergebnis)){?>'
+ '<option value="' + '<?php echo $row->id ?>' + '">' + '<?php echo $row->name ?>' + '</option>'
+ '<?php }?></select></br>'

     );

     });
    });
    </script>

Answer 2

I think the error is here

 + '<select name="dynfields3[]' + '">

maybe you intend

 + '<select name="dynfields3[]" >' + 



<?php
    $abfrage = "SELECT * FROM artikel";
    mysql_query("SET NAMES SET 'utf8'");
    $ergebnis = mysql_query($abfrage);
    while($row = mysql_fetch_object($ergebnis))
    {
     $id = $row->id;
     $name = $row->name;
     $beschreibung = $row->beschreibung;
     $preis = $row->preis;
     echo " <option value='$row->id'>$row->name;</option>  ";
    }
?> 

+ '</select><br />';