-2

I created this simple form with a text box, check box, select option list and a Submit button using html. By default submit button is disable. After user fills all the text box and select a option from the select box and check the check box, submit button must be enable. How can I do with java script. Thank you. Here is my code,

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form> <input type="text" id="u-name" name="username" placeholder="Username" /><br/><br> <input type="text" id="u-age" name="age" placeholder="Age" /><br/><br> <select id="u-type"> <option>Choose</option> <option>Type 1</option> <option>Type 2</option> <option>Type 3</option> </select> <br> <br> <label class='checkbox-inline'> <input type='checkbox' name='c-box' id='c-box'>Check Me </label> <br> <input type="submit" id="Save" value="Save" disabled /> </form> </body> </html>
Improve this question
3
  • Write a function triggered by onchange of each of the inputs checking for if they'll all filled in, if so, set disabled on the final button to be false Commented Jun 13, 2021 at 19:14
  • 1
    What have you tried? Please add any code you have tried to achieve what you have outlined, then the community can assist you with solving any issues you have. Your question will get flagged if you do not show some kind of effort at solving the issue yourself before presenting it to the SO community. Commented Jun 13, 2021 at 19:20
  • 1
    Instead of a disabled button, you can also set the inputs as required to use the browser validation. This also prevents sending without values. Commented Jun 13, 2021 at 19:24

1 Answer 1

Reset to default
4

You'd have to track the state of each of the inputs. When all the inputs are filled out with valid data, the submit button will be enabled.

Like this:

const submitBtn = document.getElementById('Save') const uName = document.getElementById('u-name') const uAge = document.getElementById('u-age') const uType = document.getElementById('u-type') const cBox = document.getElementById('c-box') // run this function whenever the values of any of the above 4 inputs change. // this is to check if the input for all 4 is valid. if so, enable submitBtn. // otherwise, disable it. const checkEnableButton = () => { submitBtn.disabled = !( uName.value && uAge.value && cBox.checked && uType.value !== 'Choose' ) } uName.addEventListener('change', checkEnableButton) uAge.addEventListener('change', checkEnableButton) uType.addEventListener('change', checkEnableButton) cBox.addEventListener('change', checkEnableButton)
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form> <input type="text" id="u-name" name="username" placeholder="Username" /> <br><br> <input type="text" id="u-age" name="age" placeholder="Age" /><br/><br> <select id="u-type"> <option>Choose</option> <option>Type 1</option> <option>Type 2</option> <option>Type 3</option> </select> <br><br> <label class='checkbox-inline'> <input type='checkbox' name='c-box' id='c-box'>Check Me </label> <br> <input type="submit" id="Save" value="Save" disabled /> </form> </body> </html>

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Whoa, what's going on? Why the dislikes? If it's because of my mistake not accounting for the checkbox before, it's fixed now.
I think something childish reaction in the sense of "OP has not shown any initiative to solve his problem" so no one should answer... Who votes down, could at least leave a comment there.
This is the correct answer. The ones voting down probably think the correct way is to use require attribute instead of attaching a validation function for each element.
@SvenEberth I see. Yeah, I was thinking to myself, "Sure, my answer initially had a mistake, but someone could have commented."
Thank you, your answer solved my problem.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.