How to manage active button as refreshed status in real time?

I have tried to manage a contact form as ACTIVE button. When all fields are filled in it will show an active status. But I see it is an ACTIVE status when I click double times on button.
Can be managed ACTIVE status in real time as soon as it is filled in a form values using refreshed status and JavaScript.

Are you using the required attribute for all the form fields?
It will prevent form submission until all the fields are completed.

3 Likes

Please find button code:

 button.setAttribute("disabled", "");
   if (countChecked(elements) === names.length) {
    button.removeAttribute('disabled');
1 Like

So what is the actual purpose of the button?

To achieve real-time “ACTIVE” status for a button as soon as a form is filled, you can utilize JavaScript and event listeners. When an input event occurs (e.g., a keystroke in a form field), you can check if all required fields are filled and then update the status of the button accordingly. Here’s a simplified example using jQuery:

$(document).ready(function() {
  // Function to check if all fields are filled
  function checkFields() {
    let allFilled = true;
    $('form input[type="text"]').each(function() {
      if ($(this).val() === '') {
        allFilled = false;
        return false; // Break the loop if any field is empty
      }
    });

    // Update button status
    if (allFilled) {
      $('#submitButton').prop('disabled', false); // Enable the button
    } else {
      $('#submitButton').prop('disabled', true);  // Disable the button
    }
  }

  // Listen for input events on the form fields
  $('form input[type="text"]').on('input', function() {
    checkFields(); // Check fields whenever there's input
  });
});

In this example, replace 'form input[type="text"]' with the appropriate selector for your form fields, and replace '#submitButton' with the ID or class of your submit button. The checkFields function checks if all fields are filled and enables/disables the button accordingly based on the status.

Assuming that your button is just there to submit your form,
then there really is no need to mess around with JavaScript.

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Contact Form</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

 <h1>Contact Form</h1>

 <form action="#">
  <h2>All required items  are marked</h2>
  
  <label for="fname">First name:</label>
  <input id="fname" name="fname" required><br>

  <label for="sname">Surname:</label>
  <input id="sname" name="sname" required><br>

  <label for="email">Email address:</label>
  <input type="email" id="email" name="email" required><br>

  <label for="tel">Telephone number:</label>
  <input type="tel" id="tel" name="tel" required><br>

  <button>Submit</button>
 </form>

</body>
</html>

screen.css

body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em  sans-serif;
 }
 h2::after {
   content: ' \2605';
   color: #f00;  
 }
label {
   display: inline-block;
   width: 10em;
   cursor: pointer;
}
label::before {
   content: '\2605 ';
   color: #f00;
}
input{
   margin: 0.25em 0;
}

Thank you for the message. So, event listener is added solution?

No, the solution is the added attribute ‘required’.

// Listen for input events on the form fields
  $('form input[type="text"]').on('input', function() {
    checkFields(); // Check fields whenever there's input
  });

I like listener.

That was a “Bot” account posting that, they are gone now.
You could have got the same answer by visiting ChatGPT yourself, but since you chose instead to come to a forum of humans…
Well, in this instance I’ll leave to post intact for context.

So true, that annoying @SamA74!! I’m on your side. :dotted_line_face:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.