用另一個表單替換窗體上的按鈕單擊

我有2個窗體。我希望點擊按鈕在第一個表單位置顯示另一個表單。所以只是爲了替換這種形式。用另一個表單替換窗體上的按鈕單擊

表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"); 
    });

所以出於某種原因THI s不工作。請幫我解決這個問題。我試圖設置第一種形式的opacity:0;，但它不起作用。請讓我知道哪個文庫應該使用。

這是我的例子：http://codepen.io/anon/pen/PzKaPa

來源

2016-07-07 pHenomen

我假設您的表單實際上正在提交，導致您的頁面重新加載。你需要攔截表單提交。 – Jack

我會指出，你不應該使用不透明來隱藏和顯示的東西。它只是明顯地隱藏了元素。用戶仍然可以對元素做出反應。比如他們可以點擊不可見的輸入並開始輸入。然後提交表單。 –

編輯：所以，我看着你的筆和固定它，所以它的工作原理：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類。如果沒有，你需要添加以及或代替使用addClass與removeClass，你需要改變直接在表單上顯示屬性：

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

來源

2016-07-07 19:55:25 Cruiser

好的答案，我只想補充爲什麼應該使用'preventDefault（）'+1 –

gotchya。我會編輯它。謝謝。 – Cruiser

@Cruiser它可以幫助我，謝謝。但唯一的問題是投入必須填補。在這個例子中，你可以滑動它們。所以，第一種形式必須填充，而不是第二種形式。 – pHenomen

除非您已經定義的類visible別的地方（並且已經設置了CSS默認爲您的形式被hiddne，添加或刪除它不會有任何效果

相反，我建議你直接改變兩個display屬性：

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

這將直接改變各元素style屬性，使它們隱藏或SH流。使用css("display", "")將刪除該設置。

您可能還會考慮使用jQuery中的hide和show方法，因爲它們可以做同樣的事情，只需要一個很好的動畫。

來源

2016-07-07 19:54:04

除非有特定的CSS適用於具有或不具有「可見」類的元素，移除該類並將其添加到元素將不會執行任何操作。

你可能想嘗試

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

切換形式的知名度，你可以在窗體中使用CSS或內置的jQuery班最初適用的知名度。

來源

2016-07-07 19:59:54

用另一個表單替換窗體上的按鈕單擊

回答

相關問題