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

JavaScript
1

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.

2

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

3 Likes
3

Please find button code:

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

So what is the actual purpose of the button?

6

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.

7

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;
}
8

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

9

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

10 
// 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.

11

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.

12

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