Невозможно выполнить javascript для события onclick для кнопки, которая находится внутри тега HTML-формы - PullRequest
Новая
       6

Невозможно выполнить javascript для события onclick для кнопки, которая находится внутри тега HTML-формы

0 голосов
/ 10 апреля 2019

Я пытаюсь создать небольшое веб-приложение (использующее HTML и javascript на стороне клиента и, возможно, сервлеты для стороны сервера) для выполнения некоторых сценариев автоматизации. Файл HTML имеет форму, в которой есть несколько полей ввода и кнопка отправки. Я хочу отключить кнопку после отправки формы и включить ее только при вводе новых данных в полях. Как мне добиться этого в JavaScript?

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

Кроме того, я попытался изменить тип кнопки на «кнопку» вместо «отправить», но 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>

Чего я хочу достичь:

  1. Введите данные в форму.
  2. Нажмите кнопку запуска автоматизации, чтобы отправить форму (данные доступны в URL)
  3. Немедленно отключите кнопку и замените сообщение «Состояние выполнения» сообщением «Выполнение автоматизации запущено».
  4. Когда пользователь нажимает на любое из полей в форме для повторного ввода новой информации, включите кнопку и верните сообщение обратно в статус выполнения.

Пожалуйста, дайте мне знать, есть ли другой способ добиться этого. Я новичок в веб-разработке.

Ответы [ 2 ]

0 голосов
/ 10 апреля 2019

Возможно, вы можете добавить прослушиватель событий в поле ввода, поэтому, когда пользователь нажимает на него, он вызывает функцию обратного вызова, которая включает кнопку и изменяет текст. Например 

document.querySelector('input').addEventListener('change', function(){
document.getElementById("startAutomation2").disabled = false;
document.getElementById("status").innerHTML = "Start Automation";
});

Я нашел несколько ошибок: 1. твой скрипт-тег должен быть внутри элемента body 2. ваш идентификатор кнопки не должен совпадать с именем функции

0 голосов
/ 10 апреля 2019

Похоже, что при инициализации JS startAutomation переменная содержит <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>
...