0

I use this jquery script to invoke a modal pop up which basically is a contact form.

What happengs in the code is that the following div is hidden before one of the images is clicked:

    <div id="toPopup"> 

        <div class="close"></div>
        <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
        <div id="popup_content"> <!--popup content starts-->


<form action="mail.php" method="POST">
<input id="firstinput" type="text" name="name" placeholder="Navn"><br/>
<input type="text" name="email" placeholder="Email"><br/>
<input type="text" name="phone" placeholder="Telefon nr">

<br />

<textarea name="message" rows="6" cols="25" placeholder="Besked"></textarea><br />
<input type="submit" value="Send">
</form>
        </div>
    </div>

After the form is filled in and sent, the php script just echos a thak you message. What I want to do is after the form is submitted a thank you message to appear in the same pop up. I wonder what solution would make most sense.

Any help or guidance is much appreciated.

Domas
  • 1,033
  • 4
  • 16
  • 43

2 Answers2

1

If you want it as a kind of "in-place" approach, use AJAX to submit the form and insert the thank you message using JavaScript.

See: jQuery AJAX submit form for enormous details on submitting a form using AJAX/jQuery.

Another solution without using Javascript to submit would be to simply send the form with PHP like it is. You could reference the same file in your form and after checking for success insert your "Thank you" message in the popups code. In that case also insert a class on the popups outer element to force it to show without activating it.

Community
  • 1
  • 1
markusthoemmes
  • 2,915
  • 12
  • 22
  • Sorry for the cryptic answer. Lets say the form is in index.php. You would let the form action go to index.php, let the forms logic happen there and then simply echo out your "Thank you". In this case you would also need to automatically open the popup (without any user interaction) so the user has the feeling, that he is still on the very same page. Therefore you have to manipulate you javascript (for example by a class as i suggested) to just open the popup if the form has already been sent. Sankalp' URL parameter solution is quite similar and maybe easier to understand. – markusthoemmes Feb 04 '14 at 12:33
1

There can be two solutions for this.

1. Use AJAX to submit the form

You may submit the form using ajax. Now when you get the response you can change the HTML inside the Popup showing thank you message.

2. Submit the Form and add a parameter in the URL

Submit the form as you are doing now. If the form submission is successfull, add a variable in session or URL. Now check if that variable is set and open the popup with message.

I would say 1st approach is the best.

Sankalp Mishra
  • 5,602
  • 4
  • 27
  • 58
  • Thanks for your quick response, but regarding the second solution I am not quite sure about how and where to check if that new variable is set and how to open the new popup message. Any guidance would be much appreciated – Domas Feb 04 '14 at 11:24
  • @Domas When you validate the form, do you redirect to somewhere? If yes, just add a query string. eg `landingpage.php?msg=Thankyou`. On landingpage.php check for `$_GET['msg']` – Sankalp Mishra Feb 04 '14 at 11:28