assigning an HTML value to a JavaScript variable

Question

I have the following Javascript function that allows me to add a new row to my table:

$(function() {

var $table = $('table.pv-data'),
    counter = 1;

$('a.add-author').click(function(event){
    event.preventDefault();
    counter++;            
var newRow = 
        '<tr>' + 
            '<td><input type="text" name="id' + counter + '"/></td>' +
            '<td><select name="state' + counter + '"/><OPTION value= "persil">Persil</OPTION><OPTION value= "other">Other</OPTION></select></td> ' +
            '<td><input type="text" name="longitude' + counter + '"/></td>' +
            '<td><input type="text" name="latitude' + counter + '"/></td>' +
            '<td><input type="text" name="altitude' + counter + '"/></td>' +
            '<td><input type="text" name="module_tilt' + counter + '"/></td>' +
            '<td><a href="#" class="remove">remove</a></td>'
        '</tr>';
    $table.append(newRow);
    });
});

Everything is working fine, just the part where I have to select between the options:"Persil" or "Other" is not working. it's not showing the different options.

Of course won't work. You are closing the select tag too early. <select name="state'+counter'"> should be correct — KiaMorot
– KiaMorot, Commented Jun 26, 2013 at 15:14
As a side note, if you do a lot of this, you may want to consider using mustache.js — Laurent S.
– Laurent S., Commented Jun 26, 2013 at 15:17
FYI, you're missing a + after the second to last line of HTML. It's actually harmless here, but it excludes the closing </tr>. — user2437417
– user2437417, Commented Jun 26, 2013 at 15:18

KiaMorot · Accepted Answer · 2013-06-26 15:25:28Z

2

The following lines need to be replaced

'<td><select name="state' + counter + '"/>...'. Is not correct as you are closing the select tag too early.
'<td><a href="#" class="remove">remove</a></td>'. You are missing + at the end.

by these replacements:

'<td><select name="state' + counter + '">...'.
'<td><a href="#" class="remove">remove</a></td>' +

Note: Replacement#2 is pointed out in the comments.

edited Jun 26, 2013 at 15:25

answered Jun 26, 2013 at 15:19

KiaMorot

1,75611 silver badges22 bronze badges

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

Comments

Ennui · Accepted Answer · 2013-06-26 15:23:49Z

Take away the self-closing tag from the end of the opening select tag and remove the space between the value= "persil" in both of the option elements. Also add a + to concatenate the final </tr>.

var newRow = 
    '<tr>' + 
        '<td><input type="text" name="id' + counter + '"/></td>' +
        '<td><select name="state' + counter + '"><OPTION value="persil">Persil</OPTION><OPTION value="other">Other</OPTION></select></td> ' +
        '<td><input type="text" name="longitude' + counter + '"/></td>' +
        '<td><input type="text" name="latitude' + counter + '"/></td>' +
        '<td><input type="text" name="altitude' + counter + '"/></td>' +
        '<td><input type="text" name="module_tilt' + counter + '"/></td>' +
        '<td><a href="#" class="remove">remove</a></td>' +
    '</tr>';

Having the self closing tag at the end of an element (the slash at the end, as in <img src="..." />) is only for elements without an independent closing tag, so for something like <select> you do not need it as this function is fulfilled by the </select>.

Ezequiel Gorbatik · Accepted Answer · 2013-06-26 15:39:03Z

0

You have a problem in this line:

'<td><select name="state' + counter + '"/><OPTION value= "persil">P

The select have it own closing tag it must be like this

'<td><select name="state' + counter + '"><OPTION value= "persil">P

answered Jun 26, 2013 at 15:39

Ezequiel Gorbatik

2,6051 gold badge18 silver badges19 bronze badges

Collectives™ on Stack Overflow

assigning an HTML value to a JavaScript variable

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related