how to open popup on form submit in php using jquery or javascript

Question

I am trying to open a popup on submit button of a contact form below is the code

<form id="contact" name="contact" method="post" action="mail2.php" onsubmit="return valid();">
            <label>Name :</label>
                <input name="name" type="text" id="name" class="contact-input-box" />

            <label>Contact No. :</label>
                <input name="telephone" type="text" id="telephone" class="contact-input-box" />

            <label>Email :</label>
                <input name="email" type="text" id="email" class="contact-input-box" /><br class="clearBoth" />  

            <label>Gender :</label>
            <span>Mail</span> <input type="radio" name="gender" value="male">
            <span>Femail</span> <input type="radio" name="gender" value="female" /> <br class="clearBoth" />

            <label>product :</label>
            <select name="product" class="dropdown" id="product">
                      <option>Product</option>
                      <option value="cd">CD</option>
                      <option value="dvd">DVD</option>
            </select> <br class="clearBoth" />

            <label>Comment :</label>
                <textarea name="comment"  id="comment" class="contact-input-box1"></textarea><br class="clearBoth" />
                <p id="button1"></p>

            <label>&nbsp;</label>
                <input name="button" type="submit" id="button" title="Submit" value="Submit" onclick="myFunction()" /> 
        </form>

but I am unable to open the popup. form is working fine. currently it is went on thankyou.html page. I need to open the thank you message in popup box.

What kind of popup? A javascript `alert()`, or a new window/tab? — Richard de Wit, Apr 19 '13 at 12:21
I am tried to open a alert with myFunction(); i will remove it.. — MAR, Apr 19 '13 at 12:23
You don't want to redirect then you need to make an AJAX call and on success open a lightbox. See [link](http://stackoverflow.com/questions/13715081/jquery-ajax-login-form-submit-on-enter) — anpsmn, Apr 19 '13 at 12:32

Richard de Wit · Answer 1 · 2013-04-19T12:45:56.170

1

If you mean a javascript popup, use alert("message"); in your myFunction().

If you mean a new window/tab, put this in your form target="_blank" so it reads like this:

<form id="contact" name="contact" method="post" action="mail2.php" target="_blank" onsubmit="return valid();">

Also you're doing 2 separate things when submitting your form:

Your form has onsubmit="return valid();"
Your submitbutton has onclick="myFunction();"

You should put the validation and the contents of the myFunction() function in a submit-function like this:

$("#contact").on("submit", function()
{
    alert("Testmessage");

    // Validation
    // if validation fails:
        return false;

    // Then whatever you do in `myFunction();`
});

edited Apr 19 '13 at 12:45

answered Apr 19 '13 at 12:23

Richard de Wit

7,102
7
44
54

on click of submit button it is currently redirecting to the thankyou.html page & i want that page will not redirect to any other page just stay on current page & popup will open on click of submit button. – MAR Apr 19 '13 at 12:29
1

But when someone presses the `Enter` key inside a textfield, your submitbutton isn't clicked – Richard de Wit Apr 19 '13 at 12:30
instead you can handle your things in submit function. – Suresh Atta Apr 19 '13 at 12:38

score 1 · Answer 2 · answered Apr 19 '13 at 12:39

You can use jquery ui dialog. For that make a div in your html and put the content inside the div that you want to show in popup.

<div id="my-popup-div"> this content will be shown inside popup </div>

now use jquery dialog initiator.

$(document).ready(function(){    
        $("#my-popup-div").dialog({});
    })

now in your function

function myFunction()
{
   $("#my-popup-div").dialog("open");
}

for more customization follow ui tutorials jquery ui dialog

score 1 · Answer 3 · answered Apr 19 '13 at 13:00

1

Try the JqueryUi Dialog. This way you can show de thankyou.html in a customizable pop up.

It's a easy way to solve your problem.

answered Apr 19 '13 at 13:00

Leonardo Thizon

11
1

score 0 · Answer 4 · answered Apr 19 '13 at 12:26

try

  $('#button').submit(function() {
      alert('Handler for .submit() called.'); //you can call myFunction()  here
      return false  //will stop the form submission.

    });

If you don't want to stop the form submission there will be no need to show any alerts,because the page already submitted.

Or you can try setTimeout for sometime to show popup of thankyou and then submit the form

score 0 · Answer 5 · answered Apr 19 '13 at 12:58

If you want a popup to ask the user whether to submit the form or not then you can hook into form onsumbit event:

function beforeSubmit() {
    if (confirm("Are you sure, you want to submit form?")) {
        return true;
    } 
    return false;
}

EXAMPLE DEMO

how to open popup on form submit in php using jquery or javascript

5 Answers5