I have having difficult completely my AJAX. The code below works fine and it submits to database without refreshing.
The part I am having difficulty completing and perhaps understanding is that I want upon submit to be able to bring back to the page information in the database without refreshing.
I was told by a coder that I need code to fire upon completion and it should go under this:
if (xhr.status === 200) {
This is the Javascript for submitting to database.
function Submit(handlerUrl, formElement) {
if (validate()) {
var xhr = new XMLHttpRequest();
xhr.open('POST', handlerUrl, true);
xhr.onload = function () {
if (xhr.status === 200) {
//code that will run when the page is done saving goes here.
alert(xhr.responseText);
}
}
xhr.send(new FormData(formElement));
}
}
This is the SAVE and Submit that works fine.
<input type="button" style= "cursor:pointer;" onclick="Submit(post.asp', document.getElementById('mainform'))" value="Submit and Save Your Changes" name="edit">
I want to bring current any changes to the database in this field:
<%=rs (username")%>
Any help would be appreciated so I can read the database and fire when the SAVE button is clicked without refreshing the page.
Simplifying my thoughts, once you click the Submit and Save Your Changes button (which posts to the database) how do you then update the fields on the page, without a refresh?
Hope that better explains and thank you James as I truly appreciate your help.
This is not the Quill example but one that is similar. I tried to mirror image it and canât seem to take this code below and alter it so it reads back the database saved changes to the page:
function Submit(handlerUrl, formElement) {
if (validate()) {
var xhr = new XMLHttpRequest();
xhr.open('POST', handlerUrl, true);
xhr.onload = function () {
if (xhr.status === 200) {
//code that will run when the page is done saving goes here.
alert(xhr.responseText);
}
}
xhr.send(new FormData(formElement));
}
}
OK, so I still need to understand your setup. You have what⌠a form? And when you submit this form (via Ajax?) the submitted values should be inserted into the database and then the page the form is on, should get updated without a page refresh. Did I get that right?
Would it be possible that you post a link to what you have so far?
Yes, via AJAX - and yes it is inserted into database (works fine)
Correct, the page that the form is on should get updated without a page refresh.
I was told by a rather good coder is that all I need is to have some code where is says this in bold below. He said that this function is already on the page and I need to put new code so that it will fire upon completion. He further said, with I donât understand âyou can manipulate the DOM but to start if you want to manipulate a single item the best way to do so is to ensure it has a unique id on the page.â
//code that will run when the page is done saving goes here.
All I want to update is this field: <%=rs (username")%>
I am having problems figuring out what that code is.
The form is part of a login page and would be difficult to post. Hope that doesnât present a problem.
If you need more information, please let me know. Thank you very much.
Well the way such a setup would work is as follows:
You have a form
You attach an event listener to the form that catches its submit event.
When the form is submitted, the listener prevents the browserâs default submit action
The listener then makes an Ajax call to an endpoint on a server somewhere, sending any necessary data along for the ride.
The server receives the Ajax call, processes whatever data it is sent and maybe inserts the data into a database
When its done, the server will typically return a response to the client.
The client receives that response, which it can use (for example) to update the page.
It seems like you are stuck at point 6.
The code you posted above has a line to alert the successful response from the server â alert(xhr.responseText);
Is that firing at all? I.e. once you have submitted the form and the data has been inserted into the database, do you see an alert on the page? If so, what does it contain?
The user choses a username in the input field.
Underneath that is says that your username will be sitename/username.
So once itâs saved, I want to update to: sitename/username name choosen
or if a user already has chosen a username it will show that on the form page.
So if the user wants to change that, upon that saved change it would update to the newly inputted username, because it will read for the database that was just saved.
After inserting the data to the databse, your server-side script (ASP, right?) is returning a response to the client, namely âYour information has been savedâ.
You should change whatever ASP code is returning âYour information has been savedâ and have it return the new URL instead.