Я просмотрел другие вопросы по этому вопросу, но не смог найти удовлетворительного ответа. У меня есть веб-сайт викторины, где пользователь выбирает вариант из четырех параметров, а затем нажимает кнопку submit. Я хочу отключить кнопку отправки после ее однократного нажатия.
Есть ли способ сделать это с помощью PHP? Если нет, есть ли способ сделать это с минимальным JS.
Поскольку вы отметили вопрос jQuery, вот несколько простых решений jQuery, которые вы можете использовать:
Чтобы отключить его при нажатии, вы можете просто:
$('input[type="submit"]').click(function() { this.disabled = true; };
Вы можете сделать еще лучше, хотя и отключите его только после отправки формы:
$("form").submit(function() { $(this).find('input[type="submit"]').prop("disabled", true); });
Вот простая демонстрация вышеуказанной логики в jsFiddle: http://jsfiddle.net/zb8CZ/
(Обратите внимание, что в этой реализации я не использовал jQuery, а скорее просто JS, для переносимости в браузерах, а также для доступа ко многим другим методам, которые предоставляет jQuery (плюс синтаксический сахар!), Я рекомендую методы jQuery.
Обратите внимание, что попытка реализовать обработку событий JS inline в вашем HTML (с использованием onsubmit="..."
или onclick="..."
) считается плохой практикой, поскольку она путает вашу функциональность с вашим слоем макета / отображения. Вы также потеряете подсветку синтаксиса и / или проверку ошибок, которую может предоставить ваш редактор, а также просто усложняют разработку и обслуживание вашего приложения, поскольку логический порядок вашего кода не существует.
Я оставляю код:
<form name="myform" action="/" method="post" onsubmit="document.getElementById('submit_button').disabled = 1;"> <!-- form elements here --> </form>
Чтобы отключить запись, выполните следующие действия: один раз щелкнуть мышью будет отключено.
<input type="submit" id="but_sub" name="submit" \> $("#but_sub").click(function() { $(this).attr("disabled",true); }
или
$('#but_sub').click(function() { $(this).attr("disabled","disabled"); }
Попробуй это. Вы можете передать значение каждого ответа в файл PHP, который выполняет бэкэнд-работу через AJAX.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> <script> $('#question').submit(function(){ //Get the value of the answer that was checked var answer = $('input:radio[name=question_one]:checked').val(); //Use jQuery's AJAX function to send the data to a PHP file that does backend work $.ajax({ type:'POST', url:'quiz_backend.php', data:'answer='+ answer, success: function() { //Hide the submit button upon successful submission $('#submit').attr("disabled", true); event.preventDefault(); } }); }); </script> <form id="question"> <input type="radio" name="question_one" value="answer_one">A<br /> <input type="radio" name="question_one" value="answer_two">B<br /> <input type="radio" name="question_one" value="answer_three">C<br /> <input type="radio" name="question_one" value="answer_four">D<br /> <input type="submit" value="submit" id="submit"/> </form>
Подробнее о вызове AJAX от jQuery.
очень простой метод только для javascript
<form action="" method="post" > <input type="submit" name="SUBMIT" value="Submit Form" onclick="this.disabled='disabled';this.form.submit();" /> </form>
Обычной практикой в наши дни было бы использовать AJAX, но это не отвечает на вопрос, равно как и никакого решения Javascript без какой-либо помощи со стороны. Скажем, у вас есть форма, например:
<form action="foo.php" method="post"> <input type="text" name="myVariable"/> <button type="submit">Submit</button> </form>
При отправке в ваш PHP-файл для обработки вы будете получать доступ к своим данным формы через $_GET
или $_POST
и делать все, что вам нужно для этого. На этом этапе вы сможете определить, была ли форма отправлена или прошла успешно, – на основе этого вы можете просто отметить элементы input
или button
с disabled
атрибутом, вот пример:
<?php # foo.php $myVariable = isset($_POST['myVariable']) ? $_POST['myVariable'] : ''; echo "You submitted: {$myVariable}\n"; // do something useful... // if variable is not an empty string, ie. it has been submitted, // set $disabled which can then be output in-line with your HTML $disabled = ($myVariable != '') ? 'disabled' : ''; ?> <form action="foo.php" method="post"> <input type="text" name="myVariable"/> <button type="submit" <?php echo $disabled; ?>>Submit</button> </form>
Затем будет выводиться новая форма с отключенной кнопкой в зависимости от ваших условий. Я должен также отметить, что в зависимости от вашего doctype
вам может потребоваться присвоить атрибуту значение, чтобы оно считалось действительной разметкой, но, вообще говоря,
<!-- valid HTML5 --> <button disabled>button</button> <!-- valid XHTML --> <button disabled="disabled">button</button>
Некоторое связанное чтение StackOverflow:
Что такое doctype?
Что значит ?:
Означает? (тройной оператор)
PHP: как я могу отправить форму через AJAX (версия jQuery)
Просто попробуйте с кодом ниже. Надеюсь, это поможет вам …
$('#contact-form').submit(function () { if ($(this).valid()) { $('.submit').attr("disabled", true); } });