Unable to execute javascript for onclick event for a button which is inside HTML form tag

0
votes

I am trying to create a small web application (using HTML and javascript on client side and may be servelets for server side) to execute some automation scripts. The HTML file has a form which has some input fields and submit button. I want to disable the button once the form is submitted and enable it only when new data is entered in the fields. How do I achieve it in the javascript?

I am trying to view it on Chrome browser and the enabling and disabling of the button works fine when the button is outside form tag but that does not get the form data.

Also, i tried changing button type to "button" instead of "submit" but the javascript did not execute at all. The only time when the method startAutomation() executes is when the button is outside form tag. However, javascript method call works fine for other input elements inside form.

I suspect that browser is refreshing too fast and hence not visible. How do I resolve this problem?

Below is my HTML code:

<!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>

What i want to achieve:

  1. Enter the data into the form.
  2. Click start automation button to submit the form (data available in the URL)
  3. Immediately disable the button and replace "execution status" message with "automation execution started" message.
  4. When the user clicks on any of the fields in the form to re enter new information, enable the button and change the message back to execution status.

Please let me know if there is any other way to achieve this. I am new to web development.

2
javascripthtmlformsbuttononclick
Clicking that button will call startAutomation();, then submit the form. With the form having no onsubmit="return false;" and no action, that essentially causes a page reload. - Chris G
Once you disabled that button and replace text after submitting button you have to Enable that button and change text again using SetTimeOut function or Ajax call with success event. - Krishnakumar Patel
Thanks @ChrisG. The problem was with the id of button and script name being the same. - Priya S
Thanks @Krisha Patel. I will explore more on SetTimeOut. - Priya S

2 Answers

0
votes

Seems like somehow, on JS initialization startAutomation variable contains <button id="startAutomation" ... /> html element. To avoid that you can change id attribute to something else. Check out code below where I only changed button id to 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>
0
votes

Maybe you can add event listener on input field, so when user click on it it trigers callback function, which enables button and change the text. For example

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

I found some mistakes: 1. your script tag should be inside body element 2.your button id shouldn't be same as function name