JQueryフォーム提出後にフォームを返す

Question

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（といくつかのことを試してみました）と追加してきましたが、今は少し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> 

そしてフォーム送信はこちら。

アイデア？私はほとんどそこにいると感じる。おかげでクローンで修飾事前に

---

は、フォームフィールドがONFOCUSその動作を維持する、しかし、送信ボタンのクリックイベントは存在しません。ボタンをクリックすると、フォームフィールド/および/またはメーラーにデータをポストする代わりに、ページがリロードされます。私はこれをどのように修正するのですか？前もって感謝します。

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

連絡先フォームを置き換えるのではなく、後で挿入してから挿入した要素を削除することができます。

また、あなたはあなたがあなたの問題とゴール少し説明してもらえ初期フォームのクローン化されたバージョンを保存し、よりオリジナル