how can I open a modal using javascript after form submission - javascript

After clicking the submit button , I have some php code that runs and uploads to a database,
is their a way to use javascript to open a modal at the end of the action.php ?

If i understand you to action async !
Browser : display modal windows
Server : action.php
And the modal is waiting the end of action.php to disappear. Looks like you need to manually submit your form with an ajax request to action.php and before sending the ajax request enable/show your modal(anyway library or way you want) and when you receive your response form the ajax request you disable the modal .
sounds good?

I was able to do it without anything fancy just good old if statements.....
i used $_SESSION['show'] as a flag , after the php does its work to upload to the db it sets the flag , when the page reloads after submit button is pressed it gets to an if statement surrounding the code that displays the modal , if flag is set , show the modal...
otherwise do normal behavior and keep it hidden....

Related

Disable page loading (browser spinning) after form submit

I have a PHP script (download.php) that receives Form Post data from the index.php page.
The processing takes a while to submit the form thus making the browser loading (the spinning wheel) for quite some long time.
Can I force the browser not to show the gray loading wheel until the form is submitted and the Post page (download.php) is done and ready to display?
For example like Youtube is doing now, they show a progress bar on top but the browser is not loading at all.
To achieve an effect similar to youtube you would need to use AJAX in conjunction with the history.pushState();.
Youtube has released a framework called spfjs for achieving the same effect that their own website has. Take a look at https://youtube.github.io/spfjs/.
If you click submit button and move to download.php, the web browzer will definitely show a loading tab. To avoid this, AJAX can be used.
Once the form data are submitted by means of AJAX, you can also receive back the download.php page contents ready to be displayed using the same AjAX response. Then hide the contents of index.php and place the received html instead. I hope it will work, for I am using this method.
Thank you.

Popup displaying on refresh

I have a form, with a code to show a popup when I press a create/edit link. Now when I do a page refresh, I get the following popup
I have managed to stop the popup from appearing when Retry is pressed, by handling it on the code behind of my aspx, but when Cancel is pressed, the page blinks (I guess it renders again?) and the popup is shown.
It doesn't go back to the server. It just goes to the javascript function that displays the popup, and shows it.
It should be noted at this point that this popup is just a <div> which can be shown or hidden.The default property of this <div> is hidden.
Please help me solve this issue and also explain why this is happening. I haven't been able to find anything on the internet explaining this issue.
When submitting a form, content may be sent with either POST or GET.
Sending with GET appends values to the address defining what webpage you are on. It could look like this:
www.domain.tld/page?value1=apple&value2=banana
Sending with POST sends the value in a hidden field that the server receives.
Clicking "Retry" will load the website with the information currently held within the POST field. Clicking cancel should display the address you are heading to without the POST content.
I hope this answers your question. If not, is there any way for you to show the piece of code that handles the POST data?
The browser saves the data in the form when you submit it, and when you refresh the page, the browser attempts to send this data again. The popup is a warning from the browser that this is about to happen, which is important since the form could be on a shopping site, so resending the data would result in accidentally buying the same things multiple times.
To fix this, you can redirect to another page once the form has been submitted, or you can add code to reset the form so the data won't be sent again.
We should follow a best practice to solve this problem. Better have a look at this. When you press the cancel button, it simply load the previous page and values will be persisted.
My understanding so far is that when you press the cancel button, the values for the page is taken from the browser's cache. I cleared the cache to test this theory. The cache isn't just storing the values of the page but also the last server response received. In my case, the last server response was to show the the popup by calling my javascript function, along with the required values, which is what it did.
Now my work around to it was to make the closing button as a server command as well, so that the final response would be to hide the popup.
Please do let me know if there is something wrong in this explanation.

Stop script execution after refresh

I wrote a single program using html and javascript which contains a submit button. The problem that I have is that when I refresh my page, it's like I pressed submit button again!! But what I want is to NOT execut the script if I refresh the page. I don't know if it's clear but it's like that I want the program to get intialized if i refresh my page instead of executing a previous script !
I believe you are referring to the browser behaviour that is when you submit a form to the same page, if you refresh it will prompt you to resubmit the data again.
You can avoid this by issuing a redirect at the end of your script, to refresh the page and clear the history of the submit.
if (isset($_POST['submit'])) {
// ... your code here
header('Location: ' . $_SERVER['PHP_SELF']);
}

I'm having problems resubmitting data from form in JavaScript

I have the following scenario:
The user fills an HTML form
The user presses the submit button
Something unexpectedly bad happens
The server retrieves an error page with a retry button. This page does not have the original form anymore. When the user clicks the retry button I want the last post data to be resubmitted
I don't even know if it's possible. I'm trying this on the retry button:
window.location.reload(true);
The result is:
On firefox it works perfectly. It reposts the data and shows the resulting HTML to the user.
On Google Chrome it does not repost the data, it kind of uses a GET on the same URL, I'll take a look at Fiddler to make sure
IE 9 reposts the data but shows a blank screen in return. If I reload it will show the proper page.
I'd like every of them to work as Firefox. I guess the problem is in the absense of the original form in this error page.
Is there anything I can do in JavaScript to make them all have the proper behavior?
You should include the post data in the retry form. Wrap the post data in a <form> and resubmit the form.
Form:
<form id="retryform" name="retryform" action="postfile.html" method="post">
<!-- post data -->
</form>
JS:
document.getElementById('retryform').submit();
// or
document.forms["retryform"].submit();
// or
document.retryform.submit();

How to redirect inside jquery tab using javascript?

I've just got this jquery form working, it's based inside a jquery tab, and on clicking the submit button, it submits to a mySQL database without leaving the page or anything. Now, though, I want it to redirect the user, without making them leave the tab, to a different page inside the same tab once they've submitted their details.
Does anyone know the Javascript code to do this?
Thanks!
If you're trying to load a new page into the DIV where your form was, simply call
$('#idOfDivWithForm').load('newpage.php');

Categories