user6889396 user6889396 - 2 months ago 25
HTML Question

jquery wont append value from inputbox

I want to make a dynamic list in jquery. It means every time the user puts something in the inputbox and presses the button it puts the item onto the screen.
But I am having trouble with this code:

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='jquery-3.1.1.min.js'></script>
<script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>

<script type='text/javascript'>
$(document).ready(function(){
$('button').click(function(){
$('#content').append("<p>" . $('#box').val() . "</p>");
});
});
</script>
</head>

<body>
<input type='text' id='box' />
<button>Submit</button>
<div id='content'>

</div>
</body>
</html>

Answer

You're code is broken. You are suppose to use + not .

 <!DOCTYPE html>
<html>
<head>
    <script type='text/javascript' src='jquery-3.1.1.min.js'></script>
    <script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>

    <script type='text/javascript'>
        $(document).ready(function(){
            $('button').click(function(){
                var toAdd = $('input[name=checkListItem]').val();
                $('.content').append('<div class="item">' + toAdd + '</div>');
            });
    });
    </script>
</head>

<body>
<form name='checkList'>
    <input type='text' name='checkListItem' />
</form>
<button>Submit</button>
    <div class='content'>

    </div>
</body>
</html>
Comments