Anthony Monterrosa Anthony Monterrosa - 7 months ago 9
Javascript Question

Trying to add an option to select with append, and nothing happens

My code has two sections: a section to input new items, and a section to interact with them. I'm trying to update the dropdown list every time a new item is added with jQuery, but my current method does nothing. By nothing, I mean that the dropdown list would remain empty. I've tried previous answers to this question, but none worked. (I'm pretty new to Javascript, so me just being a noob is completely possible).

Here's the html:

<!DOCTYPE html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "deletion.css"></link>
<script src = 'chemical.js'></script>
</head>
<body>
<form id = "newChemicalForm">
<p id = newChemicalText> Submit new chemicals here: </p>
<input type = "text" id = "newChemicalInput" onfocus = "this.select()" placeholder = "Enter new chemical here"/>
<button id = "newChemicalButton" onclick = "addChemical()" > Submit </button>
</form>
<form id = "newUsageForm">
<p id= "newUsageText"> Name your chemical and a usage amount. Check if the usage is daily. </p>
<select id = "chemicalDropdown">
</select>
<input type = "text" id = "newUsage" placeholder = "Ex: 250"/>
<input type = "checkbox" id = 'dailyCheckbox'/>
<p id = "dateText"> Enter the end date below: </p>
<input type = "date" id = "dateInput"/>
<button id = "newUsageButton" onclick = "addUsage()"> Submit </button>
</form>
</body>


And the Javascript:

chemicals = [];

function addChemical() {
var chemical = new Chemical();
chemicals.push(chemical);

$('#chemicalDropdown').append('<option value = "' + chemical.name + '"> ' + chemical.name + '</option> \n');
}

function Chemical() {
this.name = $('#newChemicalInput').val();
this.amount = 0;
this.usages = [];
}

Answer

There are a couple of things going on. First of all, When you press the submit button it tries to submit the first form. Second: It seems like the onclick event is not binding to the method which should add the item to the dropdownlist.

I've updated a couple of things:

  • Added $(document).ready(...); as it is best practice.
  • I've removed the inline onclick and bind the click event via jQuery.

JSFiddle here...

<form id = "newChemicalForm">
        <p id = newChemicalText> Submit new chemicals here: </p>
        <input type = "text" id = "newChemicalInput" onfocus = "this.select()" placeholder = "Enter new chemical here"/>
        <button type="button" id = "newChemicalButton" > Submit </button>
    </form>
    <form id = "newUsageForm">
        <p id= "newUsageText"> Name your chemical and a usage amount. Check if the usage is daily. </p>
        <select id = "chemicalDropdown">
        </select>
        <input type = "text" id = "newUsage" placeholder = "Ex: 250"/>
        <input type = "checkbox" id = 'dailyCheckbox'/>
        <p id = "dateText"> Enter the end date below: </p>
        <input type = "date" id = "dateInput"/>
        <button id = "newUsageButton" onclick = "addUsage()"> Submit </button>
    </form>

and the JS:

$(document).ready(function(){
  var chemicals = [];

  $("#newChemicalButton").on("click",function(){
    addChemical();
  });

  function addChemical() {
      var chemical = new Chemical();
      chemicals.push(chemical);

      $('#chemicalDropdown').append("<option value=" + chemical.name + ">" + chemical.name + "</option>");
  }

  function Chemical() {
      this.name   = $('#newChemicalInput').val();
      this.amount = 0;
      this.usages = [];
  }
});