Question

我有一个弹出窗口（灯箱样式），如下所示。我使用jquery / ajax提交表单，这很好用。我得到一个成功的响应并将消息应用到表单所在的div。当我单击背景时，表单或成功消息正确关闭但当我单击按钮再次弹出表单时，我得到成功消息或空白弹出窗口（除非我刷新页面）。成功提交后如何“回忆”表格？

形式：

           <div id="contact_form" style="text-align:center">
  <form id="form1" action="" class="formoid-default-skyblue" style="background-color:#FFFFFF;font-size:14px;font-family:'Open Sans','Helvetica Neue','Helvetica',Arial,Verdana,sans-serif;color:#666666;max-width:200px;min-width:150px" method="post"><div class="title"><h2>Contact</h2></div>
    <div class="element-name"  title="First and last name"><label class="title">Name:<span class="required">*</span></label><input class="large" type="text" name="name" id="name" placeholder="First and Last Name" required="required"/><br>
    <label class="error" for="name" id="name_error">This field is required.</label></div>
    <div class="element-email"  title="Email Address"><label class="title">Email<span class="required">*</span></label><input class="large" type="email" name="email" id="email" placeholder="you@youremail.com" value="" required="required"/><br>
        <label class="error" for="email" id="email_error">This field is required.</label>
        <label class="error" for="email" id="valid_email_error">Valid Email is required.</label></div>
    <div class="element-phone"  title="Use xxx-xxx-xxxx format"><label class="title">Phone<span class="required">*</span></label><input class="large" type="text" name="phone" id="phone" placeholder="xxx-xxx-xxxx format" required="required"/><br>
         <label class="error" for="phone" id="phone_error">This field is required.</label></div>
    <div class="element-message"  title="Enter your comments"><label class="title">Message:<span class="required">*</span></label><textarea class="small" name="message" id="message" placeholder="Enter your comments" cols="20" rows="5" >

<div class="submit"><input type="submit" id="submitButton" value="Submit"/></div></form>
  </div>

并处理表单jquery / ajax：

    <script type="text/javascript" >
$(document).ready(function(){
    $('.error').hide();
    $('#submitButton').click(function() {
      // validate and process form here

      $('.error').hide();
      var name = $("input#name").val();
        if (name == "") {
        $("label#name_error").show();
        $("input#name").focus();
        return false;
      }
        var email = $("input#email").val();
        if (email == "") {
        $("label#email_error").show();
        $("input#email").focus();
        return false;
      }
      var email = $("input#email").val();
      if(IsEmail(email)==false){
                $('#invalid_email').show();
                $("label#valid_email_error").show();
                $("input#email").focus();
                return false;
      }
        var phone = $("input#phone").val();
        if (phone == "") {
        $("label#phone_error").show();
        $("input#phone").focus();
        return false;
      }
    $.ajax({
            type: "POST",
            url: "conprocTest.asp",
            data:  $("#form1").serialize(),
            cache: false,
            dataType: "html",
            success: function(response){
                 $("#form1").hide();
            $('#contact_form').html("<div id='divSuccessMsg' style='max-width:220px;margin: 0px auto;'><span style='font-weight:bold;'>Thank You, Your Message was Sent Successfully!</span><br><em>We make every effort to respond in a timely fashion but there are times when factors out of our <br>control impact our response (emails lost in transit etc.). If you have not heard from us within <br>48 hours please try again, we will never knowingly ignore your contact.</em></div>")
             setTimeout(resetAll,3000);
             },
             error: function(response){
            $('#contact_form').html("<p style='text-align:center'><strong>There was an error!</strong><br><em>Please contact us directly.</em></p>")
            },
          });

    return false;
});
 });
 function IsEmail(email) {
        var regex = /^([\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*[\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+@((((([a-z0-9]{1}[a-z0-9\-]{0,62}[a-z0-9]{1})|[a-z])\.)+[a-z]{2,6})|(\d{1,3}\.){3}\d{1,3}(\:\d{1,5})?)$/;
        if(!regex.test(email)) {
           return false;
        }else{
           return true;
        }
      }
 function resetAll(){
     $("#form1").show();
      $('#divSuccessMsg').remove(); // Removing it as with next form submit you will be adding the div again in your code. 
      }
  </script>

任何想法都将不胜感激。感谢。

Answer 1

您使用contact_form尝试使用.html()替换.append()成功内容。

success: function(response){
             $("#form1").hide();
            $('#contact_form').append("<div id='divSuccessMsg' style='max-width:220px;margin: 0px auto;'><span style='font-weight:bold;'>Thank You, Your Message was Sent Successfully!</span><br><em>We make every effort to respond in a timely fashion but there are times when factors out of our <br>control impact our response (emails lost in transit etc.). If you have not heard from us within <br>48 hours please try again, we will never knowingly ignore your contact.</em></div>")
             setTimeout(resetAll,3000);
             },

在ajax响应之后将div重置为form

1 个答案: