#javascript #html #forms #button #onclick
#javascript #HTML #формы #кнопка #onclick
Вопрос:
Я пытаюсь создать небольшое веб-приложение (используя HTML и javascript на стороне клиента и, возможно, сервелаты на стороне сервера) для выполнения некоторых сценариев автоматизации. В HTML-файле есть форма, в которой есть несколько полей ввода и кнопка отправки. Я хочу отключить кнопку после отправки формы и включить ее только при вводе новых данных в поля. Как мне добиться этого в javascript?
Я пытаюсь просмотреть его в браузере Chrome, и включение и отключение кнопки работает нормально, когда кнопка находится вне тега формы, но при этом не получает данные формы.
Кроме того, я попытался изменить тип кнопки на «button» вместо «submit», но javascript вообще не выполнялся. Метод startAutomation() выполняется только тогда, когда кнопка находится вне тега формы. Однако вызов метода javascript отлично работает для других входных элементов внутри формы.
Я подозреваю, что браузер обновляется слишком быстро и, следовательно, не отображается. Как мне решить эту проблему?
Ниже приведен мой HTML-код:
<!DOCTYPE html>
<html>
<head>
<title>Test Automation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function startAutomation() {
document.getElementById("startAutomation").disabled = true;
document.getElementById("status").innerHTML = "Automation execution started...";
}
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<form name="setConfig">
<fieldset>
<label class="required-field">Enter your email id to get notified : </label>
<input type="text" name="emailId" size="60"> </input>
<br>
<button type="submit" value="Start Automation" id="startAutomation" style="font-size:105%;" onclick="startAutomation();">Start Automation</button>
<br>
</fieldset>
<fieldset>
<p style="font-size:120%;" id="status">Execution status</p>
</fieldset>
</form>
</body>
</html>
Чего я хочу добиться:
- Введите данные в форму.
- Нажмите кнопку запуска автоматизации, чтобы отправить форму (данные доступны в URL)
- Немедленно отключите кнопку и замените сообщение «статус выполнения» на сообщение «автоматическое выполнение начато».
- Когда пользователь нажимает на любое из полей формы для повторного ввода новой информации, включите кнопку и измените сообщение обратно на статус выполнения.
Пожалуйста, дайте мне знать, если есть какой-либо другой способ добиться этого. Я новичок в веб-разработке.
Комментарии:
1. Нажатие на эту кнопку вызовет
startAutomation();, а затем отправит форму. Поскольку форма имеет noonsubmit="return false;"и noaction, это, по сути, вызывает перезагрузку страницы.2. После того, как вы отключили эту кнопку и заменили текст после отправки кнопки, вы должны включить эту кнопку и снова изменить текст, используя функцию setTimeout или вызов Ajax с событием успеха.
3. Спасибо @ChrisG. Проблема заключалась в том, что идентификатор кнопки и имя скрипта совпадали.
4. Спасибо @Krisha Patel. Я подробнее расскажу о setTimeout.
Ответ №1:
Похоже, что каким-то образом startAutomation переменная инициализации JS содержит <button id="startAutomation" ... /> html-элемент. Чтобы избежать этого, вы можете изменить атрибут id на что-то другое. Посмотрите код ниже, где я только изменил идентификатор кнопки startAutomationButton .
<!DOCTYPE html>
<html>
<head>
<title>Test Automation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function startAutomation() {
document.getElementById("startAutomationButton").disabled = true;
document.getElementById("status").innerHTML = "Automation execution started...";
}
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<form name="setConfig">
<fieldset>
<label class="required-field">Enter your email id to get notified : </label>
<input type="text" name="emailId" size="60"> </input>
<br>
<button type="submit" value="Start Automation" id="startAutomationButton" style="font-size:105%;" onclick="startAutomation()">Start Automation</button>
<br>
</fieldset>
<fieldset>
<p style="font-size:120%;" id="status">Execution status</p>
</fieldset>
</form>
</body>
</html> Комментарии:
1. Этот код отлично работал для меня! Большое вам спасибо @lankovova. Но теперь я не могу видеть поля формы в URL (например?emailId=) Должен ли я добавить что-нибудь дополнительное в тег формы?
2. @PriyaS IMO на текущий вопрос дан ответ и завершен. И ваша проблема с отправкой формы звучит достаточно для нового вопроса.
Ответ №2:
Возможно, вы можете добавить прослушиватель событий в поле ввода, поэтому, когда пользователь нажимает на него, он запускает функцию обратного вызова, которая включает кнопку и изменяет текст. Например
document.querySelector('input').addEventListener('change', function(){
document.getElementById("startAutomation2").disabled = false;
document.getElementById("status").innerHTML = "Start Automation";
});
Я обнаружил некоторые ошибки:
1. ваш тег script должен находиться внутри элемента body
2. идентификатор вашей кнопки не должен совпадать с именем функции
Комментарии:
1. Ооо, большое вам спасибо @Ivan! Это действительно была проблема. Идентификатор кнопки совпадал с именем функции. Но что касается тега script, многие рекомендуют, чтобы он был внутри head в качестве наилучшей практики. Кроме того, я добавил тот же код, что и метод javascript для полей ввода, и добавил в сам onclick…. Надеюсь, это нормально…
2. Помещение скриптов в head — это прекрасно (и раньше было соглашением), тем более, что это функция. Однако размещение скрипта в конце тела имеет свои преимущества, и невыполнение этого вряд ли можно назвать ошибкой.