HTML populate select menu from input without submitting data?

Question

I have created an input form in HTML with a combination of input and select boxes. I would like to populate a select menu on the fly with data from the input boxes - for example:

Employee One: Jim Employee Two: John Employee Three: Bob

This would then populate a select menu with the Jim, John and Bob as options.

I am trying to avoid having to submit the input data first as I would really like to have all the input on one page. I submit all the data to a MySQL database, so worst case I could submit it in sections and read it back, but would appreciate any suggestions for doing it on the fly.

Thanks for any help.

Blair

Refer to this answer: http://stackoverflow.com/questions/17730621/how-to-dynamically-add-options-to-an-existing-select-in-vanilla-javascript — santi-elus, Oct 06 '16 at 13:59

score 0 · Accepted Answer · answered Oct 06 '16 at 14:04

0

Maybe something like this?

HTML:

<input id="employee_name" type="text" placeholder="Type here the Employee name"/>
<input id="add_employee" type="button" value="add"/>

<select id="employee_list">
</select>

Jquery:

$('#add_employee').click(addEmployee);

function addEmployee(){
    var employee_name = $('#employee_name').val();
    $('#employee_list').append('<option  value='+employee_name+'>'+employee_name+'</option>');
}

answered Oct 06 '16 at 14:04

Jefferson Ribeiro

135
8

1

That works - I was trying to do it without any button clicks, but I think that is impossible. Happy with this as I don't have to submit the form. – Oct 06 '16 at 15:24
Good to know that it helped you :) – Jefferson Ribeiro Oct 06 '16 at 15:48

HTML populate select menu from input without submitting data?

1 Answers1