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: stackoverflow.com/questions/17730621/… — santi-elus
– santi-elus, Commented Oct 6, 2016 at 13:59

Jefferson Ribeiro · Accepted Answer · 2016-10-06 14:04:57Z

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 6, 2016 at 14:04

Jefferson Ribeiro

1358 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user6645160 Over a year ago

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.

Jefferson Ribeiro Over a year ago

Good to know that it helped you :)

Collectives™ on Stack Overflow

HTML populate select menu from input without submitting data?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related