JQuery表单提交后的返回表单

Question

用成功消息替换后，有没有办法在其div中返回联系表单？

表单看起来像这样。

<div id="contact_form" > 
    <fieldset> 
     <form name="contact" method="post" action="" > 
      <p> 
       <label for="name">Name:</label> 
       <input name="name" id="name" value="" type="text" class="text-input" /> 
      </p> 
      <label class="error" for="name" id="name_error">*Required</label> 
      <p> 
       <label for="email">Email:</label> 
       <input name="email" id="email" value="" type="text" class="text-input" /> 
      </p> 
      <label class="error" for="email" id="email_error">*Required</label> 
      <p> 
       <label for="phone">Phone:</label> 
       <input name="phone" id="phone" value="" type="text" class="text-input" /> 
      </p> 
      <label class="error" for="phone" id="phone_error">*Required</label> 
      <p> 
       <label for="comment">Message:</label> 
       <textarea cols="20" rows="40" name="comment" id="comment" class="text-input"></textarea> 
      </p> 
      <label class="error" for="comment" id="comment_error">Please type a message.</label> 
      <p> 
       <input name="send" class="button" id="submit_btn" value="" type="submit" /> 
      </p> 
     </form> 
    </fieldset> 
    <div id="message"></div> 
</div> 

和表单提交是在这里：

