CODEWITHSUNDEEP
javascripthtmlhtml-select
semilogo97
semilogo97

Reputation: 115

Items disappearing when adding input from HTML textfield to HTML Select/Option List

Been on this issue for more than a day now. I'm trying to add items to a HTML Select/Option list from a HTML text field using JavaScript. However, the items are added and disappearing in a split second. Please can some one help.

You can have a look at the FULL source code below:

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="CSS/mainoperations.css">
</head>
<body>
    <div class="header">
    </div>

    <div id="container">
    <div id="leftcolumn">   
    <ul>
    <h1>PartsCribber</h1>
    <li><a class="active" href="mainoperations.php">Main Operations</a></li>
    <li><a href="vieweditprofile.php">Profile Settings</a></li>
    <li><a href="#contact">Change Password</a></li>
    <li><a href="#about">Student Cart</a></li>
    <li><a href="#about">Student Possession</a></li>
    <li><a href="#about">Update Inventory</a></li>
    <li><a href="#about">Log Out</a></li>
    </ul>
    </div>

    <div id="rightcolumn">
    <form>

        <div class="title">
        <h3>
        <?php echo "View/Edit Profile"; ?>
        </h3>
        </div>

        <!-- notification message -->
        <?php if (isset($_SESSION['success'])) : ?>
        <div class="error success">
        <h3>
        <?php
        echo $_SESSION['success']; 
        unset($_SESSION['success']);
        ?>
        </h3>
        </div>
        <?php endif ?>

        <?php include('errors.php'); ?>

        <div class="input-group">
        <label>Barcode:</label>
        <input type="text" id="barcode">
        </div>

        <div class="input-group">
        <button class="btn" onclick="insertValue()" >Enter</button>
        </div>

        <select id="myselect" size="10" class="select">
            <option>Apple</option>
            <option>Orange</option>
            <option>Pineapple</option>
        </select>

    </form>

    <script>
    function insertValue()
    {
        var select = document.getElementById("myselect"),
                    txtVal = document.getElementById("barcode").value,
                    newOption = document.createElement("OPTION"),
                    newOptionVal = document.createTextNode(txtVal);

                newOption.appendChild(newOptionVal);
                select.insertBefore(newOption,select.firstChild);

                return false;

        }
    </script>

    </div>
    <div style="clear: both;" > </div>
    </div>

</body>
</html>

The function I've been starring at:

function insertValue()
    {
        var select = document.getElementById("myselect"),
                    txtVal = document.getElementById("barcode").value,
                    newOption = document.createElement("OPTION"),
                    newOptionVal = document.createTextNode(txtVal);

                newOption.appendChild(newOptionVal);
                select.insertBefore(newOption,select.firstChild);

                return false;

        }

The related HTML code for the text input and the options listbox:

        <div class="input-group">
        <label>Barcode:</label>
        <input type="text" id="barcode">
        </div>

        <div class="input-group">
        <button class="btn" onclick="insertValue()" >Enter</button>
        </div>

        <select id="myselect" size="10" class="select">
            <option>Apple</option>
            <option>Orange</option>
            <option>Pineapple</option>
        </select>

Upvotes: 0

Views: 82

Answers (1)

somethinghere
somethinghere

Reputation: 17350

Simple add:

onclick="insertValue(); return false;"

Actually, since your insertValue function returns false, you could actually do

onclick="return insertValue()"

This will prevent your form from submitting and reloading (and therefor emptying the select when reloading the page). See amended snippet below:

function insertValue() {

  var select = document.getElementById("myselect"),
 
  txtVal = document.getElementById("barcode").value,
  newOption = document.createElement("OPTION"),
  newOptionVal = document.createTextNode(txtVal);

  newOption.appendChild(newOptionVal);
  select.insertBefore(newOption,select.firstChild);

  return false;

}
<form>

  <div class="input-group">
    <label>Barcode:</label>
    <input type="text" id="barcode">
  </div>

  <div class="input-group">
    <button class="btn" onclick="insertValue(); return false;">Enter</button>
  </div>

  <select id="myselect" size="10" class="select">
    <option>Apple</option>
    <option>Orange</option>
    <option>Pineapple</option>
  </select>

</form>

Personally I would write your code slightly differently to make it clearer and not use the onclick:

var select = document.getElementById("myselect");
var add = document.getElementById("add-barcode");
var barcode = document.getElementById("barcode");
  
add.addEventListener('click', function( event ){
 
  event.preventDefault();
  
  var option = document.createElement( 'option' );
  
  option.textContent = barcode.value;
  
  select.insertBefore( option, select.childNodes[ 0 ] );

});
<form>

  <div class="input-group">
    <label>Barcode:</label>
    <input type="text" id="barcode">
  </div>

  <div class="input-group">
    <button id="add-barcode" class="btn">Enter</button>
  </div>

  <select id="myselect" size="10" class="select">
    <option>Apple</option>
    <option>Orange</option>
    <option>Pineapple</option>
  </select>

</form>

Upvotes: 2

Related Questions