Question

我制作了一个html表单来接受用户的输入。我的示例代码如下：

   <form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
    <input type="hidden" name="what" value="faculty" />
            <div class="form-item">
                <div class="form-left">
                    <label><big>Name:</big></label>
                </div>
                <div class="form-right">
                    <input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
                </div>
            </div>



            <div class="form-item">
                <div class="form-left">
                    <label><big>Education:</big></label>
                </div>
                <div class="form-right">
                    <input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
                </div>
            </div>

            <div id="buttons">
                <button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
                <input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
            </div>
</form>

我想添加一个功能，在单击“提交”按钮后，该功能将消失，因此用户无法双击该功能。可能吗？我该怎么办？

Answer 1

两种最简单的方法要么是使用javascript，要么是

<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">

<script>
  function hideSubmit(){
    document.getElementById("buttons").style.display = "none";
  }
</script>

或jquery

<script>
  $(function(){ 
    $('.form-main').on('submit', function(){
      $('#buttons').hide();
    });
  });
</script>

Answer 2

在单击“提交”按钮后，该按钮将消失，因此用户无法双击它。

您已经从字面上描述了操作方法。

document.getElementById('test-button').addEventListener('click', function () {
  this.remove()
})

<button id="test-button">Click me!</button>

我建议阅读有关setting up events的信息。

以html形式单击后消失提交按钮

2 个答案: