Solved

submit form to server side php script which reports results to alert popup box

Posted on 2013-12-01
9
2,242 Views
Last Modified: 2013-12-03
I am successfully submitting a form to a server side php script which now displays the success or failure to a new page. I would like the php script to report the success or failure to a dialogue popup box over the form.

How can I do this? TIA
0
Comment
Question by:thenelson
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 
LVL 12

Expert Comment

by:Cyber-spy
ID: 39688698
Here's an existing answer:

[Link Deleted]
0
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 39688733
Can you please post an example of a web page that does this?  I understand the part about making an AJAX request, but I want to see what you mean by "a dialogue popup box over the form."  Thanks, ~Ray
0
 
LVL 39

Author Comment

by:thenelson
ID: 39689013
"a dialogue popup box over the form."
a javascript alert box
0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
ID: 39689375
The easiest way to do this is with jQuery and jQueryUI. Link to both libraries and the CSS file in the head of you document, and then on the AJAX success, create a DIV, drop in the response your want and call the dialog() function.

Add this to the HEAD of you page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" type="text/css" media="screen" charset="utf-8"/>

Open in new window

Your AJAX call would look something like this:

$.ajax({
   url: 'yourScript.php'
})
.done(function(response) {
   $('<div>').html(response).dialog({modal: true});
});

Open in new window

0
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
ID: 39689387
If you just want an alert box then don't call dialog() - just use the alert() function (assuming response is a simple string)

.done(function(response) {
   alert(response);
});

Open in new window

0
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
ID: 39689403
Just re-read your question. I'd assumed you were already making an AJAX call but maybe you're not.

Here's a little more detail. Assume your form has an ID of myForm. We can POST the form to your server-side script asynchronously (in the background). Your server-side script would then respond with some information, that you put into a dialog box for the user to see. The whole jQuery code for the head of your page would look like this:

<script type="text/javascript">
$(document).ready(function() {
   $('#myForm').submit(function(e) {
      e.preventDefault();
      $.ajax({
         url: $(this).attr('action'),
         type: 'post',
         data: $(this).serialize()
      }) 
      .done(function(response) {
         $('<div>').html(response).dialog({modal: true});
      });
   });
});
</script>

Open in new window

0
 
LVL 34

Accepted Solution

by:
Slick812 earned 250 total points
ID: 39693860
greetings  thenelson, , You may be new to trying to code a web page with an AJAX send-receive to a PHP server page, Although the JQuery does seem to make the javascript part of ajax a bit more simple, you will still need to know enough about how AJAX is several functional methods, not just one method, as you have to do browser JS code AND server PHP code!. I have done this AJAX form submit thing many times, and have CSS to have an "Over the Form" popup DIV, here is both the browser DHTML CSS JS code and the PHP code. You will not be able to use the same HTML return from the PHP server that you used for the - "submitting a form to a server side php script which now displays the success or failure to a new page", , because ib AJAX you do NOT return an entire HTML page, but return from AJAX  just enough info text (html) to fill a DIV on the page.
First here is the full page code for the HTML -
<!doctype html>
<html><head><title>jQuery Form Test AJAX</title>
<style>
body{background:#e3f7ff;}

#formAjax{
position:relative;
width:25em;
background:#fbdba0;
margin:12px auto;
border:3px solid #5ad;
padding:9px;
}

#popup{
position:absolute;
top:4px;
left:2px;
display:none;
width:24.5em;
height:3.5em;
background:#ffbaaa;
border:5px solid #d00;
padding:6px;
}

.xBut{
position:relative;
top:-5px;
right:-5px;
width:1em;
height:1em;
font-weight:bold;
float:right;
line-height:98%;
cursor:pointer;
font-family:arial,sans-serif;
background:red;
color:white;
text-align:center;
border:1px solid white;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body><h3 style="text-align:center;">Test AJAX Form Submit</h3>
<hr>
<form name="formAj" id="formAjax" action="formnon.php" method="post">
Name: <input type="text" name="uname" size="16" value="" /> must be more than 4 characters<br />
Age: <input type="text" name="age" size="5" maxlength="3" value="" /> Years: must be older than 17 years<br />
<input type="submit" value=" Submit Me ">
<div id="popup"><div class="xBut" onclick="$('#popup').hide();">X</div><span id="ajaxRe">NONE YET</span></div>
</form>

<script>
$( document ).ajaxError(function( event, request, settings, exc ) {
alert("ERROR from Ajax POST Server-Status: "+request.status+", post-URL: "+settings.url+", error because: "+exc);
});

$('#formAjax').submit(function(e) {
  e.preventDefault();
  var postRe = $.post( "formjqy.php", $(this).serialize());
  postRe.done(function( data ) {
  $('#ajaxRe').html(data);
  $('#popup').show();
  });
});
</script>
</body></html>

Open in new window

Inside the <form> I have a <div> with the id of "popup" with is hidden (display:none), if the AJAX is successful in submit the form inputs and gets a PHP response as JS data, then The popup us shown with  $('#popup').show();  
The popup is positioned over the Form, no matter where you place the Form on page. Click the red X button on popup, to hide the popup.  Please notice that I have all of the functional javascript at the very end of the page, I can move it to other page locations like in the <head> with  $(document).ready(function() {   but For me this the least javascript.

Next is the server PHP code -
<?php
$uname = $_POST['uname'];
$age = (int) $_POST['age'];

if ((strlen($uname) > 4) && ($age > 17))
  $ajaxReturn = '<b style="font-size:150%px;">SUCCESS! Your Submition is On Tract!</b><br />'.$uname;
  else
  $ajaxReturn = '<b style="font-size:150%px;">FAILURE! Your Submition was Junk!</b><br />'.$uname;

echo $ajaxReturn;
?>

Open in new window

which is as simple a code test for success as I might use.

If you need more info about Ajax , please ask questions
0
 
LVL 39

Author Closing Comment

by:thenelson
ID: 39694276
Slick812, Chris,

You are right that I am not familiar with Ajax. I am taking a bit of time to read up on it to better understand its use before jumping into the coding.

I have a four section form (actually 4 forms on a single page which I plan to split to four separate pages later when I get the time). Instead of having a popup stating the form was submitted, I am now thinking of having the submit button change to a "Section X successfully submitted, Go on to section X+1" button. And keep track of the submissions with cookies so the user can come back and complete the form later if he wishes.

So I got a bit of studying and coding to do and will post another question if I need more help.

Thanks!!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Find out what you should include to make the best professional email signature for your organization.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question