-3

我是一名新手 Web 开发人员，正在尝试了解如何创建一个电子邮件注册表单，该表单允许用户在不更改页面的情况下在同一个注册输入框中提交电子邮件，从而允许用户输入不需要的信息；他们的名字和姓氏，然后在他们提交后显示感谢信息。例如www.cartercenter.org这个页面上的电子邮件注册表单。我从未见过类似的东西，也无法在网上找到任何关于它的信息。我假设一些 javascript 和或 jquery 在这里发挥作用。

4

1 回答 1

1

这是一个使用 jQuery 的快速示例

$('button').click(function() {
  if ($('input[type=email]').val().length > 0) {
    $('input[type=email]').addClass('hidden');
    $('input[type=text]').removeClass('hidden');
   }
   if ($('input[type=text]').val().length > 0) {
     $('input[type=text]').addClass('hidden');
     $('#finish').css({'display':'block'});
     $('button').addClass('hidden');
   }
 })
.hidden,#finish {
  display: none;
  }
form {
  border: 3px solid gray;
  display: inline-block;
  min-width: 10em;
  padding: 1em;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
  <input type="email" name="email" placeholder="Email"> 
  <input type="text" class="hidden" name="firstname" placeholder="First name">
  <input type="text" class="hidden" name="lastname" placeholder="Last name">
  <p id="finish">Now you get involved</p>
  <button>></button>
</form>

于 2016-11-30T02:13:41.747 回答