I have a form on a page that is used to “Add/Edit a Location”. Here is my form:
<form id='locationEditForm' name='locationEditForm'>
<table width='50%'>
<tr><td colspan='2'><hr></td></tr>
<tr><td colspan='2'><button type='submit' name='save' id='save'>Lookup Location By ID: </button>
<input type='text' size='10' name='locationToEdit'><br/><br/></td></tr>
<tr><td>Name:</td><td><input type='text' name='locationName'/></td></tr>
<tr><td>URL:</td><td><input type='text' name='locationURL'/></td></tr>
<tr><td>Coordinates:</td><td><input type='text' name='locationCoords'/></td></tr>
<tr><td>Address:</td><td><textarea name='locationAddress' rows='4' cols='40'></textarea></td></tr>
<tr><td>Phone:</td><td><input type='text' name='locationPhone'/></td></tr>
<tr><td>Hours:</td><td><textarea name='locationHours' rows='3' cols='40' wrap='soft'/></textarea></td></tr>
<tr><td colspan='2'><button type='submit' name='save' id='save'>Save Changes</button>
<button type='button' class="cancel">Cancel</button></td></tr>
</table>
</form>
I’ve wrapped the form elements in a table just for the sake of keeping the input boxes aligned for now in a “quick and dirty” sort of way.
Anyway, As you can see, I have a button and input area for the user to “lookup” an existing location by id. This is so that an existing location can be edited. I understand how to make that button ‘submit’ to my php code and to then lookup the location in the database, but my question is this — is it possible to lookup the location in a MySQL database and load the information into the existing form without causing the page to reload as it normally would when I post the form?
Ideally, I imagine the data for an existing location just “popping” into the form without the entire page reloading. How would I go about doing something like this?
Thanks a ton!
The technique you’re looking for is commonly referred to as Ajax. In your case, you’d want to submit an
XMLHttpRequest()to a different PHP script which returns data you can use. Either HTML to insert into your form, or JSON data which you parse and use to update field values would be good choices.There are lots of resources out there on how to make a PHP/MySQL endpoint for an Ajax request. These search terms should get you started. Good luck!