How to detect inputs is filled and checkbox is also clicked

And that way change the button tag?

And when an inputs is not filled then make button tag not clickable.

Just think about it but any idea to start?

You just need to use jQuery, React or any other JS library.

To learn jQuery and React, go to your FCC curriculum and you’ll find it in the Front End Libraries Certification section.

It’s advised to master javascript before using JS libraries & frameworks.

1 Like

So when that button is clicked (so you add an event listener to the button), you want to select the two inputs:

  • with the text input, you want to check if the value property is not an empty string.
  • with the checkbox input, you want to check if the checked property is true.

So youd use document.addEventListener, and document.querySelector (or documentQuerySelectorAll).

Also probably ignore what @clevious said, this is fairly basic stuff that definitely does not need a framework/library (sorry @clevious, but “just learn a complex framework to do this simple thing” isn’t very good advice).

You can hide the button based on the :valid/:invalid state. Very hacky and probably not what you want but i just wanted to show this. Also when you have to check both a text input and a checkbox it gets a little weird.

<form action="url_of_form">
  <label for="FirstField">First field (enabled):</label>
  <input type="text" id="FirstField" required><br>
  <input type="checkbox" id="checkbox" required>
  <input type="submit" value="Submit">
</form>


input[type="text"]:invalid ~ input[type="submit"] {
  display: none;
}

input[type="text"]:valid ~ input[type="submit"] {
  display: block;
}

input[type="checkbox"]:invalid ~ input[type="submit"] {
  visibility: hidden;
}

input[type="checkbox"]:valid ~ input[type="submit"] {
  visibility: visible;
}

Here is a pen

3 Likes

Manipulating the DOM using jQuery is easier than the thing you are talking about (Plain JS).

I bet it was difficult for him to understand what you are saying (if he has no experience with JS) because doing something that you have no idea of how it works or even know the meaning of the terms used in it (like event listener, DOM, document…) is way difficult than gradually learning the different parts and getting to a point where you will be able to apply what you learned.

Unless you provide him with a clear and straight example: Plain JavaScript, jQuery or React and he’s going to apply it every time without understanding it.

React is a complex frontend UI framework: advising him to “just learn that” is not good advice. jQuery is a lot easier, but it’s still another library to learn - you still need to learn those things (DOM, event listener, etc) you talk about, it doesn’t insulate you from that.

And at the end of the day, what the OP is asking for is basic JS, your advice was:

You just need to use jQuery, React or any other JS library.

No, you don’t

@bestdesign very basically, you can do something like this (this is just a very rough basis, it needs to be fleshed out, but if you can understand how this works):

For some HTML

<input id="myInput" type="text" placeholder="type something..."/>
<input id="myCheckbox" type="checkbox" />
<button id="myButton">Click me</button>

Using this example JS:

const myInput = document.querySelector`#myInput`;
const myCheckbox = document.querySelector`#myCheckbox`;
const myButton = document.querySelector`#myButton`;

myButton.addEventListener('click', event => {
  if (myInput.value !== '' && myCheckbox.checked) {
    alert('The text input has a value and the checkbox is checked!');
  } else {
    alert('Either the text input is blank or the checkbox isn\'t checked!');
  }
});

https://codepen.io/DanielCouper/pen/dqLaVQ

Also, HTML will validate things for you without JS, so if you do

<form>
  <label for="textInput">Text input:</label>
  <input id="textInput" type="text" placeholder="type something..." required/>

  <label for="checkboxInput">Checkbox input:</label>
  <input id="checkboxInput" type="checkbox" required/>

  <button type="submit">Submit</button>
</form>

The form will not submit unless they are filled in, this is standard HTML behavior - note the required on the inputs: that’s the thing that does it

3 Likes

I absolutely agree. You don’t need a library or a framework to do what he wants. Using jQuery may be a little more convenient, but not by much. And advising him to use React, if he doesn’t know it, is not helpful. Hell if you are going to use a library why not then just use an actual form validation library.

1 Like

React is difficult I agree, but I also clearly stated ‘OR’ (In the Truth Table: Both, One or the other is true, but not necessarily both).

The way you showed him how to do it in JS, you could have also shown him how to do it in jQuery and it’s much easier and clearer than that.

React on the other hand, while it’s difficult, but learning it is a big plus and it’s in demand these days.

It’s not only about form validation, but deep understanding.

He’s on a FCC forum and I suppose that he is here to learn too and not only to ask for a prepared code that do something and can be done in thousand ways.

JQuery is the same except there are abstractions to learn on top of the basic API. “cleaner” in this case is $ instead of document.querySelector, and on instead of addEventListener, that’s it

const myInput = $`#myInput`;
const myCheckbox = $`#myCheckbox`;
const myButton = $`#myButton`;

myButton.on(`click`, event => {
  if (myInput.value !== '' && myCheckbox.checked) {
    alert('The text input has a value and the checkbox is checked!');
  } else {
    alert('Either the text input is blank or the checkbox isn\'t checked!');
  }
});

So instead of just learning how to do what was asked for, it becomes how to learn how to do what was asked plus learn another API on top of the browser API, because you then need to know what $ is and what on is.

Knowing how to do it using the base APIs is preferable because everything else is an abstraction on top of that

No where in FCC exists how to manipulate the DOM using JavaScript without the use of libraries.

In this case, learning jQuery = learning how to manipulate the DOM on top of nothing & it’s easier.

Good Luck & Happy Coding.

There is no actual DOM manipulation going on in the code shown unless you count showing an alert box as DOM manipulation. Every web developer should know how to use the Web APIs querySelector/querySelectorAll and addEventListener, the rest is just plain javascript. By manipulation, i mean changing, there is interaction with the DOM going on, but no manipulation.

That’s you own understanding of what I said, which doesn’t necessarily mean that I was strictly talking about this particular case.

But the ‘easy’ thing, I think we are done with it. jQuery is clearly easier when it comes to traversing or manipulating the DOM.

Good Luck U2 & Happy Coding.