Submit HTML form to pop up window

Some times we may need to submit HTML form to a pop up window. Let’s take a look into the details. For example I have a HTML form.

<form action="thank-you.php" method="post" name="contactForm">Name : <input id="name" name="name" type="text" />
E-mail : <input id="email" name="email" type="text" />
<input type="submit" value="Submit" />
</form>

We may submit this form to a blank window by setting target="_blank", but when we need to submit the form to a pop up window then we should do some extra code. Let’s try.

Step one: Defining a JavaScript function

function openWindow(url, wname, width, height) {
window.open(url, wname, "height=" + height + ",width=" + width + "location = 0, status = 1, resizable = 0, scrollbars=1, toolbar = 0");
return true;
}

Above function opens a pop up window according to the supplied arguments. There is a tricky thing. 'name' is a keyword in JavaScript. We should not put the variable name as 'name'. IE reports error if we put name as a variable name.

Step two: Setting the form attributes

Now we set the form attributes like bellow

<form action="/thank-you.php" method="post" name="contactForm" target="popupWin">

Step three: Preparing thank you page

Now we are ready to prepare the thank-you.php page for processing the form data.

Some more things must follow for security and to protect spamming. We should apply both JavaScript and server side validation into the form, protect spamming and XSS.


Comments

14 responses to “Submit HTML form to pop up window”

  1. Rahat Bashir Avatar
    Rahat Bashir

    this is nice and useful functionality

  2. pro_roman Avatar

    nice technique, man.

  3. Nice and useful post 🙂
    Be careful about using “window.open” function. Bcoz popup blockers can disable opening a new window using it. And, most of the normal users (I mean except developers) use popup blocker and instruct it to block all popups without knowing what is he doing actually.
    Better u can use “_blank” as value of target attribute of your form to submit the form to a new window and it’s safe from blockers. Then, if u want to resize the window, u can do it in onLoad event of that new window.

  4. cwxwwwxwwxwx Avatar
    cwxwwwxwwxwx

    well, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch 😉

  5. really good.!!!

  6. Jeferson Avatar

    This tip was very usefull for me! Especially when you used “onsubmit=return ….” on the tag. This “return” fixed my problem on my form!
    Thanks!!!

  7. Hi,just discovered your Post when i google something and wonder what webhosting do you use for your blog,the speed is more faster than my wordpress, i really want to know it.will back to check it out,i appreciate it!

  8. haryono Avatar

    the goods idea, thanks for you solution

  9. Othman Kamza Avatar
    Othman Kamza

    I was not able to solve the same problem for more than two months. Now is over. Jazaka_llah kheyry Mr Alafart.

  10. itsmephp Avatar

    Thanks a lot for this great information

  11. nice info i like it. thank yoou

  12. Thanks a lot… that’s what exactly I am looking for…saved a day for me!!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.