If you type into the idea field of this form, you'll see the count of how many characters you have typed. You can see the code on how to make this happen below. Also, it's good to note the id of the submit button, the text field, the text element showing the number of characters, and the div that wraps it.
The code to show how many characters are remaining in an input:
| // Show the number of characters remaining | |
| // When the document is ready to execute code | |
| $(document).ready(function() { | |
| // Set the max number of characters | |
| let textMax = 280; | |
| // Write the max number of characters to the element witn an id of #charcount | |
| $('#charcount').html(textMax); | |
| // When someone types into the input with an id of #title | |
| $('#idea').keyup(function() { | |
| // Set a variable of texTLength to the length of the input with an id of #idea | |
| let textLength = $('#idea').val().length; | |
| // Set a variable that is the max length of text - the current length | |
| let textRemaining = textMax - textLength; | |
| // Write the number of characters remaining to the #charcount element | |
| $('#charcount').html(textRemaining); | |
| // Set a backgroundColor variable | |
| let backgroundColor = "#38d996"; | |
| // if the text is less than or equal to 5 characters set a warning color | |
| if (textRemaining <= 20) { | |
| backgroundColor = "#ff6382"; | |
| } | |
| // else if the count is equal to 40 reminaing or lower set a caution color | |
| else if (textRemaining <= 100) { | |
| backgroundColor = "#ffab9d"; | |
| } | |
| // Set the background color of the element with an id of charbox based on the rules above | |
| document.getElementById('charbox').style.backgroundColor = backgroundColor; | |
| }); | |
| }); |
Pass the name field value to the success state:
| // Pass form input values through to the success state of the form | |
| // When a user clicks on the submit button run this function | |
| $('#submitButtonId').click(function() { | |
| // set a variable of name that is equal to the name field | |
| let formName = $('#name').val(); | |
| // find the span in the success state with an id of namesuccess | |
| //and write the value that was in the name field | |
| $('#namesuccess').html(formName); | |
| }); |