Submit form and close window - javascript

I can't understand why this isn't working.
I have a form opened in new tab, which I want to close when submitting:
<form name="form" id="form" method="post" enctype="multipart/form-data" >
//form inputs
<button accesskey="C" class="boton" onclick="form.submit(); alert('waiting...'); window.close()"> <u>A</u>djuntar</button>
</form>
when I remove window.close() the form is submitted, but when it's in my code, it shows the alert but not submitting.
Is there anything wrong?

you don't have to open the form in a new window (or tab).
you can either submit the data in ajax or use an inner hidden iframe as the target property of the form element. this way the form will open in a hidden inner element. e.g.:
<form id="eFrm" target="ifrm1">
</form>
<iframe id="ifrm1" name="ifrm1" style="display:none"></iframe>

The form won't be submitted until the event handler function has finished running.
alert blocks all execution of everything until the dialog is dismissed.
close closes a the window, so there is nowhere to load the form submission into, which cancels the request.
If you are going to close a window, don't expect it to be able to send an HTTP request at the same time.

You probably already found a solution, but I am posting this anyway for anybody who comes across the same in the future.
I am using Java servlets, but I think that is the same with every form submission => ability to choose which page must be displayed after the posted data was processed.
Once I have submitted the form, the doPost method in the servlet allows me to say which URL I want the browser to display after the data has been processed.
So, you can do probably do something along these lines:
request.getRequestDispatcher ( "/ClosePopup.html" ).forward ( request, response );
Then also create a file called ClosePopup.html, with nothing but a close () instruction
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body onLoad = "window.close();">
</body>
</html>
This way it won't be the button you click to trigger the closure of the popup, but you will be loading a self destroying page after the form is submitted. The final result is identical.

Related

How to stop Redirecting a page when a form is submitted?

I'm using a form and when the form is submitted I used action attribute and called a server url where the form data gets saved
Here's how it looks :
<form name="example" action="webresources/data/update" method="post">
</form>
The above form when submitted updates the form data in to the server but at the same time it also takes me to the new page webresources/data/update which has nothing but server response
I don't want this response to be shown on the web page. The url should be called when the form is submitted and it should be on the same page without redirecting to a new page.
Is there any way to do this, I'm allowed to send the data only via form parameters.
Thank you in advance :)
Remove the action attribute in the form and put the button outside the form.
When onclick, make an ajax call.
<form>
stuff
</form>
<input type="button" onclick="ajax()">
<script>
function ajax(){}
</script>
<form name="example" action="webresources/data/update" method="post" onclick="return false">
</form>
Returning false will stop the page from reloading or refreshing.
I suggest that before you ask a question you do a quick google search because this was the first result that came up for me prevent form submit from redirecting/refreshing using javascript.

Hide Confirm Form Resubmission PHP

After I submit a form, and I click the back button, the page displays the confirm form resubmission page. Instead of that, I actually just want the browser to display the form itself. It there a way to do that? Here is a part of my code below, and it works except that it will not stop refreshing. I just want it to refresh once when you click the back button.
<meta http-equiv="refresh" content="0">
<form method = 'post' action = 'submitPost.php?section=$section'>
<textarea rows='10' cols='100' name = 'post'></textarea> </br>
<input type = 'submit' value = 'Submit'>
</form>
This is a browser security policy - when you want to go back to a page you loaded using the POST http verb it will always ask you for confirmation.

Passing variables in URL

I have an address book widget that shows if there are contents.
If there are no contents, an add button will show up. Upon pressing the add button, it will redirect to another page which will show the form.
The initial design of my website is as follows:
When the user click the add button, it will direct to a page using javascript function:
document.location.href="address?addOnly=true";
The form will display.
If successful, there are $.post that will change the div only that will enable user to do CRUD in the address book.
The problem with the variable inside the url which is address?addOnly=true is that when the user refresh it, it will always shows the add form.
That's why i've decided to hide the implementation using $.post
$.post('address', {"listEmty":true}, function (data) {
window.location = "address";
});
The problem with this is that it can't pass the variable at all.
My questions are:
How to handle the page refresh if using the get method, which passes the paramater in the URL,
Are there anyways in javascript/jquery to pass the variable using post method then refresh the page?
Thank you.
<FORM method="post" action="address" id="refresh" style="display: none;">
<DIV>
<INPUT type="hidden" name="addOnly" value="true">
</DIV>
</FORM>
<SCRIPT type="text/javascript">
document.getElementById('refresh').submit();
</SCRIPT>
What this does is create an invisible form, then immediately submits it. You can of course call the submit from within your other javascript code.

observe form submit response targetting an iframe

I have an app which runs in a new window. There are several forms to generate a PDF export. When I submit one of these forms, the window loses its focus and the original window pops up again when the download appears.
I created an iframe, so the forms can target the iframe and the current window doesn't lose its focus. It works great, but I have no idea how to observe the response inside the iframe if everything went right.
Here is how its working so far. I'm using prototypeJS.
<iframe id="pdf_frame" name="pdf_frame" style="display:none;"></iframe>
<form id="PDF_gen" name="PDF_gen" target="pdf_frame" action="pdf.pl">
<input type="hidden" name="size" value="">
<!-- more hidden inputs -->
</form>
<input type="button" id="pdf_submit" value="generate pdf">
JS:
$('pdf_submit').observe('click', function(){
//write stuff to hidden inputs
$('PDF_gen').submit();
});
If something goes wrong, the download dialogue does not appear. When using prototypes form.request() the browser does not know how to handle the response and does not bring up the download dialogue. How can I do it right?
Thanks in advance!
When something goes wrong in the iframe you can try to fire an event from the iframe to its parent window (assuming we're on the same domain; it won't work cross-domain):
parent.document.fire('something:went_wrong')
and have the parent document listen for that event:
document.observe('something:went_wrong', function() {...});

Thank you alert upon form submission

I have a very basic form at http://www.happyholidaylites.com/contact.html and it is working great. When you submit the form, the user is brought to the index.html with no message that the form has been sent. I am looking to initiate an alert that says, "your form has been submitted" with an x button. My code looks like this:
<form method="post" id="myForm" action="dynaform.php">
<input type='hidden' name='rec_mailto' value='JBIRD1111#gmail.com'>
<input type='hidden' name='rec_subject' value='New Contact Form'>
<input type='hidden' name='rec_thanks' value='index.html'>
so on and so forth.....
The last line is what is telling the form what to do after the submit button is pressed, but I dont want it to point the browser to the index, rather I want a javascript popup with a success message. Any ideas?
Why not a simple onSubmit?
<form method="post" id="myForm" action="dynaform.php" onSubmit="alert('Thank you for your feedback.');" >
To be honest you are better re-directing to another page in order to avoid the user re-submitting the page on a refresh. Have a look at Post/Redirect/Get Pattern.
Popups can be extremely annoying on websites. You should create a page called "thank-you.html" that you can re-direct the user to on successful submission which has access to the site navigation options or even just do a re-direct back to the form page after a few seconds.
Instead of redirecting to index.html, redirect to thanks.html; your users will thank you because everybody hates popups!
Sounds like your PHP script handles the form submission by processing the input and redirecting the browser to the value in the rec_thanks field.
You can add something like onsubmit="YourJavaScriptFunction()" to the form tag to add client-side behavior prior to actually submitting the form. Within that function you can perform validation, use alert('Thank You!'), etc..

Categories

Resources