Solved

return php message to html page via ajax call

Posted on 2010-08-13
7
358 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
  • 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to count occurrences of each item in an array.

861 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