CODEWITHSUNDEEP
javascriptjqueryhtml
Dom W
Dom W

Reputation: 13

Text input combined with drop down box

I am creating a simple shopping list. I want to have a text input to say what the item is and then followed by a drop down box to show what section of the shop it is in. When these 2 parts are filled in I want the text to be added as an li in the relevant ul (based on the section of the shop that it's in). Here's my html: 

  <!DOCTYPE html>
<html>
<head>
    <title>Shopping List</title>
    <link rel="stylesheet" type="text/css" href="assets/css/shoppingList.css">
    <script type="text/javascript" src="assets/js/lib/jquery-3.3.1.min.js"></script>
</head>
<body>

    <h1>Shopping List</h1>


    <input type="text" placeholder="Type Shopping Item Here">
    <select id="aisle">
        <option value="">Please choose a section</option>
        <option value="fruitAndVeg">Fruit and Veg</option>
        <option value="meatFridge">Meat Fridge</option>
        <option value="deliCounter">Deli Counter</option>
        <option value="dairy">Dairy</option>
    </select>

    <ul id="fruitAndVeg">
        <li>Apple</li>
        <li>Pear</li>
    </ul>

    <ul id="meatFridge">
        <li>Sausage</li>
        <li>Chicken</li>
    </ul>

    <ul id="deliCounter">
        <li>Ham</li>
        <li>Cheese</li>
    </ul>

    <ul id="dairy">
        <li>Milk</li>
        <li>Yoghurt</li>
    </ul>

    <ul id="other">
        <li>Sweets</li>
        <li>Chocolate</li>
    </ul>

<script type="text/javascript" src="assets/js/shoppingList.js"></script>
</body>
</html>

I can add an li to one of the uls using jQuery but how do I add it to the correct ul based on the value of the dropdown? here's my jQuery so far

    $("input[type='text']").keypress(function(event) {
    var value = $(this).val();
    if(event.which === 13){
        $(this).val("");
        $("#fruitAndVeg").append("<li>" + value + "</li>");
    }    
});

Upvotes: 1

Views: 316

Answers (4)

benvc
benvc

Reputation: 15130

You need to listen for the change event on your select in order to use both the selected value and the input value to append to the right list. For example:

const item = $('input');
const aisle = $('#aisle');
aisle.change(() => {
  const value = item.val();
  if (value) {
    $('#' + aisle.val()).append(`<li>${value}</li>`);
    item.val(''); // reset input
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Type Shopping Item Here">
<select id="aisle">
  <option value="">Please choose a section</option>
  <option value="fruitAndVeg">Fruit and Veg</option>
  <option value="meatFridge">Meat Fridge</option>
  <option value="deliCounter">Deli Counter</option>
  <option value="dairy">Dairy</option>
</select>
<ul id="fruitAndVeg">
  <li>Apple</li>
  <li>Pear</li>
</ul>
<ul id="meatFridge">
  <li>Sausage</li>
  <li>Chicken</li>
</ul>
<ul id="deliCounter">
  <li>Ham</li>
  <li>Cheese</li>
</ul>
<ul id="dairy">
  <li>Milk</li>
  <li>Yoghurt</li>
</ul>
<ul id="other">
  <li>Sweets</li>
  <li>Chocolate</li>
</ul>

Upvotes: 0

stalkert
stalkert

Reputation: 26

`$("input[type='text']").keypress(function(event) {
      var value = $(this).val();
      var option = $("#aisle").val()
      if(event.which === 13){
          $(this).val("");
          $("#" + option).append("<li>" + value + "</li>");
      } 
});`

Upvotes: 1

Muhammad Saqib
Muhammad Saqib

Reputation: 70

try this...

   $("#"+value).append("<li>" + value + "</li>");

Upvotes: 0

Code First
Code First

Reputation: 179

Could you please try this.

   if(event.which === 13)
{ 
     var ulId = $('#aisle').val();
     $(ulId).append( "<li>" + value + "</li>" );
     $(this).val("");
    }

Upvotes: 0

Related Questions