Appending to a list with multiple input values

Question

I am trying to get the values from input boxes and then print them out as a sentence into a list. In theory I feel this should work but don't understand why it is not. please help!

$('add_gowns').click(function() {
var size = document.getElementById("blksize").value;
var colour = document.getElementById("colouroption").value;
var quantity = document.getElementById("gownquantity").value;

$("#content ul li:last").append("<li> Size: "+size+", Colour: "+colour+", Quantity: "+quantity+"</li>");
});

Here is the related html

<td><input type="number" id="blksize"></td>

<td><select id="colouroption"></select></td>

<td><input type="number" id="gownquantity"></td>
<td><input type="submit" id="add_gowns" value="Add"/></td>
</tr>

</table>
<div id="content">
<ul></ul>
</div>

<td><input type="number" id="blksize"></td> <td><select id="colouroption"></select></td> <td><input type="number" id="gownquantity"></td> <td><input type="submit" id="add_gowns" value="Add"/></td> </tr> </table <div id="content"> <ul></ul> </div> — Jessica Mather
– Jessica Mather, Commented Jun 6, 2016 at 17:14
You need to use the element identifier. In jQuery you need to use either "." for class or "#" for ids. So you should start your function off with $('#add_gowns').click(function(){ /**/ }); — Bri
– Bri, Commented Jun 6, 2016 at 17:21

Bri · Accepted Answer · 2016-06-06 17:37:03Z

2

The following should work as tested: https://jsfiddle.net/z8q7n9gn/

$('#add_gowns').click(function() {
    var size = $("#blksize").val();
    var colour = $("#colouroption").val();
    var quantity = $("#gownquantity").val();

    $("#content ul").append('<li> Size: ' + size + ', Colour: ' + colour + ', Quantity: ' + quantity + '</li>');
});

edited Jun 6, 2016 at 17:37

answered Jun 6, 2016 at 17:25

Bri

6932 gold badges6 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Appending to a list with multiple input values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related