CodeIgniter, Jquery - append dropdown menu in form - php

Question

Hi I'd like some help please. I have created a form in CodeIgniter in which I want to save the name of a movie and the actors who play in. My code looks like this:
<?php echo form_open().PHP_EOL; ?>
<div class="form-group">
<label for="title">Title *</label>
<?php echo form_input('title', set_value('title', html_escape($movie->title)), 'class="form-control"'); ?>
<?php echo form_error('title'); ?>
</div>
<h4>Cast</h4>
<button type="button" id="add_actor" class="btn btn-primary btn-sm">Add Actor</button>
<hr>
<ul class="list-unstyled" id="cast"></ul>
<div class="form-group">
<?php echo form_submit('save', 'Save', 'class="btn btn-primary"').PHP_EOL; ?>
</div>
<?php echo form_close().PHP_EOL; ?>
<script>
$(document).ready(function() {
var output = '<li style="margin-bottom:5px;">\
<div class="row">\
<div class="col-md-6">\
<?php echo form_dropdown("actors", $actors, null, "class=\"form-control\""); ?>\
</div>\
<div class="col-md-6">\
<input type="text" name="character[]" class="form-control"\ placeholder="Character" />\
</div>\
</div>\
</li>';
$('#add_actor').click(function() {
$('#cast').append(output);
});
});
On firebug I get this as output:
<script>
$(document).ready(function() {
var output = '<li style="margin-bottom:5px;">;\
<div class="row">;\
<div class="col-md-6">;\
<select name="actors" class="form-control">
<option value="5">Keira Knightley</option>
<option value="7">Matthew Goode</option>
<option value="6">Benedict Cumberbatch</option>
<option value="2">Christian Bale</option>
<option value="10">Jude Law</option>
<option value="4">Daniel Craig</option>
<option value="3">Brad Pitt</option>
<option value="1">Johnny Depp</option>
<option value="9">Sean Bean</option>
<option value="8">Pierce Brosnan</option>
<option value="11">Ed Harris</option>
<option value="12">Judi Dench</option>
</select>\
</div>\
<div class="col-md-6">\
<input type="text" name="character[]" class="form-control"\ placeholder="Character" />\
</div>\
</div>\
</li>';
$('#add_actor').click(function() {
$('#cast').append(output);
});
});
</script>
I probably guess that the error is caused because the form_dropdown() doesn't have the \ at the end of the line.
So what I'm trying to do basicly is when I click the "Add Actor" button the jquery will append a row in my form where it should have a dropdown menu for choosing the actor, and next to this dropdown an input field for typing the actor's character in the movie. When I click the "Add Actor" button again I will to the same process again to enter the next actor in the movie, etc etc.
However the code in the script tag doesn't work as I expected, In fact jquery complains for syntax error. I 'm checking my code and try some changes but no effect.
How can I make this work properly?

Answer 1

You should see an error like Uncaught SyntaxError: Unexpected token ILLEGAL in your console as you have ill formatted string literal.
Add \ at the end of each line for the output
var output = '<li style="margin-bottom:5px;">\
<div class="row">\
<div class="col-md-6">\
<?php echo form_dropdown("actors", $actors); ?>\
</div>\
<div class="col-md-6">\
<input type="text" name="character[]" class="form-control"\ placeholder="Character" />\
</div>\
</div>\
</li>';
You can't begin a new line at the middle of a string literal without telling the compiler that the string is continued in the next line, so in your case you can use the \ operator as given above to indicate that.
Demo: Fiddle