<!-- Boostrap JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-latest3.3.1.min.js"><js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I want to trigger one function every time that the user types something in one of my desire elements (username, password or confirmation) for that, I try to implement this line of code:
//Disabling or enabling button depending on the inputs
$('#username, #password, #confirmation').on('input', () => {
//Enabling button only if inputs are valid
if ($('#username').valid && $("#password").valid && $("#confirmation").valid) {
if ($('#button').prop('disabled')) $('#button').prop('disabled', false);
}
else if (!$('#button').prop('disabled')) $('#button').prop('disabled', true);
})
This line:
$('#username, #password, #confirmation').on('input', () => {
Seems don't work. Maybe my syntax Is it wrong?? every time that I try to implement this line, I have the same output:
register.js:111 Uncaught TypeError: $(...).on(...) is not a function
at HTMLDocument.<anonymous> (register.js:111)
at j (jquery-latest.min.js:2)
at Object.fireWith [as resolveWith] (jquery-latest.min.js:2)
at Function.ready (jquery-latest.min.js:2)
at HTMLDocument.J (jquery-latest.min.js:2)
I'm sure that the problem occurs because the line that I mentioned because before that line, I didn't have any error, start to appears when I try to implement that three elements and one event handler functionality
I search a little about the problem and the possible reasons that I encountered were:
- I'm using an older version of jQuery.
- I'm using a library that makes use of the $ symbol, and I'm including that library after jQuery
Nevertheless, neither reason is my case, I'm sure about that, you can see how I import my jQuery code:
<!-- Boostrap JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Some idea about my problem?? Maybe I have to implement this code in a different way, can someone help me to do that in good practice way?
For those that want to see all my code, here it is:
https://gist.github.com/HereFrank/c1dd574e7d7bcf57129df72310756731
You can skip the helper.js file, I don't think it's relevant to the problem, but I gave it to you to check anyway if you like.
I want to trigger one function every time that the user types something in one of my desire elements (username, password or confirmation) for that, I try to implement this line of code:
//Disabling or enabling button depending on the inputs
$('#username, #password, #confirmation').on('input', () => {
//Enabling button only if inputs are valid
if ($('#username').valid && $("#password").valid && $("#confirmation").valid) {
if ($('#button').prop('disabled')) $('#button').prop('disabled', false);
}
else if (!$('#button').prop('disabled')) $('#button').prop('disabled', true);
})
This line:
$('#username, #password, #confirmation').on('input', () => {
Seems don't work. Maybe my syntax Is it wrong?? every time that I try to implement this line, I have the same output:
register.js:111 Uncaught TypeError: $(...).on(...) is not a function
at HTMLDocument.<anonymous> (register.js:111)
at j (jquery-latest.min.js:2)
at Object.fireWith [as resolveWith] (jquery-latest.min.js:2)
at Function.ready (jquery-latest.min.js:2)
at HTMLDocument.J (jquery-latest.min.js:2)
I'm sure that the problem occurs because the line that I mentioned because before that line, I didn't have any error, start to appears when I try to implement that three elements and one event handler functionality
I search a little about the problem and the possible reasons that I encountered were:
- I'm using an older version of jQuery.
- I'm using a library that makes use of the $ symbol, and I'm including that library after jQuery
Nevertheless, neither reason is my case, I'm sure about that, you can see how I import my jQuery code:
<!-- Boostrap JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Some idea about my problem?? Maybe I have to implement this code in a different way, can someone help me to do that in good practice way?
I want to trigger one function every time that the user types something in one of my desire elements (username, password or confirmation) for that, I try to implement this line of code:
//Disabling or enabling button depending on the inputs
$('#username, #password, #confirmation').on('input', () => {
//Enabling button only if inputs are valid
if ($('#username').valid && $("#password").valid && $("#confirmation").valid) {
if ($('#button').prop('disabled')) $('#button').prop('disabled', false);
}
else if (!$('#button').prop('disabled')) $('#button').prop('disabled', true);
})
This line:
$('#username, #password, #confirmation').on('input', () => {
Seems don't work. Maybe my syntax Is it wrong?? every time that I try to implement this line, I have the same output:
register.js:111 Uncaught TypeError: $(...).on(...) is not a function
at HTMLDocument.<anonymous> (register.js:111)
at j (jquery-latest.min.js:2)
at Object.fireWith [as resolveWith] (jquery-latest.min.js:2)
at Function.ready (jquery-latest.min.js:2)
at HTMLDocument.J (jquery-latest.min.js:2)
I'm sure that the problem occurs because the line that I mentioned because before that line, I didn't have any error, start to appears when I try to implement that three elements and one event handler functionality
I search a little about the problem and the possible reasons that I encountered were:
- I'm using an older version of jQuery.
- I'm using a library that makes use of the $ symbol, and I'm including that library after jQuery
Nevertheless, neither reason is my case, I'm sure about that, you can see how I import my jQuery code:
<!-- Boostrap JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Some idea about my problem?? Maybe I have to implement this code in a different way, can someone help me to do that in good practice way?
For those that want to see all my code, here it is:
https://gist.github.com/HereFrank/c1dd574e7d7bcf57129df72310756731
You can skip the helper.js file, I don't think it's relevant to the problem, but I gave it to you to check anyway if you like.
Why I can't make one event handler to three elements with its ID? [JQuery]
I want to trigger one function every time that the user types something in one of my desire elements (username, password or confirmation) for that, I try to implement this line of code:
//Disabling or enabling button depending on the inputs
$('#username, #password, #confirmation').on('input', () => {
//Enabling button only if inputs are valid
if ($('#username').valid && $("#password").valid && $("#confirmation").valid) {
if ($('#button').prop('disabled')) $('#button').prop('disabled', false);
}
else if (!$('#button').prop('disabled')) $('#button').prop('disabled', true);
})
This line:
$('#username, #password, #confirmation').on('input', () => {
Seems don't work. Maybe my syntax Is it wrong?? every time that I try to implement this line, I have the same output:
register.js:111 Uncaught TypeError: $(...).on(...) is not a function
at HTMLDocument.<anonymous> (register.js:111)
at j (jquery-latest.min.js:2)
at Object.fireWith [as resolveWith] (jquery-latest.min.js:2)
at Function.ready (jquery-latest.min.js:2)
at HTMLDocument.J (jquery-latest.min.js:2)
I'm sure that the problem occurs because the line that I mentioned because before that line, I didn't have any error, start to appears when I try to implement that three elements and one event handler functionality
I search a little about the problem and the possible reasons that I encountered were:
- I'm using an older version of jQuery.
- I'm using a library that makes use of the $ symbol, and I'm including that library after jQuery
Nevertheless, neither reason is my case, I'm sure about that, you can see how I import my jQuery code:
<!-- Boostrap JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Some idea about my problem?? Maybe I have to implement this code in a different way, can someone help me to do that in good practice way?