ボタンをクリックするとフォームが別のフォームに置き換えられます

Question

私は2つのフォームを持っています。ボタンをクリックすると、最初のフォームの位置に別のフォームが表示されます。そのフォームを置き換えるだけです。何らかの理由でTHIのためにそう

フォーム1

<div id="right"> 
    <form id="contact" class="visible" action="" method="post"> 
     <fieldset> 
      <input name="fname" placeholder="Ime" type="text" tabindex="1" required> 
     </fieldset> 
     <fieldset> 
      <input name="lname" placeholder="Prezime" type="text" tabindex="2" required> 
     </fieldset> 
     <fieldset> 
      <input name="tel" placeholder="Telefon" type="text" tabindex="2" required> 
     </fieldset> 
     <fieldset> 
      <input name="email" placeholder="Email" type="email" tabindex="2" required> 
     </fieldset> 
     <fieldset> 
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Pošalji</button> 
     </fieldset>   
    </form> 
</div> 

フォーム2

<div id="form2"> 
    <form id="contact2" action="" method="post"> 
     <fieldset> 
      <input name="fname" placeholder="Ime" type="text" tabindex="1" required> 
     </fieldset> 
     <fieldset> 
      <input name="lname" placeholder="Prezime" type="text" tabindex="2" required> 
     </fieldset> 
     <fieldset> 
      <input name="tel" placeholder="Telefon" type="text" tabindex="2" required> 
     </fieldset> 
     <fieldset> 
      <input name="email" placeholder="Email" type="email" tabindex="2" required> 
     </fieldset> 
     <fieldset> 
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Pošalji</button> 
     </fieldset> 
</div> 

jQueryの

$("#contact-submit").on("click", function() { 
     $("#contact").removeClass("visible"); 
     $("#form2").addClass("visible"); 
    }); 

sは動作していません。これを解決するために私を助けてください。私は最初のフォームのopacity:0;を設定しようとしましたが、動作しません。そして、どのlibaryを使うべきか教えてください。ここで

は私の例です：。http://codepen.io/anon/pen/PzKaPa

Answer 1

編集：だから私はあなたのペンを見て、それが動作するように、それを修正：http://codepen.io/anon/pen/OXjEQd

あなたが既に持っているかもしれません一つは、物事のカップルを、行う必要がありますように見えます：最初に、あなたを置きますレディ機能でjQueryの（そして、あなたの頭のタグでjQueryのバージョンをリンクされていることを確認してください） -

$(function(){ 
    // your code 
}); 

次に、あなたのクリックハンドラで、でpreventDefaultを（追加）：

$('#contact-submit').on('click',function(e){ 
    e.preventDefault(); 
    // rest of code 
}); 

e.preventDefault（）は、フォームの送信時に送信ボタンがデフォルトアクションを実行しないようにします。これにより、ボタンで他のアクションを実行できます。これを含めないと、ボタンをクリックしたときに最初に起こるのはフォーム提出であり、クリックイベント内の他のコードには到達しません。

これは、CSSで.visibleクラスが定義されていることを前提としています。あなたが特定のCSSを持っていない限り

$('#contact').css('display','none'); 
$('#form2').css('display','block'); 

Answer 2

あなたはどこか別のクラスvisibleを定義している（とhiddneされるように、フォームのCSSデフォルトを設定していない限り、それは効果がありません追加または削除

代わりに、私はあなたが直接2のdisplayプロパティを変更お勧めします：

$("#form2").css("display", "none"); // so it's initially invisible 
$("#contact-submit").on("click", function() { 
    $("#contact").css("display", "none"); 
    $("#form2").css("display", ""); 
}); 

これは、直接それらを非表示にしたり、SHさせ、各要素に対してstyle属性を変更しますこんにちは。 css("display", "")を使用すると設定が削除されます。

jQueryのhideとshowのメソッドは、素晴らしいアニメーションだけで同じことができます。

Answer 3

に適用されますされていない場合、あなたにも、またはその代わりにaddClassとremoveClassを使用しての、あなたが直接、フォーム上の表示プロパティを変更する必要がありますことを追加する必要がありますクラス 'visible'の有無にかかわらず、そのクラスを削除して要素に追加することは何もしません。

フォームの表示を切り替えるために、そしてあなたが最初にCSSを使用して、または内蔵のjQueryのクラスフォームでの視認性を適用することができます

$("#contact-submit").on("click", function() { 
    $("#contact").toggle(); 
    $("#form2").toggle(); 
}); 

を試してみたいことがあります。