提交输入显示第二个输入，但两个字段都发送到处理程序

Question

我有一个包含两个字段的简单表单。我希望首先隐藏第二个字段，然后在第一个字段上单击按钮时显示，但是表单处理程序将两个字段的内容发送给我。

我得到的 html 是这样的：

<form method="post" name="contact_form" action="submit.php">
            <input id="URL" name="URL" type="text" placeholder="Website URL (www.yoursite.com)"><input type="submit" value="Submit!">
            <input id="email" name="email" type="text" placeholder="Your Email Address"><input type="submit" value="Send!">
</form>

我希望将第二个字段，即电子邮件字段隐藏在 URL 字段“后面”，当填写并单击 URL 字段时，电子邮件字段将替换它，当电子邮件字段提交时，然后是表单提交时同时发送了两个字段。我不擅长 jQuery；这是可以做到的吗？

Answer 1

// css
 .hidden{
  display: none;
}
// html
<form method="post" name="contact_form" action="submit.php">
            <input class="url" name="URL" type="text" placeholder="Website URL (www.yoursite.com)">
            <input class='url' type="submit" value="Submit!">
            <input class='hidden' name="email" type="text" placeholder="Your Email Address">
            <input type="submit" class="hidden" value="Send!">
</form>


//js

    function stopSubm(){
      $('form').one("submit", function(e){
        e.preventDefault();
        var count= 0;
        if (count > 0 ){
          $(this).submit();
        }
        $('.url').hide();
        $('.hidden').removeClass('hidden');
        count++;


    });

  };
  stopSubm();