Как я могу запретить пользователям спамить кнопку?

Question

Я работаю над проектом ASP. NET MVC, и мне нужно как-то скрыть или отключить кнопку. Кнопка служит для отправки строки в базу данных.

<div class="form-group">
            <div class="col-lg-2">
                <input type="submit" id="btn" value="Efetuar Picagem" class="btn-danger" 
                style="width:300%" onclick="javascript: return ShowMessage();" />
            </div>
        </div>

Я использую этот скрипт для проверки представления. После этого я хотел бы отключить или скрыть эту кнопку после нажатия на нее.

<script>
    function ShowMessage() {
        ShowMessage.preventDefault();
        var result = confirm("Deseja efetuar picagem?");
        if (result) {



            return true;




        }

        else {
            return false;

        }


    }

</script>

Answer 1

Вы не должны использовать встроенные события или стили, так как это не соответствует принципам MVC и затруднит масштабирование вашего кода (добавьте больше кнопок и функций в ваш проект). Я разделил стили в CSS (вам понадобится тег ссылки ) и обработку событий (с addEventListener ) в JS (вам понадобится тег script ).

Вместо того, чтобы скрывать, я добавляю некоторую прозрачность, чтобы сообщить, что кнопка была отключена.

Вам нужен аргумент события для того, чтобы вызвать protectDefault

/* yourScript.js */

var btn = document.getElementById('submit-btn');

function showMessage(event) {
  event.preventDefault(); // prevents the form submission
  var result = confirm("Deseja efetuar picagem?");
  btn.disabled = result;
}

btn.addEventListener('click', showMessage);

/* yourStyle.css */

.btn-danger {
  padding: 1em 4em;
}
.btn-danger[disabled] {
  opacity: 0.3;
}

<!-- css should be added first to prevent frames with no style 
<link href="/path/yourStyle.css" rel="stylesheet">
-->
<div class="form-group">
  <div class="col-lg-2">
    <input type="submit" id="submit-btn" value="Efetuar Picagem" class="btn-danger"/>
  </div>
</div>
<!-- js should be added after your DOM elements
<script src="/path/yourScript.js">
-->

Answer 2

Это должно сработать.

<input type="submit" id="btn" value="Efetuar Picagem" class="btn-danger" 
                style="width:300%" onclick="submit(this);" />

<script>
    var wasSubmited = false;

    function submit(button) {
        if(!wasSubmited){
            //Submit

            //disable button
            button.setAttribute("disabled", "");
            wasSubmited = true;

            //stop function
            return;
        }

        //Show message that it was already submited

    }
</script>

Answer 3

В прошлом (и сейчас может быть более подходящий подход) я установил onClick для кнопки на $(#btn).prop('disabled', true); setTimeout(ShowMessage, 100);, не забывая активировать кнопку, когда вы закончите.