stackoom
  简体   繁体   中英

Using a Modal popup contact form, Is it possible to show a confirmation in same popup, upon submit?

 原文  2013-10-25 18:55:16  8   3    javascript/ php/ jquery/ html

Question

I have a very basic php email contact page that is activated when the user submits from a modal popup window. Instead of redirecting to a "thank you.html" page, is it possible to populate the popup window with the 'thank you' message?

Here is the html: 

<!DOCTYPE html>

<head>
<title></title>
<!--Subscribe Popup Function, JQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<style>
.reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: #000;    background: rgba(0,0,0,.8); z-index: 100; display: none; top: 0; left: 0; padding: 0px; border: 0px; margin: 0px;}
.reveal-modal {visibility: hidden;top: 100px; width: 80%;background: #fff;position: absolute;z-index: 101;padding: 0px;border: 0px;margin: 0px 10%;}
</style>
</head>

<body>
<a href="#" data-reveal-id="myModal" data-animation="fade">Subscribe</a></div>
<!-- Subscribe Pop-Up Content -->
<div id="myModal" class="reveal-modal">
<form action="receiving.php" method="POST">
<input type="text" name="email" value="EMAIL" /><br>
<input type="submit" name="submit" value="Submit" />
</form>
</div>          
</body>

</html>

Here is "receiving.php": 

    <?php 
$email = $_POST['email']; 
if(isset($_POST['submit']))
{
$from_add = "$email"; 
$to_add = "myname@mysite.com"; 
$subject = "New Subscriber";
$message = "Email: $email";
$headers = "From: $from_add \r\n";
$headers .= "Reply-To: $from_add \r\n";
$headers .= "Return-Path: $from_add\r\n";
$headers .= "X-Mailer: PHP \r\n";

if(mail($to_add,$subject,$message,$headers)) 
{
    $msg = "Mail sent";
} 
}
header("location: http://www.mysite.com/thankyou.html"); exit;   
?>

And if it helps to see here is the javascript being used "jquery.reveal.js" Please note that I am very inexperienced with js and php. This code was my starting point and it is from here Reveal JQuery Modal : 

    (function($) {

$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$('#'+modalLocation).reveal($(this).data());
});

$.fn.reveal = function(options) {
var defaults = {  
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
}; 

//Extend dem' options
var options = $.extend({}, defaults, options); 
return this.each(function() {
var modal = $(this),
topMeasure  = parseInt(modal.css('top')),
topOffset = modal.height() + topMeasure,
locked = false,
modalBG = $('.reveal-modal-bg');

if(modalBG.length == 0) {
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
}           
//Entrance Animations
modal.bind('reveal:open', function () {
modalBG.unbind('click.modalEvent');
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"top": $(document).scrollTop()+topMeasure + 'px',
"opacity" : 1
}, options.animationspeed,unlockModal());                   
}
if(options.animation == "fade") {
modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"opacity" : 1
}, options.animationspeed,unlockModal());                   
} 
if(options.animation == "none") {
modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
modalBG.css({"display":"block"});   
unlockModal()               
}
}
modal.unbind('reveal:open');
});     

//Closing Animation
modal.bind('reveal:close', function () {
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"top":  $(document).scrollTop()-topOffset + 'px',
"opacity" : 0
}, options.animationspeed/2, function() {
modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
unlockModal();
});                 
}   
if(options.animation == "fade") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity" : 0
}, options.animationspeed, function() {
modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
unlockModal();
});                 
}   
if(options.animation == "none") {
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
modalBG.css({'display' : 'none'});  
}       
}
modal.unbind('reveal:close');
});         

//Open Modal Immediately
modal.trigger('reveal:open')

//Close Modal Listeners
var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
modal.trigger('reveal:close')    
});

if(options.closeonbackgroundclick) {
modalBG.css({"cursor":"pointer"})
modalBG.bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
}
$('body').keyup(function(e) {
if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
});

function unlockModal() { 
locked = false;
}
function lockModal() {
locked = true;
}   

});//each call
}//orbit plugin call
})(jQuery);

3 answers

solution1
 2  2013-10-25 19:28:43

You can do it this way . After mailing the user redirect the user to current page(where your pop up was) 

header("location: http://www.mysite.com/#mailsuccess"); //with hash at the last

Now in Jquery get this hash match it and fire the pop up

Jquery 

    $(document).ready(function(){
     var hash=window.location.hash;

      if(hash==="#mailsuccess")
          {
     $('#successModal').reveal({ /* options */ }); //You can use same modal or different modal to show success message
          }    

      });

USING SIMPLE AJAX 

<!DOCTYPE html>

<head>
<title></title>
<!--Subscribe Popup Function, JQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<style>
.reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: #000;    background: rgba(0,0,0,.8); z-index: 100; display: none; top: 0; left: 0; padding: 0px; border: 0px; margin: 0px;}
.reveal-modal {visibility: hidden;top: 100px; width: 80%;background: #fff;position: absolute;z-index: 101;padding: 0px;border: 0px;margin: 0px 10%;}
</style>

<script type="text/javascript">
$(document).ready(function(){
$(document).on('submit','#mailform',function(e){
       e.preventDefault(); //stop default form submit
       var email=$('#mailform input[name="email"]').val(); //get email from form

       $.ajax({
            type: "POST",
            url: "receiving.php",
            data: "email="+email, 
            cache: false,
            success: function(html){
            if($.trim(html)==='success')
                 { 
                   $('#myModal').trigger('reveal:close'); //close current modal
                   $('#successModal').reveal();  //open success modal
                  }
             }   
            });
    });
});
</script>
</head>

<body>
    <a href="#" data-reveal-id="myModal" data-animation="fade">Subscribe</a></div>
    <!-- Subscribe Pop-Up Content -->
    <div id="myModal" class="reveal-modal">
    <form action="receiving.php" method="POST" id="mailform"> //give a id to form
    <input type="text" name="email" value="EMAIL" /><br>
    <input type="submit" name="submit" value="Submit" />
    </form>
    </div> 

    <div id="successModal" class="reveal-modal">
        Mailed successfully    
    </div>

    </body>

</html>

in your PHP remove header location 

if(mail($to_add,$subject,$message,$headers)) 
 {
  echo 'success';
  exit();
 }

solution2
 1  2014-01-03 16:09:37

Here is a resource you can edit and use Download Source Code or see live demo here http://purpledesign.in/blog/pop-out-a-form-using-jquery-and-javascript/

Add a Button or link to your page like this 

<p><a href="#inline">click to open</a></p>

“#inline” here should be the “id” of the that will contain the form. 

<div id="inline">
 <h2>Send us a Message</h2>
 <form id="contact" name="contact" action="#" method="post">
 <label for="email">Your E-mail</label>
 <input type="email" id="email" name="email" class="txt">
 <br>
 <label for="msg">Enter a Message</label>
 <textarea id="msg" name="msg" class="txtarea"></textarea>
<button id="send">Send E-mail</button>
 </form>
</div>

Include these script to listen of the event of click. If you have an action defined in your form you can use “preventDefault()” method 

<script type="text/javascript">
 $(document).ready(function() {
$(".modalbox").fancybox();
$("#contact").submit(function() { return false; });
$("#send").on("click", function(){
var emailval = $("#email").val();
var msgval = $("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);
if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
 $("#email").removeClass("error");
 }

 if(msglen < 4) {
 $("#msg").addClass("error");
 }
 else if(msglen >= 4){
 $("#msg").removeClass("error");
 }

 if(mailvalid == true && msglen >= 4) {
 // if both validate we attempt to send the e-mail
 // first we hide the submit btn so the user doesnt click twice
 $("#send").replaceWith("<em>sending...</em>");
 //This will post it to the php page
 $.ajax({
 type: 'POST',
 url: 'sendmessage.php',
 data: $("#contact").serialize(),
 success: function(data) {
 if(data == "true") {
 $("#contact").fadeOut("fast", function(){
//Display a message on successful posting for 1 sec
 $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
 setTimeout("$.fancybox.close()", 1000);
 });
 }
 }
 });
 }
 });
 });
</script>

You can add anything you want to do in your PHP file.

solution3
 0  2013-10-25 19:13:50

Ya sure this is just add id to your form like: 

<form action="receiving.php" method="POST" id="yourformId">

user javascript function don't use submit button user normal button like 

<input type="button" name="submit" value="Submit" onclick="beforesubmit()" />
function beforesubmit()
{
    /**open popup**/ 
    return false;
}

onconfirm of popup execute code 

$("#yourformId").submit();

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question how to form submit show modal popup with validation submit form using jquery modal popup Bootstrap Form Submit upon modal confirmation Submit popup contact form without redirecting trigger jquery modal popup on form submit Submit form after confirming jquery modal popup How to show a contact form on popup in html how to show contact form 7 messages in popup? Simple contact form success popup on same page show the sucess popup after form submit form?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM