In Chapter 2 Html Form

brody182 · October 13, 2012

in chanpter 2, creating a html form. How do i make the error or result output display with jQuery? and not have the page reload each time

HartleySan · October 13, 2012

Both would require the use of Ajax.

I recommend checking out either Larry's Ajax book or an online resource.

This might be a good place to start:

http://api.jquery.com/jQuery.ajax/

Edward · October 13, 2012

If that is pg.37 you are on, you don't require ajax for that, you can use basic javascript to simply reference a HTML page element then update its value on forum submission. If there was an error showing you would have your javascript code return false so the forum was not submitted but only the error output was displayed.

<input type="text" name="result" id="result"> (In this example adding output to a text element)

In normal javascript we can do this by:

document.getElementById('result').value = errorMessage;

I haven't done this in jquery yet, but here is the page from W3Schools site with the stuff:

http://www.w3schools.com/jquery/jquery_dom_get.asp

Larry has a new Modern Javascript Develop and Design book on this stuff, the book is awesome, really its worth reading through.

brody182 · October 13, 2012

I am somewhat familiar with jquery and javascript...

I am trying to implement some thing like this..

================================================================

$(document).ready(function(e) {

$('#submit').click(function(e){

$("#content").load("submit-form.php"); // this will load the page but not the php error message

e.preventDefault();

});

</script>

=============================================================================

I am trying to keep all my code on one page.

I currently have my code is set up like this..

===========================================================

<form>

</form>

brody182 · October 13, 2012

this will display the alert box but no the error message only after i close the alert box...?

$("#submit").click(function(){

alert("Text: " + $("#errormessage").html());

});

somehow i need to parse the php code with javascriopt then display the result.. any ideas?

HartleySan · October 14, 2012

brody, despite what Edward said, you do need Ajax to get what you want.

At the moment, I imagine that when the HTML form is submitted, you are simply calling a PHP script, which is doing the necessary processing.

In order to get any error messages that are produced by the PHP script and output them on the JS side, you need to set up an onsubmit event for the form from JS, and from JS, use Ajax to asynchronously call a PHP script that will generate the error, use PHP error handling to get that error message and echo it back to the JS side, from which you can use the DOM (as Edward suggested) to actually display the message on the screen.

If you're new to Ajax, this is not a trivial task, but you can break it down as follows:

1) Set up an onsubmit JS event handler for the form you're interested in. Be sure to return false or prevent the default form submission through some other means.

2) Create an Ajax object and call the PHP form parsing script you're interested in.

3) From the PHP script, if/when an error occurs, use PHP error handling methods to collect the error information you want. (I believe Larry talks about error handling in the book.)

4) With the error message(s) you want, echo them back to the JS side.

5) Once you have confirmed a valid Ajax response from JS, use the DOM to echo the error message to the screen.

For all intents and purposes, this is a full-on Ajax solution and not a trivial task.

To make things easier, as I recommend before, I would use the ajax method in jQuery to simplify things.

Good luck.

Edward · October 14, 2012

I could do that just with basic JS, i don't understand why you need ajax to check for errors, you can make code the error checking on the client side, that's just a basic form. May be one of us is looking at the wrong page.

Edward · October 14, 2012

Here are the form scripts:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Simple HTML Form</title>
<style type="text/css" title="text/css" media="all">
label {
 font-weight: bold;
 color: #300ACC;
}
</style>
</head>
<body>
<!-- Script 2.1 - form.html -->
<form action="handle_form.php" method="post">
<fieldset><legend>Enter your information in the form below:</legend>

<p><label>Name: <input type="text" name="name" size="20" maxlength="40" /></label></p>

<p><label>Email Address: <input type="text" name="email" size="40" maxlength="60" /></label></p>

<p><label for="gender">Gender: </label><input type="radio" name="gender" value="M" /> Male <input type="radio" name="gender" value="F" /> Female</p>

<p><label>Age:
<select name="age">
 <option value="0-29">Under 30</option>
 <option value="30-60">Between 30 and 60</option>
 <option value="60+">Over 60</option>
</select></label></p>

<p><label>Comments: <textarea name="comments" rows="3" cols="40"></textarea></label></p>

</fieldset>

<p align="center"><input type="submit" name="submit" value="Submit My Information" /></p>
</form>
</body>
</html>

And here is the form for server side validation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Form Feedback</title>
</head>
<body>
<?php # Script 2.5 - handle_form.php #4
// Print the submitted information:
if ( !empty($_POST['name']) && !empty($_POST['comments']) && !empty($_POST['email']) ) {
echo "<p>Thank you, <b>{$_POST['name']}</b>, for the following comments:<br />
<tt>{$_POST['comments']}</tt></p>
<p>We will reply to you at <i>{$_POST['email']}</i>.</p>\n";
} else { // Missing form value.
echo '<p>Please go back and fill out the form again.</p>';
}
?>
</body>
</html>

Edward · October 14, 2012

brody, despite what Edward said, you do need Ajax to get what you want.

At the moment, I imagine that when the HTML form is submitted, you are simply calling a PHP script, which is doing the necessary processing.

In order to get any error messages that are produced by the PHP script and output them on the JS side, you need to set up an onsubmit event for the form from JS, and from JS, use Ajax to asynchronously call a PHP script that will generate the error, use PHP error handling to get that error message and echo it back to the JS side, from which you can use the DOM (as Edward suggested) to actually display the message on the screen.

If you're new to Ajax, this is not a trivial task, but you can break it down as follows:

1) Set up an onsubmit JS event handler for the form you're interested in. Be sure to return false or prevent the default form submission through some other means.

2) Create an Ajax object and call the PHP form parsing script you're interested in.

3) From the PHP script, if/when an error occurs, use PHP error handling methods to collect the error information you want. (I believe Larry talks about error handling in the book.)

4) With the error message(s) you want, echo them back to the JS side.

5) Once you have confirmed a valid Ajax response from JS, use the DOM to echo the error message to the screen.

For all intents and purposes, this is a full-on Ajax solution and not a trivial task.

To make things easier, as I recommend before, I would use the ajax method in jQuery to simplify things.

Good luck.

Hartely you asleep? Are we on the same scripts here? If you only do this with ajax explain why, if i am wrong i am wrong but i want to know a reason why? From what i can see here i could do this with basic js client side code?

HartleySan · October 14, 2012

Edward, perhaps I misunderstood brody's original question, but as far as I can tell, he doesn't want to write error-checking code, he wants to display any errors generated by PHP dynamically on the client side using JS.

If that is indeed the case, which perhaps it's not (and I misunderstood), then Ajax is definitely required to do it without reloading the page because we're talking about the errors generated on the PHP side.

I suppose we should just wait for brody to response, but that was my understanding.

Edward · October 15, 2012

Well basically Javascript client side could do that job you don't need Ajax for that. Ajax is making things too complicated for this situation.

Edward · October 15, 2012

Edited

HartleySan · October 15, 2012

Edward, I cannot understand your responses sometimes.

The question here is not so much whether Ajax is necessary or not, it's a question of what brody wants to do.

I agree that brody's original post is vague, and as such, both what you're saying and what I'm saying are two possible interpretations.

There's really no need to further comment on this post until brody clarifies what he wants.

In Chapter 2 Html Form

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites