Solved

return php message to html page via ajax call

Posted on 2010-08-13
7
349 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Router for PHP reqeusts 12 33
Select2 jquery help 9 46
AWS CLI issues with Tags 3 32
Angular - where do I need to put this code? 3 12
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 …
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…
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

746 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

16 Experts available now in Live!

Get 1:1 Help Now