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?
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.
So when that button is clicked (so you add an event listener to the button), you want to select the two inputs:
value
property is not an empty string.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
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!');
}
});
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
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.
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.