Update a select box only

I have a form to add a buildin to a database, how can I update the select box which allows a building to be selected? I only see the new option when the page is refreshed. How can I refresh only the select box once the form is submitted?

This may or may not answer your question.

Inserting/creating new data, updating/editing existing data, and deleting data is an ‘administrative’ function, that must succeed without error before you can use the result. Are you sure you don’t want to submit the insert form normally, then populate the select/option list with the final data when the page gets requested?

Sorry, I didnt explain the problem
I have this form where I allow users to add a new building if a building is not found
A popup box allows adding a building
localhost_app_SST_floorplan_ (1)
when the form is submitted (Using AJAX to stay on the page)
The dropdown shows None Found, but when I refresh the page, the new building is there. Can I refresh only that select list so I can avoid the full page reset?

In the code that is executed when the submit button is clicked you can create a new option and add it to the select element. The new option should appear when the select element is clicked to reveal the options.

You can stay on the same page by putting the form and the form processing code on the same page. AJAX is not required to accomplish this.

If you are committed to using AJAX only, here’s what you would need to do, to do this properly. The add building form submission AJAX success code would need to re-trigger the building search code to cause the select/option menu to get the current choices, which should, provided no typo mistake was made, find the just added building entry.

You can stay on the same page by putting the form and the form processing code on the same page. AJAX is not required to accomplish this.

I can? what do a put as the action for the form then, rig ht now, heres the form

<form id="newBuilding" onsubmit="return ajaxpost()">

How can I stay on the same page to handle the form data?

Then do I use javascript to add the new option?

AJAX is used when you don’t want to reload the page you are on. This maybe such a case, but you haven’t (again) provided more than a snippet of the problem you are trying to solve.

To cause a form to submit to the same page it is on, just leave the entire action=‘…’ attribute out of the form tag and put the post method form processing code near the start of the code on the page.

For the linked to javascript and actually Archibald’s suggestion too, your application is a data-driven design. The select/option menu choices come from your database table holding the building definitions. The value attributes are (should be) the autoincrement primary indexes from that table, so that when you submit the form containing the building select/option choice, the value will be an expected existing choice.

1 Like

It can be done but your page needs to be changed.
I assume that when the form is submitted that the new building data is stored on the server and that the new building data is added to the html on the server and then sent back to the browser.
You need to change that to having js control all data content on the page. That means no updating the page from the server.
When a new building is added use a click event listener on the Submit button to creates a new option element and append it to the select element. You can rearrange the order of the options if required too.
As soon as then Dom changes by appending a new option element the browser will refresh the page.

You can either prevent the default option and send the new data to the server to update the database and not updating the page, or just let the default action send the form data to the server and change the server code to just save the data and not update the page.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.