Back button issue

[rizwansyed]

Hi

Whenever i click on submit button,It goes to other page in html and i need to press back button.

I came to know that with AJAX, It is possible to avoid going to next page as it does in background.

Can anyone please share a example for ajax submit form

Please suggest

 

Thanks and Regards

Rizwan Syed

[rizwansyed]

Hi 

I have a html code, how can i modify to use submit button using ajax.

Attached is the html code 

Please suggest

mass.txt

[justsomeguy]

It's a lot easier if you just post your code in a code box here on the forum.

In general, you need too attach an event handler to whatever event you want to use, in this case the form's submit event, and your event handler should cancel the default event action and do its own thing instead.  So, you create your XHR object, set the URL, method, etc, set your ready state change handler, get your data to submit and send it.  You handle any server response in the ready state change handler.

[rizwansyed]

Hi 

As you suggested i am able to submit the form with POST and url.am able to receive it on server side.

But not getting any data.

Submit is success but no data.I think submit is not getting any data.so it is submitting with no data.

Attached is my modified source code.

Please suggest how to get a data in submit 

Thanks and Regards

Rizwan Syed

mass.txt

Edited September 5, 2018 by rizwansyed

[justsomeguy]

I think submit is not getting any data.so it is submitting with no data.

You should verify that then.  Print out the data you're trying to submit to the console.

Your code doesn't show you getting any of the form data.  You need to get the data in Javascript that you want to send, and send it to the server.  It does not gather all of the form data, how is Javascript supposed to know what data you want to send?  You need to pass the data in a formatted string to the XHR object's send method.

Again, please copy and paste your code into a code box in the forum instead of attaching a file.

[Steven1]

The form button is the issue here as the button is a submit and will refresh the page. Here's a simple AJAX example using jQuery.

 

<!-- Instead of this -->
<button type="button" onclick="massflow()">submit</button>

<!-- Try this -->
<div id="sendForm">submit</div> <!-- Make your div look and act like a button using css -->

<!-- Then (this is using jQuery) -->
<script>
// AJAX post form
$(document).on('click','#sendForm',function() {
var id=$(this).data("theFormTagWithTheDdata"); // This is the form tag with the data you want to capture
$.ajax({
url:"myupdate.php", // This is where you include your php file to handle the data
method:"POST",
data:{id:id},
dataType:"text",
success:function(data) {
// Show buttons here or take other actions like go to a new url
}
});
});
</script>

 

 

Edited January 6, 2020 by Steven1