How can I activate an animation once all inputs are filled?
Question
I have 3 inputs inside a div and a submit button. I've loaded in an animation from a library and added it to the submit button.
What I want is the submit button to animate once all three inputs have some kind of value in them (at least one character).
Below is what I have so far, but it's not working. What do I need to add or change?
$allInputFields = $('#inputFields.inputSection input') $submitButton = $('#submitButton') $submitButton.removeClass('animate__animated', 'animate__tada') for (let i = 0; i < $allInputFields; i++) { if ($allInputFields[i].value) { $submitButton.toggleClass('animate__animated', 'animate__tada') } }
<head> <.-- Animation from Animate:css --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head> <body> <div id="inputFields"> <div class="inputSection"> <h3>input 1</h3> <input> </div> <div class="inputSection"> <h3>input 2</h3> <input> </div> <div class="inputSection"> <h3>input 3</h3> <input> </div> </div> <br> <br> <div> <button id="submitButton" class="animate__animation animate__wobble">Submit</button> </div> </body>
1 answers
solution1
0 2021-05-07 04:11:40
You can use .each loop to check if any input is empty or not depending on this addClass animate__tada or remove it if added previously.
Demo Code :
$(".inputSection input").on("change", function() { var flag = true; //set flag $("#submitButton").removeClass('animate__tada').addClass('animate__animated') //add default class //loop through each inputs $("#inputFields.inputSection input").each(function() { if ($(this).val().trim() == "") { flag = false; //if empty return false //exit } }) //if true if (flag) { $("#submitButton").removeClass('animate__animated').addClass('animate__tada') //all ok... } })
.animate__animated { color: red; }.animate__tada { color: blue }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <.-- Animation from Animate:css --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <div id="inputFields"> <div class="inputSection"> <h3>input 1</h3> <input> </div> <div class="inputSection"> <h3>input 2</h3> <input> </div> <div class="inputSection"> <h3>input 3</h3> <input> </div> </div> <br> <br> <div> <button id="submitButton" class="animate__animation animate__wobble">Submit</button> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.