While building an API to learn how they work, I've run into an issue when hitting the endpoint which adds data to the underlying database using an HTML form.
Here is the form's HTML:
<form action="mobile/add" method="post">
<legend>Add Mobile</legend>
<ol>
<li>
<label for="name">name</label>
<input type="text" name="name" id="name"></input>
</li>
<li>
<label for="model">model</label>
<input type="text" name="model" id="model"></input>
</li>
<li>
<label for="color">color</label>
<input type="text" name="color" id="color"></input>
</li>
</ol>
<button type="submit">Submit</button>
<button type="reset">Cancel</button>
</form>
take note of action="mobile/add"
This form is set up to be visible at this URL:
Here is the form, populated with sample data, prior to clicking the Submit button:
When Submit is clicked, the data gets added to the database, as can be seen from the endpoint http://localhost:8080/miscellaneous/APIexamples/CRUD/mobile/list that lists the mobile data:
However, after the form is submitted, the user sees this:
I believe the redirect is occurring due to the action="mobile/add" in the form, which is necessary to add the data to the database, but not what I want the user to see.
Is there a way to add the data from the form to the database but redisplay http://localhost:8080/miscellaneous/APIexamples/CRUD/ with the "Add Mobile" form fields cleared out? Or is the approach used above non-standard (ie. maybe this is normally handled using AJAX instead of a form submission)?
Outcome:
Thanks to @VoiceOfUnreason's answer, changing the HTTP status code to 205 corrected the issue. The data was still submitted but the page did not redirect. However, the form fields were not cleared out. To do that the form tag was modified as follows <form action="mobile/add" method="post" onsubmit="this.submit();this.reset();return false;">. That bit of wisdom came from @atesin's 8/17/2019 post in this thread.