$(function() { 
    $('.error').hide(); 
    $('input.text-input').css({ 
     backgroundColor: "#FAFAFA" 
    }); 
    $('input.text-input').focus(function() { 
     $(this).css({ 
      backgroundColor: "#FFFFFF" 
     }); 
    }); 
    $('input.text-input').blur(function() { 
     $(this).css({ 
      backgroundColor: "#FAFAFA" 
     }); 
    }); 



    $(".button").click(function() { 
     // validate and process form 
     // first hide any error messages 
     $('.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 phone = $("input#phone").val(); 
     if (phone == "") { 
      $("label#phone_error").show(); 
      $("input#phone").focus(); 
      return false; 
     } 
     var comment = $("textarea#comment").val(); 
     if (comment == "") { 
      $("label#comment_error").show(); 
      $("textarea#comment").focus(); 
      return false; 
     } 

     var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone + '&comment=' + comment; 
     //alert (dataString);return false; 

     $.ajax({ 
      type: "POST", 
      url: "bin/process.php", 
      data: dataString, 
      success: function() { 
       $('#contact_form').html("<div id='message'></div>"); 
       $('#message').html("<h2>Email Sent!</h2>").append("<p> We will be in touch soon.</p>").hide().fadeIn(2000, function() { 
        $('#message').append("<img id='checkmark' src='img/check.png' />"); 
        setTimeout('$("#message").fadeOut("slow")', 2500); 
        $(document).ready(function() { 
         $('#contact_form').fadeOut(2000, function() { 
          var $newElement = $('<div id="contact_form">Form</div>'); 

          $(this).replaceWith($newElement); 
          $('contact_form').append($('<input name="name" id="name" value="" type="text" class="text-input" /></p>')); 
          $('contact_form').append($('<input name="name" id="name" value="" type="text" class="text-input" /></p>')); 
          $newElement.fadeIn(1000, function() { 
           document.location.reload(); 

           setTimeout(function() { 

            $('#name, #email, #phone, #comment').val('') 
           }, 1000); 


          }); 
         }); 
        }); 

       }); 
      } 
     }); 
     return false; 
    }); 
}); 


runOnLoad(function() { 

    $("input#name").select().focus(); 

    $('#contact_form input').focus(function() { 
     $(this).val(''); 
    }); 
    $('#contact_form textarea').focus(function() { 
     $(this).val(''); 
    }); 
}); 

我已经尝试了几件与replaceWith（）和追加的，但对于现在的小格出现在重装前贴在表格上。

任何想法？我觉得我快到了。在此先感谢

---

修饰克隆，表格字段保留其行为聚焦状态，但提交按钮是不存在的单击事件。当我点击按钮时，页面被重新加载，而不是验证表单域和/或发送数据到邮件程序。如何解决这个问题？提前致谢。

form_script.js：

$(function() { 


    $('.error').hide(); 
    $('input.text-input').css({backgroundColor:"#FAFAFA"}); 
    $('input.text-input').focus(function(){ 
    $(this).css({backgroundColor:"#FFFFFF"}); 
    }); 
    $('input.text-input').blur(function(){ 
    $(this).css({backgroundColor:"#FAFAFA"}); 
    }); 

    $('#contact_form input').focus(function() { 
    $(this).val(' '); 
}); 

$('#contact_form textarea').focus(function() { 
    $(this).val(''); 
}); 

//$('#contact_form').data('old-state', $('#contact_form').html()); 
var newForm = $('#contact_form').clone(true); 

    $(".button").click(function() { 
    // validate and process form 
    // first hide any error messages 
    $('.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 phone = $("input#phone").val(); 
    if (phone == "") { 
    $("label#phone_error").show(); 
    $("input#phone").focus(); 
    return false; 
} 
var comment = $("textarea#comment").val(); 
    if (comment == "") { 
    $("label#comment_error").show(); 
    $("textarea#comment").focus(); 
    return false; 
} 

    var dataString = '&name='+ name + '&email=' + email + '&phone=' + phone + '&comment=' + comment; 
    //alert (dataString);return false; 



    $.ajax({ 
    type: "POST", 
    url: "bin/process.php", 
    data: dataString, 
    success: function() { 


    $('#contact_form').html("<div id='message'></div>"); 
    $('#message').html("<h2>Email Sent!</h2>") 
    .append("<p>We will be in touch soon.</p>") 
    .hide() 
    .fadeIn(2000, function() { 
     $('#message').append("<img id='checkmark' src='img/check.png' />"); 
     //setTimeout('$("#message").fadeOut("slow")',1000); 
     $('#message').append("<button id ='NewMail'></button>"); 

     $('#NewMail').click(function() { 
         // insert the new form 

      //$('#contact_form').html($('#contact_form').data('old-state')); 
      $('#contact_form').fadeIn(500).append(newForm); 

      $('#message').hide(); 
     }); 

    }); 


    } 
}); 

return false; 
}); 
}); 



runOnLoad(function(){ 


$("input#name").select().focus(); 


}); 

---

寻找在这里，我看到了使用。数据（）方法的建议，修改了我这样的代码和种得到同样的效果。在问题是我有麻烦约束事件和属性到原始形式的输入：

$(function() { 


    $('.error').hide(); 
     $('input.text-input').css({backgroundColor:"#FAFAFA"}); 
    $('input.text-input').focus(function(){ 
     $(this).css({backgroundColor:"#FFFFFF"}); 
    }); 
$('input.text-input').blur(function(){ 
$(this).css({backgroundColor:"#FAFAFA"}); 
}); 

$('#contact_form input').focus(function() { 
    $(this).val(' '); 
}); 

$('#contact_form textarea').focus(function() { 
    $(this).val(''); 
}); 

$('#contact_form').data('old-state', $('#contact_form').html()); 


$(".button").click(function() { 
    // validate and process form 
    // first hide any error messages 
    $('.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 phone = $("input#phone").val(); 
    if (phone == "") { 
    $("label#phone_error").show(); 
    $("input#phone").focus(); 
    return false; 
} 
var comment = $("textarea#comment").val(); 
    if (comment == "") { 
    $("label#comment_error").show(); 
    $("textarea#comment").focus(); 
    return false; 
} 

    var dataString = '&name='+ name + '&email=' + email + '&phone=' + phone + '&comment=' + comment; 
    //alert (dataString);return false; 



    $.ajax({ 
    type: "POST", 
    url: "bin/process.php", 
    data: dataString, 
    success: function() { 


    $('#contact_form').html("<div id='message'></div>"); 
    $('#message').html("<h2>Email Sent!</h2>") 
    .append("<p>We will be in touch soon.</p>") 
    .hide() 
    .fadeIn(2000, function() { 
     $('#message').append("<img id='checkmark' src='img/check.png' />"); 
     //setTimeout('$("#message").fadeOut("slow")',1000); 
     $('#message').append("<button id ='NewMail'></button>"); 

     $('#NewMail').click(function() { 
         // insert the new form 

      $('#contact_form').html($('#contact_form').data('old-state')); 

     }); 

    }); 


    } 
}); 

return false; 
}); 
}); 



runOnLoad(function(){ 


$("input#name").select().focus(); 


}); 

仍然让我的头绕jQuery魔法。有什么建议么。谢谢。

Answer 1

而不是替换联系人表单，您可以插入后，然后删除插入的元素。

你也可能想看看.clone（）http://api.jquery.com/clone/，可以节省初始形式的克隆版本，并且比原来的