CODEWITHSUNDEEP
javascriptjquery
Asifuzzaman
Asifuzzaman

Reputation: 1783

Input from a textbox and add into a list isn't working

I am trying to add a new item into a list from a text box using jQuery but it's not working. There are a lot of code here, I want to find the problem in my code.

HTML code

<div id="page">
<h1 id="header">LIST</h1>
<h2>Add</h2>

<ul>

<li id="one" class="hot"><em> Fresh  </em>Figs </li>
<li id="two" class="hot"> Honey  </li>
  <li id="three" class="hot">Nuts </li>
<li id="four" class="hot">Bread </li>

</ul >
</div>
 <div id="newItemButton"><button href="#" id="showForm">NEW ITEM</button>                  
 </div> 
  </br>
 <form id="newItemForm">

 <input type="text" id="itemDescription" placeholder="Add a new item...."/>
 <input type="submit" id="addButton" value="Add"/>

 </form>

And the jQuery code

 $(function(){

     var $newItemButton=$('#newItemButton');
     var $newItemForm=$('#newItemForm');
     var $textInput=$('item:textbox');

     $newItemButton.show();
     $newItemForm.hide();
     $('#showForm').on('click',function(){
         $newItemButton.hide();
         $newItemForm.show();
    });
    $newItemForm.on('submit',function(e){
        var $newText=$('input:textbox').val();
        $('li:last').after('<li>' + $newText + '</li>').val();
        $newItemForm.hide();
        $newItemButton.show();
        $textInput.val(' ');
    });
 });

Upvotes: 0

Views: 87

Answers (2)

gavgrif
gavgrif

Reputation: 15509

I know this has an accepted answer - and I didn't read your question fully so this may not do exactly what you want - but I wanted to present an alternate approach with less code. The following features a button that when you click it - takes the value from the textbox and appends it to the list (note that I gave the list an ID). Just so you have another option. You don't need tjhe form at all and you certainly don't need to submit it - just to get the value and append it to the list. Just saying.

$(document).ready(function(){
  $('#addButton').click(function(){
    var newItem = $('#itemDescription').val();
    $('#myList').append('<li class="hot">' + newItem + '</li>');
    $('#itemDescription').val('');
    })
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
  <h1 id="header">LIST</h1>
  <h2>Add</h2>

  <ul id="myList">
    <li id="one" class="hot"><em> Fresh  </em>Figs </li>
    <li id="two" class="hot"> Honey  </li>
    <li id="three" class="hot">Nuts </li>
    <li id="four" class="hot">Bread </li>
  </ul >
</div>

 <input type="text" id="itemDescription" placeholder="Add a new item...."/>
 <button type="button" id="addButton">Add</button>

Upvotes: 1

Adrian Lambertz
Adrian Lambertz

Reputation: 923

check this fiddle.

you had a small error in your jQuery. Here is the working code:

 $(function(){

var $newItemButton=$('#newItemButton');
var $newItemForm=$('#newItemForm');
var $textInput=$('#itemDescription');

  $newItemButton.show();
  $newItemForm.hide();
  $('#showForm').on('click',function(){

    $newItemButton.hide();
    $newItemForm.show();
 });

 $newItemForm.on('submit',function(e){
    e.preventDefault();
    var $newText=$('#itemDescription').val();
    $('li:last').after('<li>' + $newText + '</li>').val();
    $newItemForm.hide();
    $newItemButton.show();
    $textInput.val(' ');
 });
});

first you have to prevent the default behaviour from the form element on submit. To do this i added the e.preventDefault(); function. then I received this error:

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: textbox

To fix this, I changed the selector to the ID of the input field. Now it works perfectly fine.

Upvotes: 0

Related Questions