Solved

return php message to html page via ajax call

Posted on 2010-08-13
7
352 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Full Screen problem when auto scale IFRAME 2 64
Php pie charts 3 26
Load google maps api into wordpress 5 37
mcrypt_create_iv() is deprecated 4 70
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now