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="ment"  id="ment" 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.

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="ment"  id="ment" 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.

• php
• javascript
• jquery
• popup

• 1 What kind of popup? A javascript alert(), or a new window/tab? – Richard de Wit Commented Apr 19, 2013 at 12:21
• 1 what does myFunction() do?post code – Cris Commented Apr 19, 2013 at 12:21
• I am tried to open a alert with myFunction(); i will remove it.. – MAR Commented Apr 19, 2013 at 12:23
• yes new window in jquery popup – MAR Commented Apr 19, 2013 at 12:24
• 1 I like the jquery or javascript in the title. – acme Commented Apr 19, 2013 at 12:25

5 Answers 5

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

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();`
});

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.

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

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