All geek questions in one place

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

How can I show the answer from the submitted contact form (on the same page under the form), and not send the user to a new page after submitting?

I saw some people create a div element and then put the received answer into it. Is this a recommended approach?

Here is what I still have:

PHP:

<?php $name =$_GET['name']; $email =$_GET['name']; $message =$_GET['name']; $to = " support@loaidesign.co.uk "; $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</2>"; } ?>

and here is the HTML :

 <div class="wrapperB"> <div class="content"> <form id="contactForm" action="assets/email.php" method="get"> <label for="name">Your Name</label> <input name="name" id="name" type="text" required placeholder="Please enter your name"> <label for="email">Email Address</label> <input name="email" id="email" type="email" required placeholder="Please enter your email address here"> <label for="message">Message</label> <textarea name="message" id="message" required></textarea> <button id="submit" type="submit">Send</button> </form> </div> </div> </div>
+6
source share
4 answers

This is a working example using the proposed example from jQuery and pajaja .

Decision:

Put this on the <head> web page.

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

OR

Download jQuery and enable it in the same way.

The form:

Your contact form remains unchanged.

 <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 answer element that you want in the body.

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

JavaScript:

Now place (preferably 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>

Script action:

Your contact (PHP) file remains the same, but changes $ _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:

Now you must submit the data from the form to submit, and then display the returned data in the #contactResponse element. The button will also set the text to "Sent, thanks" and also disable the button.

+9
source

For this you need to use ajax. The simplest solution is to get the jQuery javascript library and use the .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 the wrong PHP code:

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

You get $_GET['name'] for all three variables.

edit : I added a complete example, but he did not test it, so you can have an idea of ​​how to do what you want. Also, since this uses an HTTP POST request, you will need to edit your PHP so that it gets the values ​​of $_POST array, not $_GET . You also need to add <div id="response"></div> where you want to display the response.

+2
source

You can just save it on one page. For example, if your form is on contact.php , simply repeat your code as follows:

 <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 this page. If you do not want the page to reload, you need to use ajax.

+2
source

I did this with the jQuery Form Plugin . There is still here .

My use case was much more active. It included file upload along with some user-entered fields and basic credentials in the header. The Form plugin handled them all using regular $ .ajax fields.

0
source

Source: https://habr.com/ru/post/951483/

More articles:


All Articles