Show submitted form response on the same page. (No Reload)

前端未结

关注

 4  2032

How would I go about showing the response from a submitted contact form (on the same page underneath the form) rather than sending the user to a new page after the submissio

相关标签:

4条回答

春和景丽

2020-12-14 13:44
You will need to use ajax for that. The simplest solution is to get jQuery javascript library an use it's .post function for which you can find documentation and examples here. In your case it will look something like this:
```
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#submit").click(function(){
    var name_value = $("#name").val();
    var email_value = $("#email").val();
    var message_value = $("#message").val();
    $.post("assets/email.php", { name: name_value, email: email_value, message: message_value }).done(function(data) {
        $("#response").html(data);
    });
  });
})
</script>
```
Also your PHP code is wrong:
```
$name =$_GET['name'];
$email =$_GET['name'];
$message =$_GET['name']
```
You are getting $_GET['name'] for all 3 variables.

edit: I added a complete example but it is not tested it's just so you can have an idea how to do what you want. Also since this is using HTTP POST request, you will need to edit your PHP so it gets values $_POST array, not $_GET. Also you will need to add a <div id="response"></div> where you want to display the response.
0 讨论(0)
发布评论:

提交评论
- 加载中...

渐次进展

2020-12-14 14:04

This is a working example using the suggested example from the JQuery site and pajaja's answer.

Solution:

Place this in the <head> of your webpage.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Download JQuery and include it the same way.

Form:

Your contact form remains un-changed.

<form id="contactForm" action="assets/email.php" Method="POST">
    <label for="name">Your Name</label>
    <input name="name" type="text" required placeholder="Please enter your name">

    <label for="email">Email Address</label>
    <input name="email" type="email" required placeholder="Please enter your email address here">

    <label for="message">Message</label>
    <textarea name="message" required></textarea>  

    <button type="submit">Send</button>
</form>

Returned Data:

Add your response element where you want in the body.

<div id="contactResponse"></div>

Javascript:

Now place (preferably just before </body>) the javascript code:

<script>
     $("#contactForm").submit(function(event) 
     {
         /* stop form from submitting normally */
         event.preventDefault();

         /* get some values from elements on the page: */
         var $form = $( this ),
             $submit = $form.find( 'button[type="submit"]' ),
             name_value = $form.find( 'input[name="name"]' ).val(),
             email_value = $form.find( 'input[name="email"]' ).val(),
             message_value = $form.find( 'textarea[name="message"]' ).val(),
             url = $form.attr('action');

         /* Send the data using post */
         var posting = $.post( url, { 
                           name: name_value, 
                           email: email_value, 
                           message: message_value 
                       });

         posting.done(function( data )
         {
             /* Put the results in a div */
             $( "#contactResponse" ).html(data);

             /* Change the button text. */
             $submit.text('Sent, Thank you');

             /* Disable the button. */
             $submit.attr("disabled", true);
         });
    });
</script>

Action Script:

Your contact (PHP) file remains the same but change $_GET to $_POST:

<?php

    $name    = $_POST['name'];
    $email   = $_POST['email'];
    $message = $_POST['message'];

    $to      = "xxx@xxx.xxx";
    $subject = "";
    $message = "";
    $headers = "From: $email";

    if( mail($to,$subject,$message,$headers) )
    {
        echo "<h2>Thank you for your comment</h2>";
    }
    else
    {
        echo "<h2>Sorry, there has been an error</h2>";
    }

?>

Result:

This should now send the data from the form on submit and then display the returned data in the #contactResponse element. The button will also set the text to "Sent, Thank you" while also disabling the button.

0 讨论(0)

春和景丽

2020-12-14 14:05

You can just keep it on the same page. For example, if your form is on contact.php, just echo your code like so:

<form action='' method='post'>
   <input type='test' name='name' placeholder='Your name here' required='required' /><br />
   <input type='submit' value='submit' name='contact' />
</form>
<?php
   if(isset($_POST['contact']) && !empty($_POST['name'])){
      echo "You submitted this form with value ".$_POST['name'].".";
   }
?>

Of course this will reload that page. If you don't want the page to be reloaded, you need to use ajax.

0 讨论(0)

天涯浪人

2020-12-14 14:09

I did this with the Jquery Form Plugin. There's another here.

My use case was a lot more involved. It included uploading a file along with some user entered fields and basic auth credentials in the header as well. The Form plugin handled them all using the normal $.ajax fields.

0 讨论(0)
发布评论:

提交评论
- 加载中...