html and php inside javascript variable

Question

i need your help to add an html, php code inside a javascript variable i tried single quotes and escaping it ' inside the var using / but it doesn't work.

<script type='text/javascript'>
var field = 
'<div class="form-group">
<label for="charge"><?php echo $lang['charge-formlabel']; ?></label>
<input type="text" id="charge" name="charge[]" placeholder="<?php echo $lang['placeholder-addcharge']; ?>" />
<p class="help-block">
<?php echo $lang['charge-form-description']; ?>
</p>
</div>
<div class="form-group">
<label for="description"><?php echo $lang['description-formlabel']; ?></label>
<input type="text" id="description" name="description[]" placeholder="<?php echo $lang['placeholder-adddescription']; ?>" />
<p class="help-block">
<?php echo $lang['description-form-description']; ?>
</p>
</div>
<div class="form-group">
<label for="value"><?php echo $lang['value-formlabel']; ?></label>
<input type="text" id="value" name="value[]" placeholder="<?php echo $lang['placeholder-addvalue']; ?>" />
<p class="help-block">
<?php echo $lang['value-form-description']; ?>
</p>
</div>';
</script>

You cannot use multiline string in javascript, use string concatenation — vasilenicusor
– vasilenicusor, Commented May 3, 2015 at 13:36
You should consider add some basic indenting to make your code a little more readable. — Dave Bennett
– Dave Bennett, Commented May 3, 2015 at 13:56

Llogari Casas · Accepted Answer · 2015-05-03 13:35:56Z

1

To escape quotes in a string in JavaScript you have to use the backslash. As a result, your PHP code will look like this, once scaped:

$lang[\'charge-formlabel\'];

Please, take also into consider that if you want to write a multiline string in JavaScript you will need to add a backlash at the end of each line as well.

var field = '<div class="form-group">\
<label for="charge"><?php echo $lang[\'charge-formlabel\']; ?></label>';

answered May 3, 2015 at 13:35

Llogari Casas

9621 gold badge13 silver badges37 bronze badges

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

1 Comment

vasilenicusor Over a year ago

Good point with usage of \ character at the end of line on multi line string

vasilenicusor · Accepted Answer · 2015-05-03 13:43:39Z

I have fixed your code.

<script type='text/javascript'>
    var field =
    '<div class="form-group">'+
    '<label for="charge"><?php echo $lang['charge-formlabel']; ?></label>' +
    '<input type="text" id="charge" name="charge[]" placeholder="<?php echo $lang['placeholder-addcharge']; ?>" />' +
    '<p class="help-block"><?php echo $lang['charge-form-description']; ?></p>' +
    '</div>'+
    '<div class="form-group">'+
    '<label for="description"><?php echo $lang['description-formlabel']; ?></label>'+
    '<input type="text" id="description" name="description[]" placeholder="<?php echo $lang['placeholder-adddescription']; ?>" />'+
    '<p class="help-block"><?php echo $lang['description-form-description']; ?></p>' +
    '</div>' +
    '<div class="form-group">' +
    '<label for="value"><?php echo $lang['value-formlabel']; ?></label>' +
    '<input type="text" id="value" name="value[]" placeholder="<?php echo $lang['placeholder-addvalue']; ?>" />' +
    '<p class="help-block"><?php echo $lang['value-form-description']; ?></p>'+ 
    '</div>';
</script>

Please see Google JavaScript Style Guide

Do not do this:

var myString = 'A rather long string of English text, an error message \
                actually that just keeps going and going -- an error \
                message to make the Energizer bunny blush (right through \
                those Schwarzenegger shades)! Where was I? Oh yes, \
                you\'ve got an error and all the extraneous whitespace is \
                just gravy.  Have a nice day.';

The whitespace at the beginning of each line can't be safely stripped at compile time; whitespace after the slash will result in tricky errors; and while most script engines support this, it is not part of ECMAScript.

Use string concatenation instead:

var myString = 'A rather long string of English text, an error message ' +
    'actually that just keeps going and going -- an error ' +
    'message to make the Energizer bunny blush (right through ' +
    'those Schwarzenegger shades)! Where was I? Oh yes, ' +
    'you\'ve got an error and all the extraneous whitespace is ' +
    'just gravy.  Have a nice day.';

Collectives™ on Stack Overflow

html and php inside javascript variable

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related