How to make pop up when submit (not refresh page if possible) ?

Question

0.00/5 (No votes)

See more:

Hi, I tried to make a submit form with ketchup.js and the form work.. and now I don't now how to make a pop up appear when the submit value error...

this is my submit.php form :
<html>
<head>

XML

<script src="../js/jquery.ketchup.messages.js"></script>
    <script src="../js/jquery.ketchup.validations.basic.js"></script>

<body>
<form action="../include/example.php" class="add_user" method="post" enctype="multipart/form-data">
<table>
		<tr>
		<td><label for="username">username</label></td>
        <td><input type="text" id="username" class="validate(required)" /></td>
		</tr>
		
		<tr>
		<td><label for="email1">Email</label></td>
        <td><input type="text" id="email1" class="validate(required)" /></td>
		</tr>
		
		<tr>
		<td><label for="email2">Confirm Email</label></td>
        <td><input type="text" id="email2" class="validate(required, match(#email1))"/></td>
		</tr>
</table>

<div class="submit">
          <input type="submit" value="Submit" />
</form>
</body>

I want to get the $_POST['email2'] as a trigger to the pop up error but I cannot figure out how..I tried with Jquery dialog but doesn't work.

And I tried to make this simple code to see if my method to get the $_POST['email2'] value is right but the page don't show anything and no error..this is my code when the submit button press

C#

<?php

    if(isset($_POST['email2'])) {

    echo "Email Address Not Valid";
    }

?>

Can anyone help me show where I was wrong please...

Thanks to Sergey Alexandrovich Kryukov Now i can make the pop up .dialog() appear when I press submit button
I add html like this

XML

<script>
 $(document).ready(function() {
          $('.submit').click(function () {
		  $('.pop_up').dialog({
			resizable: false,
			draggable: false,
			height:110,
			width:300,
			position: "right bottom",
			});
      });
	  });
</script>

<div class="pop_up" title="Email Not Valid">
<p>Type Your Email Again</p>
<img src="../images/peringatan.png" style="float: left; position: relative; top:-17px; left:-5px;" />
</div>

But the text inside div appear in mail page to..How can I make this text only appear in .dialog() pop up?

If I tried to use css display-property {display:none}, the text won't show up both in main or pop up...

Posted 28-May-13 6:52am

Taftazani

Updated 29-May-13 8:27am

v5

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-05-28T07:45:00

Solution 1

You can also do it, because you process HTTP request and try to act in response (validate e-mail, try to send it, or whatever else), before you generate your HTML content in HTTP response. Your code behind should conditionally (depending on results of validation, error status and the like) include some JavaScript which would unconditionally generate the popup.

The simplest way to popup is window.open():
http://www.w3schools.com/jsref/met_win_open.asp[^].

It's also important to keep the reference to the newly created window returned by this function, because you can use it to close it on some condition, or to do something else.

However, this is not the best way. In particular: many users will block popups in the browser. For advanced functionality, you can, for example, use jQuery modal popup:
http://jqueryui.com/dialog/[^],
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial[^].

You will be able to find some more: http://bit.ly/xWY2tf[^].

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com/[^],
http://learn.jquery.com/[^],
http://learn.jquery.com/using-jquery-core/[^],
http://learn.jquery.com/about-jquery/how-jquery-works/[^] (start from here).

—SA

Posted 28-May-13 7:45am

Sergey Alexandrovich Kryukov

Comments

Taftazani 28-May-13 14:58pm

Thank you for the material...

Sergey Alexandrovich Kryukov 28-May-13 15:46pm

You are very welcome.
Good luck, call again.
—SA

Taftazani 29-May-13 0:35am

I tried to understand material you give but I still can not make it works...
I add this code in the html header :
<script>
$(document).ready(function() {
$(".pop_up").dialog();
});
</script>

And this code when submit button is press :
if(isset($_POST['email2'])) {

echo '<div class="pop_up" title="Basic dialog">';
echo '</div>';
}

The page refresh but no pop up...

How can I make the pop up appear when the submit button press without page refresh??
Please help me...

Sergey Alexandrovich Kryukov 29-May-13 0:41am

Could you do the following: load the page which supposed to show popup (returned in a HTTP response under right conditions of the post), and look at it from the browser ("view page source" or something like that). Copy this page as a regular HTML file. If everything is done correctly, it should popup. If not, try to find out what's wrong. (Or simplify it down as much as possible and show it in your question (perhaps, use "Improve question" and add this HTML code.) In other words, for diagnostic of the problem, separate ASP.NET and HTML. When you see what's wrong with pure HTML/JavaScript, you will synthesize them back together.
—SA

Taftazani 29-May-13 14:24pm

Thanks now I can make the pop up appear but please look at the code I update above...

The text inside div appear in mail page to..
How can I make this text only appear in .dialog() pop up?

If I tried to use css display-property {display:none}, the text won't show up both in main or pop up...

Sergey Alexandrovich Kryukov 29-May-13 14:31pm

As far as I can remember, it was something pretty obvious... Look, you are apparently making progress with this plug-in, by this moment of time you should know it better then I do. I'm sure you will find out pretty soon.
—SA