Form submission

ejohns85

Hello,

I am a complete beginner with PHP so please bear with me!

So, I want to create a form, such as a feedback form, in my html file, which sends some information, such as name and email address, to a php file. To do this, I create a form in my html file, for example:

<html>
<body>

<form action="welcome.php" method="post">
Name: <input type="text" name="fname" />
Email: <input type="text" name="email" />
<input type="submit" />
</form>

</body>
</html>

Then, in my php file I write:

<html>
<body>

Thank you <?php echo $_POST["fname"]; ?>!<br />
You're email address is <?php echo $_POST["email"]; ?>.

</body>
</html>

However, when the submit button is clicked, the php script just displays a white page with the thank you message (showing the name and email address). What I want is to display this thank you message on the same page that the form was on in the original html file, rather than go to an entirely new page.

One solution I have thought of is to copy the entire contents of my html file, and put it into the php file, together with my thank you message. Then, this would show everything as it is in the original html file. But I'm confused as to whether this would then be an html file or a php file now - and whether all the links would work as with the original html file.

I'm sure there's a simpler was to do this - any help please??

Thank you!

Ed.

traq

ejohns85;11002867 wrote:
However, when the submit button is clicked, the php script just displays a white page with the thank you message (showing the name and email address).

Correct: that's all you put into your script.

correction: "your email", not "you're email".

ejohns85;11002867 wrote:
What I want is to display this thank you message on the same page that the form was on in the original html file, rather than go to an entirely new page.

AJAX is what you're looking for. Oversimplification: When the user submits your form, javascript will send the request instead (preventing the normal form submission), and then display the output of your php script on the page.

if you're not familiar with javascript and AJAX, you might look at the jQuery library, which has simple-to-use ajax functions.

On the PHP side:

<?php
// set default values //

// these will print if the corresponding form field is left blank.
$name = 'Guest';
$email = 'You forgot to enter your email address';

// check for form submission //

//  did user provide a name?
if( !empty($_POST['fname'] ) ){
    // user gave a name, so overwrite $name with user's name
    $name = htmlentities( $_POST['fname'] );
    // htmlentities() is very important:
    //   otherwise, the user could submit code (e.g., javascript)
    //   and you would be running it on your page.  dangerous!
}
// did user provide an email address?
if( !empty( $_POST['email'] ) ){
    // yes - but is it a valid email address?
    if( filter_var( $_POST['email'],FILTER_VALIDATE_EMAIL ) ){
        // yes, it's a valid email address (format-wise:
        //   "valid" does not mean "exists and belongs to this person")
        // this may or may not be important -
        //   if you're not doing anything besides printing it back to the user,
        //   it doesn't really matter if it's valid email.
        $email = 'Your email address is '.htmlentities( $_POST['email'] );
    }else{
        // not a valid email address
        $email = 'The email address you entered does not appear to be valid. 
            Did you make a mistake typing it?';
    }
}

// print message //

// since this is intended for AJAX, we _do_not_ put <html><head><body>etc. tags.
//   if it's going to be added to the page, you might add other elements as needed.

$message = "Thank you, $name!<br>$email";

print $message;
exit;

chrisguk

Although I agree with traq regarding Ajax, I dont believe this is where you should start.

Ajax forms for submission come in various styles, I would say that using Ajax to process your forms would be something to think about for the distant future. Why yo may ask?

Well, first you need to understand the basics of form processing and the security implications before you move on to more complicated things. It will give you good grounding when you need to debug code that doesnt work.

Concentrate on a two form setup presently, there are thousands of tutorials listed under Google to get you started.

Contact.html - this doesnt necessarily have to have a .php extension because your processing will be done by another file for example process.php or thanks.php

Try to think about security at all times when designing your form, now this is where your contact.html may have to change to contact.php. You will need things like:

Check all fields have been completed
The user is a human - Captcha

Here is a very good tutorial to get you started, although it doesnt implement Captcha at this stage, but you can easily use the "Re-Captcha" function which is free to use and easy to implement, just for a start:

http://myphpform.com/php-form-tutorial.php

Good luck!

traq

another alternative to AJAX would be to serve and process the form on the same page:

<?php

// ALL programming logic goes first.  NO output until you're done.

// check if the form was submitted or not.
// This will determine what content goes in your $OUTPUT variable.
if( isset( $_POST['form'] ) ){
    // form was submitted. process it.
    $name = 'Guest'; 
    $email = 'You forgot to enter your email address'; 
    if( !empty( $_POST['name'] ) ){ $name = htmlentities( $_POST['name'] ); }
    if( !empty( $_POST['email'] ) ){
        $email = 'You say your email address is &lt;'. htmlentities( $_POST['email'] .'>.' );
    }
    $OUTPUT = "<p>Welcome, $name!<br>$email</p>";
}else{
    // form was not submitted.  write the form.
    $OUTPUT = '
    <form action="#" method="post">
        Name: <input name="name"><br>
        Email: <input type="email" name="email"><br>
        <input type="submit" name="form">
    </form>';
}

// all done. print the complete page.
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>A Simple Greeting Form</title>
</head>
<body>
    <h1>Greetings!</h1>
    <p>This is my Greeting page.  

        The content below will be different  

        depending on whether or not you've filled out my form!</p>
<?php
    print $OUTPUT;
?>
</body>
</html>

vivek151189

Yes, another alternative to AJAX would be to serve and process the form on the same page: