CODEWITHSUNDEEP
javascriptjquery
Darcey Mckelvey
Darcey Mckelvey

Reputation: 556

Need text in input to not display user input once sent

Here is my jQuery, I have it working properly but once my row is added the user input in the inputs are still there and not cleared. How do I fix this?

   // Removing menu rows
    $('.menu-items').on('click', '.delete', function(){
      $(this).closest('.menu-row').remove();
    });

// HTML
var MENU_ROW_TEMPLATE = '<div class="menu-row"><span class="item-description">$description</span><div class="control-items"><span class="item-price">$price</span><span class="delete">X</span></div></div>'

// Adding menu rows
$('.menu-category').on('click', 'button', function(){
  var $row = $(this).closest('.add-item');
  var name = $row.find('input').first().val();
  var price = $row.find('input').last().val();

  var newRowHtml = MENU_ROW_TEMPLATE.replace('$description', name).replace('$price', price);

  var $newRow = $(newRowHtml);

  var $lastMenuRow = $row.closest('.menu-category').find('.menu-row').last();

  $newRow.insertAfter($lastMenuRow);
});

Sorry for my poor explaining skills.

Upvotes: 0

Views: 22

Answers (1)

Shawn Jacobson
Shawn Jacobson

Reputation: 1352

Clear the name and price after you get the values...

...
var name = $row.find('input').first().val();
var price = $row.find('input').last().val();
$row.find('input').first().val('');
$row.find('input').last().val('');
...

Upvotes: 1

Related Questions