CODEWITHSUNDEEP
jqueryhtml
user6889396
user6889396

Reputation: 23

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>

Upvotes: 0

Views: 35

Answers (2)

BoeNoe
BoeNoe

Reputation: 562

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>

Upvotes: 1

Ehsan
Ehsan

Reputation: 12959

Change :

 $('#content').append("<p>" . $('#box').val() . "</p>");

To :

$('#content').append("<p>" + $('#box').val() + "</p>");

Final code :

 $(document).ready(function(){
     
     $('button').click(function(){
         
         $('#content').append("<p>" + $('#box').val() + "</p>");
         
     })
     
 })
<input type='text' id='box' />
<button>Submit</button>
<div id='content'>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Upvotes: 0

Related Questions