How to pass text-box value to a combo-box?

Question

I'm currently working with a web application using HTML, CSS and PHP. But, I want to know how to pass a text-box value to the comb-box. The HTML code section is copied below. Also, combo-box values are fetched from the database.

HTML

<form method="post">
    <div class="form-group">
        <label for="text">Item Name</label>

        <select class="form-control show-tick" name="ItemName" id="ItemName" required>

          <option value="">Please select</option>

        </select><br>

        <div>
            <table>
                <tr>
                    <td style=" border: 7px solid transparent"><label for="text">Add Item Name : </label></td>

                    <td style=" border: 5px solid transparent"><input type="text" name="name" id="name"  class="form-control" > </td>

                    <td style=" border: 5px solid transparent"><button type="submit" class="btn btn-info">Add</button></td>
                </tr>
            </table>
        </div>

    </div>
</form>

Do you want it to be sent to the database? Or just added temporarily until the person refreshes the page. — Ralph, Mar 30 '19 at 16:03
No I didn't try... I couldn't figure it out... And yes I want it to be sent to the database too.. — , Mar 30 '19 at 16:32

score 0 · Answer 1 · answered Mar 30 '19 at 17:05

Hope its helps!

<script>
function frmSubmit() {
    var txtValue = document.frm.name.value;
    if(txtValue !== '') {
        var option = document.createElement("option");
        option.text = txtValue;
        document.frm.ItemName.add(option);
    }
    return false;
}
</script>

<form name="frm" method="post">
    <div class="form-group">
        <label for="text">Item Name</label>
        <select class="form-control show-tick" name="ItemName" id="ItemName" required>
        <option value="">Please select</option>
        </select><br>
        <div>
        <table>
            <tr>
                <td style=" border: 7px solid transparent"><label for="text">Add Item Name : </label></td>

                <td style=" border: 5px solid transparent"><input type="text" name="name" id="name"  class="form-control" > </td>

                <td style=" border: 5px solid transparent"><button type="submit" class="btn btn-info" onClick="return frmSubmit()">Add</button></td>
            </tr>
        </table>
        </div>
    </div>
</form>

In form submission post page you can handle about saving into the database the value. — Punitha Subramani, Mar 30 '19 at 17:06

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

You cannot do this only with HTML and PHP - but a tiny little bit of javascript/jQuery and you're gold.

Note that I added the ajax code block for you, where you will send the data to the PHP side and, once received, you can save it into your database.

$('button[type=submit]').click(function(){
  let nn = $('#name').val();
  $('#ItemName').append('<option value="' +nn+ '">' +nn+ '</option>');
  $('#name').val('');
  $.ajax({
    type: 'post',
     url: 'name_of_your_php_file.php',
    data: 'new_option=' + nn
  });
});

.b5{border: 5px solid transparent;}
.b7{border: 7px solid transparent;}
select{margin-bottom:30px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<form method="post">
  <div class="form-group">
    <label for="text">Item Name</label>
    <select class="form-control show-tick" name="ItemName" id="ItemName" required>
      <option value="">Please select</option>
    </select>



    <div>
      <table>
        <tr>
          <td class="b7"><label for="text">Add Item Name : </label></td>
          <td class="b5"><input type="text" name="name" id="name" class="form-control"> </td>

          <td class="b5"><button type="submit" class="btn btn-info">Add</button></td>
        </tr>
      </table>
    </div>

  </div>
</form>

PHP SIDE:

<?php
    $newopt = $_POST['new_option'];
    //now, just add the $newopt value into your database

References:

Why AJAX

AJAX vs FORMs

What is jQuery

How to pass text-box value to a combo-box?

HTML

2 Answers2

PHP SIDE: