Используя модальную всплывающую контактную форму, можно ли показать подтверждение в том же всплывающем окне после отправки?

0

У меня есть очень простая страница контактов электронной почты php, которая активируется, когда пользователь отправляется из модального всплывающего окна. Вместо перенаправления на страницу "thank you.html" можно ли заполнить всплывающее окно сообщением "спасибо"?

Вот 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>

Вот "receive.php":

    <?php 
$email = $_POST['email']; 
if(isset($_POST['submit']))
{
$from_add = "$email"; 
$to_add = "[email protected]"; 
$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;   
?>

И если это помогает увидеть здесь используемый javascript "jquery.reveal.js" Обратите внимание, что я очень неопытен с js и php. Этот код был моей отправной точкой, и именно отсюда 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);
  • 0
    Попробуйте выполнить переход div в модальном режиме только нажатием первой кнопки, затем запросите подтверждение при нажатии следующей кнопки.
Теги:

3 ответа

2

Вы можете сделать это таким образом. После рассылки пользователь перенаправляет пользователя на текущую страницу (где вы всплывали)

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

Теперь в JQuery получим этот хеш и запустим всплывающее окно

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
          }    

      });

ИСПОЛЬЗОВАНИЕ 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>

в вашем месте удаления заголовка PHP

if(mail($to_add,$subject,$message,$headers)) 
 {
  echo 'success';
  exit();
 }
Поделиться
  • 0
    Это прекрасно работает. Один дополнительный вопрос ... У меня будет много страниц на моем сайте, и функция подписки будет доступна на каждой странице. Если потребуется, я буду использовать предоставленные вами инструкции, чтобы вернуть пользователя к индексу сайта после «отправки». Есть ли способ показать сообщение «Успех» на текущей странице пользователя без общего перенаправления?
  • 0
    Вы можете использовать AJAX, чтобы сделать работу. После успеха ajax скрыть текущее всплывающее окно и показать successModal popup.
Показать ещё 8 комментариев
1

Вот ресурс, который вы можете редактировать и использовать Исходный код для загрузки или посмотреть демо-версию здесь http://purpledesign.in/blog/pop-out-a-form-using-jquery-and-javascript/

Добавьте кнопку или ссылку на свою страницу, как это

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

"#inline" здесь должен быть "id" того, который будет содержать форму.

<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>

Включите этот скрипт, чтобы прослушать событие щелчка. Если у вас есть действие, определенное в форме, вы можете использовать метод preventDefault()

<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>

Вы можете добавить все, что хотите сделать в свой PHP файл.

Поделиться
0

Я уверен, что это просто добавить id в вашу форму, например:

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

пользовательская функция javascript не использует кнопку отправки кнопки пользователя, как обычно

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

onconfirm код запуска всплывающего окна

$("#yourformId").submit();
Поделиться
  • 0
    Я такой новичок с JS и PHP. Не могли бы вы помочь, показав мне, как использовать код?
  • 0
    Я дал большую часть кода. при открытии всплывающего окна показывайте div с кнопкой подтверждения и отклонения. отправить форму по моему коду на событие клика на кнопку подтверждения в всплывающем окне.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню