Сообщение об успешном всплытии формы

У нас есть форма Salesforce, встроенная в очень простой всплывающий экран, мы хотим отобразить успешное сообщение после отправки. Сейчас он закрывает всплывающее окно и обновляет страницу. Пожалуйста, будьте терпеливы со мной, и любая помощь будет отличной.Сообщение об успешном всплытии формы

EDIT: Я не хочу просто использовать оповещение. Я хотел бы, чтобы сообщение об успешном завершении появилось в исходном всплывающем окне, в котором находится форма.

Это то, что у меня есть:

<?php 
$firstname_status = ''; 
$lastname_status = ''; 
$email_status = ''; 
$phone_status = ''; 

// If form submits then check form post values. 
// Based on proper field validation do curl post to specific location or display proper message 



echo $_POST['post_url']; 
if($_POST && isset($_POST['post_url']{0})) 
{ 
    if (
     isset($_POST['email']{0}) && 
     filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) && 
     isset($_POST['first_name']{0}) && 
     trim($_POST['first_name']) != '' && 
     isset($_POST['last_name']{0}) && 
     trim($_POST['last_name']) != '' && 
     (trim($_POST['phone']) == '' || (is_numeric($_POST['phone']) && in_array(strlen($_POST['phone']), array(9,10,12,14))) || preg_match('/^[0-9]{3}-[0-9]{3}-[0-9]{4}$/', $_POST['phone']) == true || preg_match('/^\([0-9]{3}\) [0-9]{3}-[0-9]{4}$/', $_POST['phone']) == true) 
     ) 
    { 
     // Remove all characters from phone field to make it an integer value 
     $_POST['phone'] = preg_replace('/[^0-9]/', '', $_POST['phone']); 

     // Call function post_to_url to post form values through curl 
     $return = post_to_url($_POST['post_url'], $_POST); 


    } 
    else 
    { 
     // Check if first name is not blank or set proper error message 
     if(!isset($_POST['first_name']{0}) || trim($_POST['first_name']) == '') 
     { 
      $_POST['first_name'] = ''; 
      $firstname_status = '<label id="first_name-error" class="error" for="first_name">Please enter your first name</label>'; 
     } 

     // Check if last name is not blank or set proper error message 
     if(!isset($_POST['last_name']{0}) || trim($_POST['last_name']) == '') 
     { 
      $_POST['last_name'] = ''; 
      $lastname_status = '<label id="last_name-error" class="error" for="last_name" style="display: inline;">Please enter your last name</label>'; 
     } 

     // Check if email is not blank and proper email format or set proper error message 
     if(!isset($_POST['email']{0}) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) 
     { 
      $email_status = '<label id="email-error" class="error" for="email" style="display: inline;">Please enter a valid email address</label>'; 
     } 

     // Check if phone is not blank then check phone numver format (integer/xxx-xxx-xxx/(xxx) xxx-xxxx) validation 
     if(isset($_POST['phone']{0}) && (!is_numeric($_POST['phone']) || !in_array(strlen($_POST['phone']), array(9,10,12,14))) && preg_match('/^[0-9]{3}-[0-9]{3}-[0-9]{4}$/', $_POST['phone']) == false && preg_match('/^\([0-9]{3}\) [0-9]{3}-[0-9]{4}$/', $_POST['phone']) == false) 
     { 
      $phone_status = '<label style="display: inline;" for="phone" class="error" id="phone-error">Please enter valid phone number</label>'; 
     } 


    } 

} 
?> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="../jquery.js"></script> 
<script src="../jquery.validate.js"></script> 

<script> 
// Custom method to check phone number format 
$.validator.addMethod('customphone', function (value, element) { 
    if(value != '') 
    { 
     return this.optional(element) || (/^[0-9]+$/.test(value) && value.length == 10)|| /^\d{3}-\d{3}-\d{4}$/.test(value) || /^\(\d{3}\) \d{3}-\d{4}$/.test(value); 
    } 
    else 
     return true; 
}, "Please enter a valid phone number"); 

$().ready(function() { 

    $("#pop_up").validate({ 
     rules: { 
      first_name: "required", 
      last_name: "required", 
      email: { 
       required: true, 
       email: true 
      }, 
      phone: { 
       customphone : 'customphone', 
       required: false 
      } 

     }, 
     messages: { 
      first_name: "Please enter your first name", 
      last_name: "Please enter your last name", 
      email: { 
       required: "Please enter your email address", 
       email: "Please enter a valid email address" 
      } 
     } 
    }); 

}); 
</script> 

<form action="" method="POST" id="pop_up"> 

    <input type=hidden name="oid" value="###############"> 
    <div class="field-wrap text-wrap label-above"><label for="first_name">First Name </label><?=$firstname_status;?><input id="first_name" maxlength="40" name="first_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['first_name']);?>" /></div> 

    <div class="field-wrap text-wrap label-above"><label for="last_name">Last Name </label><?=$lastname_status;?><input id="last_name" maxlength="80" name="last_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['last_name']);?>" /></div> 

    <div class="field-wrap text-wrap label-above"><label for="email">Email Address </label><?=$email_status;?><input id="email" maxlength="80" name="email" size="20" type="email" class="textbox" required="required" value="<?php echo stripslashes($_POST['email'])?>" /></div> 

    <div class="field-wrap text-wrap label-above"><label for="phone">Phone Number </label><?=$phone_status;?><input id="phone" maxlength="40" name="phone" size="20" type="text" class="textbox" value="<?php echo $_POST['phone']?>" /></div> 


    <div class="field-wrap submit-wrap label-above"><input type="submit" name="submit" value="See the Offer" class="form-button"></div> 
    <input type="hidden" value="###############" id="Campaign_ID" name="Campaign_ID"> 
    <input type="hidden" value="Pop-up" id="################" name="######################" /> <!-- this is email offer --> 
    <input type="hidden" value="<?=$_GET['lead_source']?>" id="lead_source" name="lead_source"> 
    <input type="hidden" value="https://www.salesforce.com/######" name="post_url" id="post_url"> 

</form>

POPUP

<script src="jquery-cookie.js"></script> 
    <script> 
    $(document).ready(function(){ 
    // check to see if the cookie exists 
    var cookieExists = Cookies.get('showPopup'); 

    // if the cookie does not exist, then step into here 
    if(!cookieExists) { 
     // set the cookie 
     Cookies.set('showPopup', 'true', { expires: 1 }); 

     // fade in the popup 
     $("#overlay").delay(6000).fadeIn(600); 
    } 

    // this is an extra action that can be called any time 
    $(".close").click(function(){ 
     $("#overlay").hide(); 
    }); 
    }); 

    </script> 



    <article id="overlay" style="display: none;"> 


       <section id="form"> 
        <h3 class="gold">We’re here to help</h3> 


        <?php echo do_shortcode("[salesforce]"); ?> 


        <i class="close fa fa-times-circle fa-2x" style="left: -10px; bottom: -10px;"></i> <a class="close" href="#close">close</a> 



       </section> 

      </article>

$(document).ready(function(){ 
 
    
 

 
     // fade in the popup 
 
     $("#overlay").delay(6000).fadeIn(600); 
 
    }) 
 

 
    // this is an extra action that can be called any time 
 
    $(".close").click(function(){ 
 
     $("#overlay").hide(); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="http://stacksnippets.net/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<article id="overlay" style="display: none;"> 
 

 

 
      <section id="form"> 
 
       <h3 class="gold">We’re here to help</h3> 
 

 

 
       <form action="" method="POST" id="pop_up"> 
 

 
    <input type=hidden name="oid" value="###############"> 
 
    <div class="field-wrap text-wrap label-above"><label for="first_name">First Name </label><?=$firstname_status;?><input id="first_name" maxlength="40" name="first_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['first_name']);?>" /></div> 
 

 
    <div class="field-wrap text-wrap label-above"><label for="last_name">Last Name </label><?=$lastname_status;?><input id="last_name" maxlength="80" name="last_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['last_name']);?>" /></div> 
 

 
    <div class="field-wrap text-wrap label-above"><label for="email">Email Address </label><?=$email_status;?><input id="email" maxlength="80" name="email" size="20" type="email" class="textbox" required="required" value="<?php echo stripslashes($_POST['email'])?>" /></div> 
 

 
    <div class="field-wrap text-wrap label-above"><label for="phone">Phone Number </label><?=$phone_status;?><input id="phone" maxlength="40" name="phone" size="20" type="text" class="textbox" value="<?php echo $_POST['phone']?>" /></div> 
 

 

 
    <div class="field-wrap submit-wrap label-above"><input type="submit" name="submit" value="See the Offer" class="form-button"></div> 
 
    <input type="hidden" value="###############" id="Campaign_ID" name="Campaign_ID"> 
 
    <input type="hidden" value="Pop-up" id="################" name="######################" /> <!-- this is email offer --> 
 
    <input type="hidden" value="<?=$_GET['lead_source']?>" id="lead_source" name="lead_source"> 
 
    <input type="hidden" value="https://www.salesforce.com/######" name="post_url" id="post_url"> 
 

 
</form> 
 

 

 
       <i class="close fa fa-times-circle fa-2x" style="left: -10px; bottom: -10px;"></i> <a class="close" href="#close">close</a> 
 

 

 

 
      </section> 
 

 
     </article>

источник

2017-01-30 Nicholas Gray

Возможно, вы захотите рассмотреть этот ответ http://stackoverflow.com/a/10033046/2413733 и добавить что-то вроде 'alert ('message success');' непосредственно перед вызовом ajax? – Sam0

Спасибо, это не похоже на это. Я просто потерялся прямо сейчас. –

в порядке, если вы перехватите обновление и покажете предупреждение, хотите ли вы подтвердить подтверждение перед продолжением обновления или просто приостановить и показать сообщение в окне перед обновлением? – Sam0

К сожалению jsfiddle, хотя в целом велика, как представляется, не нравится форма submissi так что это временно codepen demo. В принципе, это решение включает в себя вставку JQuery представить функцию перед валидатором для перехвата действия представления и применить сообщение об успешном до этого возобновить действие, используя следующий код:

JS:

// fade in the popup 
$("#overlay").fadeIn(1500); 

// this is an extra action that can be called any time 
$(".close").click(function() { 
    $("#overlay").hide(); 
}); 

$(window).load(function() { 

    var popup = $("form#pop_up"); 

    popup.submit(function(event) { 
     var $this = $(this); 
     if (!$this.hasClass('paused')) { // check if it isn't in a pause state 
      event.preventDefault(); // prevent the submission 
      $this.addClass('paused'); // use this class as a flag 
      $("#overlay").append('SUCCESS!'); // add the success message 
      setTimeout(function() { 
       $("#overlay").append(' ...'); 
       $(".form-button").trigger('click'); // mechanically trigger a second click 
      }, 2000); // define a delay 
     } 
    }) 

    popup.validate({ 
     rules: { 
      first_name: "required", 
      last_name: "required", 
      email: { 
       required: true, 
       email: true 
      }, 
      phone: { 
       customphone: 'customphone', 
       required: false 
      } 
     }, 
     messages: { 
      first_name: "Please enter your first name", 
      last_name: "Please enter your last name", 
      email: { 
       required: "Please enter your email address", 
       email: "Please enter a valid email address" 
      } 
     }, 
     success: function(event) { 
      // alert('success message'); 
      // do other things for a valid form 

     }, 
     submitHandler: function(form, event) { 
      // do other things for a valid form 

     } 
    }); 

});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<script src="https://validatejs.org/validate.min.js"></script> 


<article id="overlay" style="display: none;"> 


    <section id="form"> 
     <h3 class="gold">We’re here to help</h3> 


     <form action="" method="POST" id="pop_up"> 

      <input type=hidden name="oid" value="###############"> 
      <div class="field-wrap text-wrap label-above"> 
       <label for="first_name">First Name</label> 
       <?=$firstname_status;?> 
        <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['first_name']);?>" /> 
      </div> 

      <div class="field-wrap text-wrap label-above"> 
       <label for="last_name">Last Name</label> 
       <?=$lastname_status;?> 
        <input id="last_name" maxlength="80" name="last_name" size="20" type="text" required="required" value="<?php echo stripslashes($_POST['last_name']);?>" /> 
      </div> 

      <div class="field-wrap text-wrap label-above"> 
       <label for="email">Email Address</label> 
       <?=$email_status;?> 
        <input id="email" maxlength="80" name="email" size="20" type="email" class="textbox" required="required" value="<?php echo stripslashes($_POST['email'])?>" /> 
      </div> 

      <div class="field-wrap text-wrap label-above"> 
       <label for="phone">Phone Number</label> 
       <?=$phone_status;?> 
        <input id="phone" maxlength="40" name="phone" size="20" type="text" class="textbox" value="<?php echo $_POST['phone']?>" /> 
      </div> 


      <div class="field-wrap submit-wrap label-above"> 
       <input type="submit" name="submit" value="See the Offer" class="form-button"> 
      </div> 
      <input type="hidden" value="###############" id="Campaign_ID" name="Campaign_ID"> 
      <input type="hidden" value="Pop-up" id="################" name="######################" /> 
      <!-- this is email offer --> 
      <input type="hidden" value="<?=$_GET['lead_source']?>" id="lead_source" name="lead_source"> 
      <input type="hidden" value="https://www.salesforce.com/######" name="post_url" id="post_url"> 

     </form> 


     <i class="close fa fa-times-circle fa-2x" style="left: -10px; bottom: -10px;"></i> <a class="close" href="#close">close</a> 


    </section> 

</article>

источник

2017-02-01 23:54:04 Sam0

Сообщение об успешном всплытии формы

ответ

Смежные вопросы