Исчезновение кнопки отправки после нажатия в HTML-форме

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>

Предлагаю прочитать о настройке событий .