Solved

return php message to html page via ajax call

Posted on 2010-08-13
7
361 Views
Last Modified: 2012-05-10
Hello,

I would like to check the mailinglist.properties file for an existence of a string and if it exists, I would like to return a message from my php script to my html page.  How is this best performed?  I would just like to update a div on my html page with the php message text.  

<?php
function add_key_value($key,$value){
	$file = "mailinglist.properties";
	$fh = fopen($file, 'a') or die("can't open file");
	$stringData = "$key=$value\r\n";
	fwrite($fh, $stringData);
	fclose($fh);
}
$email = $_POST[email]; 
$fname = $_POST[fname]; 
$lname = $_POST[lname]; 

add_key_value($email,$email.",".$fname.",".$lname);
?>

Open in new window

<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Dialog - Modal form</title>
	<link type="text/css" href="jqueryui/css/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="jqueryui/ui/ui.core.js"></script>
	<script type="text/javascript" src="jqueryui/ui/ui.draggable.js"></script>
	<script type="text/javascript" src="jqueryui/ui/ui.resizable.js"></script>
	<script type="text/javascript" src="jqueryui/ui/ui.dialog.js"></script>
	<script type="text/javascript" src="jqueryui/ui/effects.core.js"></script>
	<script type="text/javascript" src="jqueryui/ui/effects.highlight.js"></script>
	<script type="text/javascript" src="jqueryui/ui/jquery.bgiframe.js"></script>
	<link type="text/css" href="jqueryui/css/demos.css" rel="stylesheet" />
	<style type="text/css">
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain {  width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
		.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
	</style>
	<script type="text/javascript">
	$(document).ready(function() {		
		var firstname = $("#firstname"),
			email = $("#email"),
			lastname = $("#lastname"),
			allFields = $([]).add(firstname).add(email).add(lastname),
			tips = $("#validateTips");
		function updateTips(t) {
			tips.text(t).effect("highlight",{},1500);
		}
		function checkLength(o,n,min,max) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass('ui-state-error');
				updateTips(n + " must not be empty.");
				return false;
			} else {
				return true;
			}
		}
		function checkRegexp(o,regexp,n) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass('ui-state-error');
				updateTips(n);
				return false;
			} else {
				return true;
			}
		}
		$("#dialog").dialog({
			bgiframe: true,
			autoOpen: false,
			height: 300,
			resizable: false,
			modal: true,
			buttons: {
				'Add': function() {
					var bValid = true;
					allFields.removeClass('ui-state-error');
					bValid = bValid && checkLength(firstname,"First Name",1,30);					
					bValid = bValid && checkLength(lastname,"Last Name",1,50);
					bValid = bValid && checkRegexp(firstname,/^([0-9a-zA-Z])+$/,"First Name may consist of a-z 0-9");
					bValid = bValid && checkRegexp(lastname,/^([0-9a-zA-Z])+$/,"Last Name may consist of a-z 0-9");
					bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"Invalid Email (eg. musicopus1@gmail.com)");
					if (bValid) {
						$('#users tbody').append('<tr>' +
							'<td>' + firstname.val() + '</td>' + 
							'<td>' + email.val() + '</td>' + 
							'<td>' + lastname.val() + '</td>' +
							'</tr>'); 
							alert(email.val());
							alert( firstname.val());
							alert(lastname.val());
							
						$.post("joinmailing.php", { email: email.val(), fname: firstname.val(), lname: lastname.val() } );
						$(this).dialog('close');	
					}
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				allFields.val('').removeClass('ui-state-error');
			}
		});
		$('#create-user').click(function() {
			$('#dialog').dialog('open');
			$("input:text:visible:first").focus();
		})
		.hover(
			function(){ 
				$(this).addClass("ui-state-hover"); 
			},
			function(){ 
				$(this).removeClass("ui-state-hover"); 
			}
		).mousedown(function(){
			$(this).addClass("ui-state-active"); 
		})
		.mouseup(function(){
				$(this).removeClass("ui-state-active");
		});
	});
	</script>
</head>
<body>
<div class="demo">
<div id="dialog" title="Join Opus1 Mailing List">
	<p id="validateTips">All form fields are required.</p>
	<form>
	<fieldset>
		<label for="firstname">First Name</label>
		<input type="text" name="firstname" id="firstname" class="text ui-widget-content ui-corner-all" />
		<label for="lastname">Last Name</label>
		<input type="lastname" name="lastname" id="lastname" value="" class="text ui-widget-content ui-corner-all" />
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />		
	</fieldset>
	</form>
</div>
<a id="create-user" class="ui-button ui-state-default ui-corner-all">Join Our Mailing List</a>
</div>
</body>
</html>

Open in new window


0
Comment
Question by:cgray1223
[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
  • 3
  • 2
  • 2
7 Comments
 

Author Comment

by:cgray1223
ID: 33434691
I'm posting to the php file in line 80 and it's a dialog window.  I would like to just update a div on outside the dialog window.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33434710
For example :

(check the last line of code)
<?php
function add_key_value($key,$value){
	$file = "mailinglist.properties";
	$fh = fopen($file, 'a') or die("can't open file");
	$stringData = "$key=$value\r\n";
	fwrite($fh, $stringData);
	fclose($fh);
}
$email = $_POST[email]; 
$fname = $_POST[fname]; 
$lname = $_POST[lname]; 

add_key_value($email,$email.",".$fname.",".$lname);
echo "hello";
?>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 33434713
and your post :


$.post("joinmailing.php", { email: email.val(), fname: firstname.val(), lname: lastname.val() }, function(data) {
                            $("#div2update").html(data);
                        });

Open in new window

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 82

Expert Comment

by:leakim971
ID: 33434715
somewhere in your page you've :


<div id="div2update"></div>

Open in new window

0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 33436513
Please indicate WHEN you want the check to be executed: Do you want it AFTER the page has fully loaded, as a response to the user action?, or do you want it to be executed BEFORE loading the page?
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 33436527
Sorry, my mistake, I didn't see your comment.
leakim971 gave you a complete solution.
0
 

Author Closing Comment

by:cgray1223
ID: 33438070
Thanks for the answer, worked perfectly!
0

Featured Post

Raise the IQ of Your IT Alerts

From IT major incidents to manufacturing line slowdowns, every business process generates insights that need to reach the people required to take action. You need a platform that integrates with your business tools to create fully enabled DevOps toolchains.

You need xMatters.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

695 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