prevent dupplicate submitted by ajax - php

I'm using ajax to create list of replies.
In the end of the list I added textarea form that allow user to add reply (also with ajax).
The problem is that i call to my JS in my main PHP page so when user want to submit reply the page doesn't "know" the js code. If i add the js to the ajax php file/page the code will work but then it will be duplicated many times and when user will submit form the text will be submitted many times...
In my console i see that the JS file duplicate every time i load the replies list
How can i prevent it?

Disable the submit button right after user presses it once. Using jQuery:
$("#button").attr('disabled','disabled');
Make sure to remove disabled attribute on AJAX error so user can re-submit the form with new data. You can remove disabled attribute like this:
$('#button').removeAttr('disabled');

[improved]
if you want to not repeat data when navigation or F5 press, simply free the $_POST vars after doing whatever you want, and check if isnt set (before clean, of course) redirect you wherever you want. example:
/* HERE do the job with ajax response. */
if(!isset($_post['foo'])) header('Location: wherever.php');
$_POST['foo']=NULL;
If you're using $_GET... don't do it, use $_POST... $_POST is your friend.
Finaly ensure that if you press F5, you don't re-send form vars by post (otherwise you will get the same). If it's happening, clear your inputs with jQuery on page load.
$('#inputID').val('');

Related

How to go back without asking to confirm resubmission of the form

I have a web page that loads all the data from a mysql database called datalist.php
From this page I can edit record by record with a button that redirects you to an editdata.php page adapted to the fid of the record.
Once edited as they want to see the changes, I don't redirect them to the main one letting them see the changes and simply clicking back or with a button they return to the datalist.php without any problem.
The button is this
echo "<p id='parrafo'><a style='padding:1px 20px'class='button rounded-0 primary-bg text-white w-0 btn_1 boxed-btn' href='javascript:history.back() '><--</a></p>";
PROBLEM
I added a search engine where the displayed data can be filtered.
When they use the search engine from datalist.php, I direct them to a page called search engine.php where, through a post method, I store what they are looking for in a variable and the data that users want appears.
But when they edit a filtered record, it is edited without problems, but when they go back, they return to the search engine.php and the message appears:
"Confirm form resubmission In order to display correctly, this web page needs the data you entered earlier. You can submit that data again, but that will cause the page to repeat all previous actions. Press Reload to submit the data and display the page.
Hit the page refresh button to resubmit the data needed to load the page."
Of course, if they update, they come back when the filtered data comes out.
Isn't there any way to store the variable used in the search so that when I go back I don't get this error or any solution??
simple! when user will submit form for that variable instead of making post request
option1: just use get request __url__?variable=... but this will not remember the variable when you go back
option2: store the variable in the cookie and just go to next page (eg. window.location.href = '...';). and in next page access the cookie from php.
If you are wanting to show the form to the user as a confirmation, but without the possibility of another post, then remove the form element and the button. Display all other boxes as they are (with the values populated from the POST array).
And display another message telling them that it has been successful.
You are using PHP, you can achieve this easily with it. If you are unsure, then post a short version of your code in a separate question.

How to prevent browser's forward button on chrome from submitting a form?

I have a simple php form that submits (POSTS) data on pressing the SUBMIT button and a 'thank you' page is displayed and the data is stored in a database.
Usually on this thank you page if you press the BACK button on the browser and then the FORWARD button on the browser you are brought back to the same thank you page but the form is not submitted again.
In the last few days when I do the BACK and FORWARD on the browser the form resubmits the data and there's a duplicate entry in the database. This happens only in Chrome.
Have I made some errors in the settings in Chrome or is there some other problem somewhere?
The typical solution is known as POST–Redirect–GET. Essentially, your form posts to a page which inserts the data into the database or whatever other actions are necessary and then redirects to another page. That other page doesn't actually do anything but just displays a success message or something. This way, you have two entries in the history: the form and the success page. The form-posting page is never added to the history; pressing back or forward will skip the submission.
Generate a value and put that inside a hidden field. If the user submits the form store that value (must be unique). If one tries to submit the form again with the same generated value, then do not execute your insert or update.
You could set a cookie or session that says the form has already been submitted, and, if that is set don't resubmit the form, but that is basically a band-aid and may not even work...
What you should REALLY be doing is avoiding duplicates by checking the input values against existing values in the db, such as email or username. You should also set your email and username fields to UNIQUE in your database so you'll never get duplicate email addresses or usernames - solving your problem.
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST')) {
// 1. check if $_POST['email'] already exists in the database
// 2. if email doesn't exist, insert data
}
Th issue is, when you reached the success page and refreshed, the browser has to resubmit the cached data; because the page where it reached is dynamically generated. Now when you click on the okay, the data which was previously stored in the $_POST variable is resubmitted. To stop it, you would have use dynamic binding instead of static binding.
A simple solution to this issue is:
Make the action attribute of the form blank i.e <form action="">.
Call a javascript method onclick of the intended button.
Add the Action attribute in the JS method and submit the form.

How to resubmit PHP form with javascript

I am wondering if it is possible to to resubmit a form with a button click that calls up a javascript command.
So this is basically what I'm trying to do -
page 1: form; action = page2.php
page 2: generate a randomized list according to parameters set by page 1
I would like to place a button on page 2 so that on click, it would be as if the user has hit F5, and a new list would be generated with the same parameters.
I found a lot of help on Google with people trying NOT to get this to happen, but I'm not sure how to actually get it to happen.....
Thank you!
You could use location.reload(true); to refresh the page.
<button onclick="location.reload(true);">refresh</button>
you only need to use. location.reload() instead of location.reload(true). since this will not disable caching for the reload but using true as the parameter will.
here is the reference. How to refresh a page in jquery?
EDIT: why not just use hidden input field and preserve the values and fetch it anytime you want to?

How can i submit data to a php page without going to that page right away?

I need to take form data from user input- i.e. radio buttons and use that to apply search filters to a database search.
However there are specific parameters which are giving me difficulty.
Specifically: The search filter options pane is a static fixture on the main page of the site. The query to be modified by the search filters is a separate php page which is called by an ajax function to display search results in the middle of the page without page refresh.
Is it even possible to submit variable values to another php page without going to that page and processing the php immediately? Or will the variables not be stored like that?
The code is too long but I'll give basic pseudocode:
Form action="Query Page to receive user input.php"
Some radio buttons:
20
15
10
Submit button--> Submits the radio button value to QueryPage.php but does not redirect
User clicks a category link (i.e. fitness) that calls the ajax function which displays the output of QueryPage.php. At this point QueryPage.php should perform the search with the specific user input filters that were selected earlier.
Is this possible?
Let me see if I understand correctly:
You're basically saying that your radio buttons will modify the search results, based on the what user selected?
If that's the case, I can think of 2 options:
1- When you make the ajax request for the search, first, grab the user input and send it to the QueryPage.php file with the search query. Do you have access to that function?
2- Post the user input using ajax (are you using jQuery or some other library for this?) to a UserInput.php file, where you'll store that data on the session, and then from QueryPage.php you just access the session and grab the values sent previously.
Does that answer your question? Sorry if it doens't, it's a bit hard to understand the problem.
You can use JQUERY and its events method. For example change,click,hover. In your case you want to use radio buttons, so you might wanna use the click event for that.
$("#radio").click(function () {
// SEND HTTP REQUEST
});
http://www.mkyong.com/jquery/how-to-select-a-radio-button-with-jquery/
Yes. You could just use .ajax(), or .post() or cURL. This will post your data to the specified page without redirecting.
Example using .post()
$.post("test.php", { name: "John", time: "2pm", fieldname: "your value" } );

Update a value of a JavaScript variable from another page

Is it possible to update the value of a variable from another page using JavaScript?
or
Is it possible to do this using form on submit, just update the other page, but remain on the page on which the form is located?
I think what you are searching for is AJAX (Asynchronous JavaScript and XML) which performs a get or post action and waiting for the result of the server. This makes it possible to submit a form without jumping to the page.
Have a look at this
Or if you use JQuery this
You can simply send all the data to be updated via Ajax and simply get the response on the current page You are in.

Categories