Question

I have a MySQL table which looks like this:

ID   OPTION
1    First
2    Second

The user sees the following:

<div id="options">
 <select>
  <option value="1">First</option>
  <option value="2">Second</option>
 </select>
</div>

I would like the user to have the option to insert into the table, as follows:

<div id="add">
 <input type="text" name="newOption" placeholder="Your own option">
 <input type="button" value="Add">
</div>

It would then select their newly-added option:

<div id="options">
 <select>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3" selected>Third</option>
 </select>
</div>

As the above code is part of a page which contains other form elements the page can’t be reloaded, otherwise the data they’ve already typed will disappear. So I’d like to use jQuery.

EDIT: I have tried the following but it adds rows twice, sometimes even four times, for reasons I cannot fathom!

$("#button").click(function(){
 var test = $("#<?php echo $selectName; ?>").val();
 var dataString = 'select=<?php echo $select; ?>&selectName='+ test;

 $.ajax({
type: "POST",
url: "optionAdd.php",
data: dataString,
cache: false,
success: function(html){
 $("#<?php echo $select; ?>List").load("optionList.php?select=<?php echo $select; if ($_GET[required] == "no") { echo "&required=no"; } ?>");
     }
  });
});

The reason for the PHP above is I want to use multiples of this code on the same form and so I’m using GET to select the options, as it were.

Answer 1

You would need to send an AJAX request to server with the new data and get an ID returned for this new option. Once the ID is received you can create the option with the new ID as value and the user defined text

$('#add button').click(function(){
     /* get value from previous input*/
    var newOpt=$(this).prev().val();
     /* make AJAX "POST" request*/
    $.post( 'path/to/server/file', { newOption: newOpt}, function( newId ){
         /* ajax successfully completed, add new option*/
         $('#options select').append('<option value="'+ newId +'">'+newOpt+'</option>');
    });
    return false; /* prevent browser default handling of button click*/
}) 

At server receive the data as you would a form field with name="newOption" ie $_POST['newOption'] and send back a new ID as text

Alternatively you could send back all the options as html in sort order you want and replace all the options in the select.

    /* ajax to replace all options with html from server*/
    $.post( 'path/to/server/file', { newOption: newOpt}, function( response ){
         /* ajax successfully completed, add new option*/
         $('#options select').html( response);
    });