I had a simple to-do list app that worked fine, recently I overhauled the app using Bootstrap, before I wasnt using any css framework. Now the jQuery is not working properly... Why is this?

Here is the relevent HTML:

<div id="to-do">
    <form class="form-inline">
        <input class="form-control" type="text" id ="input" placeholder ="I need to...">
        <button class="btn btn-primary" id ="add" type="submit">Add Item</button>

    </form>

    <ul id="list"></ul>

</div>

This is my Javascript code:

$(function() {

// configuration

// button
var add = $('#add');

// list container
var listContainer = $('#list');



// click event for button

add.on('click', function() {


    // value of input
    inputValue = $('#input').val();

    // add new list item
    listContainer.prepend('<li> ' + inputValue + '</li>');
    // clear value input
    $('#input').val('');



});

});

I had a simple to-do list app that worked fine, recently I overhauled the app using Bootstrap, before I wasnt using any css framework. Now the jQuery is not working properly... Why is this?

Here is the relevent HTML:

<div id="to-do">
    <form class="form-inline">
        <input class="form-control" type="text" id ="input" placeholder ="I need to...">
        <button class="btn btn-primary" id ="add" type="submit">Add Item</button>

    </form>

    <ul id="list"></ul>

</div>

This is my Javascript code:

$(function() {

// configuration

// button
var add = $('#add');

// list container
var listContainer = $('#list');



// click event for button

add.on('click', function() {


    // value of input
    inputValue = $('#input').val();

    // add new list item
    listContainer.prepend('<li> ' + inputValue + '</li>');
    // clear value input
    $('#input').val('');



});

});

• javascript
• jquery
• html
• css
• twitter-bootstrap

• You should incorporate all your html dependencies and body at least. – Anwar Commented Feb 24, 2015 at 9:43
• Why are you using form and type="submit"? – Satpal Commented Feb 24, 2015 at 9:56
• I think it because it e from a part of the style of this bloc in Bootstrap design. – Anwar Commented Feb 24, 2015 at 9:59

1 Answer 1

Mine works fine, does is what you needed to do ?

$(function() {
  

// configuration

// button
var add = $('#add');

// list container
var listContainer = $('#list');



// click event for button

add.on('click', function() {

     event.preventDefault(); // stop default behaviour of submit button
    // value of input
    inputValue = $('#input').val();

    // add new list item
    listContainer.prepend('<li> ' + inputValue + '</li>');
    // clear value input
    $('#input').val('');



});
  
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest piled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div id="to-do">
    <form class="form-inline">
        <input class="form-control" type="text" id ="input" placeholder ="I need to...">
        <button class="btn btn-primary" id ="add" type="submit">Add Item</button>
    </form>

    <ul id="list"></ul>

</div>