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（）和append的东西，但是现在这个小div似乎在重新加载之前就粘在了表单上。

有什么想法吗？我觉得我快到了。提前致谢

使用clone进行修改后，表单字段会保留其在onfocus上的行为，但是提交按钮的click事件不存在。当我单击按钮时，将重新加载页面，而不是验证表单字段/和/或将数据发布到邮件程序。我该怎么解决这个问题？提前谢谢。

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();


});

环顾四周，我看到了一个使用.data（）方法的建议，修改了我的代码，得到了同样的效果。问题是我无法将事件和属性绑定到原始表单输入：

$(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/，您可以保存初始表单的克隆版本，然后将修改后的表单替换为原始

在JQuery表单提交后返回表单

1 个答案: