单击按钮时将表单替换为另一表单

Question

我有两种形式。 我想要单击按钮以在第一个窗体位置上显示另一个窗体。 因此，只需替换该表格即可。

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

因此由于某种原因，这是行不通的。 请帮我解决这个问题。 我试图设置opacity:0; 第一种形式，但是不起作用。 并且请让我知道应该使用哪个库。

这是我的示例： http : //codepen.io/anon/pen/PzKaPa

Answer 1

编辑：所以我看着你的笔并修复了它，这样它可以正常工作： http : //codepen.io/anon/pen/OXjEQd

看来您需要做几件事，其中一些您可能已经做过：首先，将您的jquery放置在ready函数中（并确保已在head标签中链接了jquery版本）-

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

然后，在您的点击处理程序中，添加一个preventDefault（）：

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

e.preventDefault（）阻止您的提交按钮执行其默认操作-提交表单。 这使您可以使用按钮执行其他操作。 如果您不包括此内容，则单击按钮时发生的第一件事就是表单提交，并且您将不会进入click事件中的任何其他代码。

这也假定您在CSS中定义了一个.visible类。 如果不是，则需要添加它，或者代替使用addClass和removeClass，您需要直接更改表单上的display属性：

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

Answer 2

除非您定义了在其他位置visible的类（并且已将表单的CSS默认设置设置为隐藏），否则添加或删除它均无效。

相反，建议您直接更改两者的display属性：

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

这将直接更改每个元素上的style属性，从而使其隐藏或显示。 使用css("display", "")将删除设置。

您可能还会研究jQuery中的hide和show方法，因为它们只有做一个漂亮的动画才能完成相同的工作。

Answer 3

除非您有适用于带有或不带有“可见”类的元素的特定CSS，否则删除该类并将其添加到元素将无济于事。

您可能要尝试

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

切换表单可见性，您可以最初使用CSS或内置jQuery类在表单上应用可见性。