Question

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

因此出于某种原因，这是行不通的。请帮我解决这个问题。我试图设置第一种形式的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（）使您的提交按钮不会执行默认操作 - 提交表单。这使您可以使用按钮执行其他操作。如果你不包括这个，那么点击你的按钮时会发生的第一件事是表单提交，你将无法访问你点击事件中的任何其他代码。

这也假设你在css中定义了一个.visible类。如果没有，你也需要添加它，或者不需要使用addClass和removeClass，你需要直接更改表单上的display属性：

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

Answer 2

除非您已在其他地方定义了类include\C.h|10|error: 'B' has not been declared include\C.h|12|error: 'B' does not name a type（并且已将表单的CSS默认值设置为隐藏，否则添加或删除它将无效。

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

display

这会直接改变每个元素的$("#form2").css("display", "none"); // so it's initially invisible $("#contact-submit").on("click", function() { $("#contact").css("display", "none"); $("#form2").css("display", ""); });属性，导致它们隐藏或显示。使用style将删除该设置。

你也可以查看jQuery中的css("display", "")和hide方法，因为它们可以做同样的事情，只有一个很好的动画。

Answer 3

除非您有适用于包含或不包含“＆＃39;可见”字样的元素的特定CSS，否则删除该类并将其添加到元素中将无效。

您可能想尝试

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

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

点击按钮

3 个答案: