?
Solved

return php message to html page via ajax call

Posted on 2010-08-13
7
Medium Priority
?
362 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 2000 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
7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

 
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

What is a Denial of Service (DoS)?

A DoS is a malicious attempt to prevent the normal operation of a computer system. You may frequently see the terms 'DDoS' (Distributed Denial of Service) and 'DoS' used interchangeably, but there are some subtle differences.

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 …
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 count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

765 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