en:web_development:forms:javascript
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
en:web_development:forms:javascript [2022/01/25 07:06] mag created |
en:web_development:forms:javascript [2023/08/16 09:33] (current) |
||
|---|---|---|---|
| Line 608: | Line 608: | ||
| < | < | ||
| <input type=" | <input type=" | ||
| - | | + | |
| + | ==== Required Fields ==== | ||
| + | | ||
| + | * Required fields are generally denoted by a red asterisk, which we can add with a combination of HTML and CSS. | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | color: red; | ||
| + | vertical-align: | ||
| + | }</ | ||
| + | * < | ||
| + | * We can use Javascript to check that all required fields are completed before submitting the form. | ||
| + | * In ' | ||
| + | < | ||
| + | |||
| + | }</ | ||
| + | |||
| + | ==== Text Input ==== | ||
| + | |||
| + | * Let's start with the check for the alias. | ||
| + | < | ||
| + | if (document.getElementsByName(' | ||
| + | message += "The alias is required. "; | ||
| + | } | ||
| + | console.log(message);</ | ||
| + | * < | ||
| + | * We want the first, so we use < | ||
| + | * Then if the content is empty, we want to create a message reminding the user that ' | ||
| + | * Except, we don't want to create it here because we want a message for each of the missing inputs. | ||
| + | * Instead, we create the < | ||
| + | * < | ||
| + | * Save, upload and submit the form without an alias to check that it works. | ||
| + | * Let's do the same for ' | ||
| + | < | ||
| + | message += "The alias is required. "; | ||
| + | } | ||
| + | if (document.getElementsByName(' | ||
| + | message += "The identity is required. "; | ||
| + | } | ||
| + | console.log(message);</ | ||
| + | * We don't need to add a check for ' | ||
| + | |||
| + | ==== Console Commands ==== | ||
| + | * We do need to check for a 4-digit number in the ' | ||
| + | * This is quite tricky, so open your console and type the following. | ||
| + | < | ||
| + | * You'll see some grey text underneath showing you details of the ' | ||
| + | * Press ' | ||
| + | * Press the up arrow to restore the text you just entered. | ||
| + | * You can now add to this text in any way you like. | ||
| + | * Add ' | ||
| + | * Type a number into the field and press ' | ||
| + | * Before we go further, let's give the console a command to assign the value to a variable. | ||
| + | * Press the up arrow to get the value again, and add 'year = ' at the front and ';' | ||
| + | < | ||
| + | * You'll see the value you've entered. | ||
| + | * Type ' | ||
| + | |||
| + | ==== Comparisons ==== | ||
| + | * Now change the number to text and see that it shows < | ||
| + | * We need first to check whether there is any recognisable input at all. | ||
| + | * Try the following in the console. | ||
| + | < | ||
| + | * You should see ' | ||
| + | * < | ||
| + | |||
| + | ==== Check Number Length ==== | ||
| + | * Change the year to a number. | ||
| + | * Type the following into the console and check that it shows the number of digits in your number. | ||
| + | < | ||
| + | * You should recognise this from earlier lessons. Here, < | ||
| + | * We want a message to appear if the number is anything other than 4 digits. Try | ||
| + | < | ||
| + | * You should see the opposite of what we want. It will show ' | ||
| + | < | ||
| + | * You should see that this doesn' | ||
| + | * To make ' | ||
| + | < | ||
| + | * Try a few numbers to ensure that works to your satisfaction. | ||
| + | |||
| + | ==== Combining Expressions ==== | ||
| + | * Now, since we want to write a message in both cases 'if the entered value is empty (not a number) OR if the number is NOT 4 digits' | ||
| + | * We can replace the ' | ||
| + | < | ||
| + | * Although we don't need < | ||
| + | * For comparison, a logical ' | ||
| + | * Try this and use the expression you're most comfortable with. | ||
| + | * We can now add this code into our verifyAddHero function. | ||
| + | < | ||
| + | if ((year == "" | ||
| + | message += "The first appearance is required and must be a 4-digit year. "; | ||
| + | }</ | ||
| + | * Test this to make sure it works as you expect. | ||
| + | |||
| + | ==== Display Message ==== | ||
| + | * Finally, we need to display the message. | ||
| + | < | ||
| + | if (message == "" | ||
| + | console.log(' | ||
| + | } else { | ||
| + | status.firstElementChild.innerHTML = message; | ||
| + | status.style.display = ' | ||
| + | }</ | ||
| + | * I've identified the ' | ||
| + | * If the message is blank (ie all fields have an entry) then we are ready to submit the form (or do further checks) but for the moment, we just display a message in the console. | ||
| + | * If there is a message, then we need to display that for the user. This time we're not removing the message after 10 seconds. | ||
| + | * Save, upload and submit the form with various fields complete. Check that the response is as expected. | ||
| + | |||
| + | ==== Deferred Submission ==== | ||
| + | * Try this code in your console. | ||
| + | < | ||
| + | * You should see a message that says this 'is not a function' | ||
| + | * This is because we've named our form buttons ' | ||
| + | * By naming them ' | ||
| + | * We can easily fix this by renaming our buttons ' | ||
| + | < | ||
| + | < | ||
| + | <input type=" | ||
| + | * Our processing code will no longer recognise the data, though, so we need to reflect this change in the processing code in the 4th line from the top. | ||
| + | < | ||
| + | * Now replace < | ||
| + | < | ||
| + | if (message == "" | ||
| + | document.getElementsByName(' | ||
| + | } else { | ||
| + | status.firstElementChild.innerHTML = message; | ||
| + | status.style.display = ' | ||
| + | }</ | ||
| + | * Save, upload and test that it works as you expect. | ||
| + | |||
| + | ==== Selected Value ==== | ||
| + | * Let's set up the second form to submit new appearances. | ||
| + | < | ||
| + | message = ""; | ||
| + | }</ | ||
| + | * To show how we can check the value of a Select Box, let's first add an empty option to the box in ' | ||
| + | < | ||
| + | <select name=" | ||
| + | <option value=""></ | ||
| + | <?php | ||
| + | // display list of heroes | ||
| + | while($row = $hrslt-> | ||
| + | ?> | ||
| + | <option value="<? | ||
| + | <?php | ||
| + | } | ||
| + | ?> | ||
| + | </ | ||
| + | * See the new empty option in the 3rd line? | ||
| + | * In the console, create a variable called ' | ||
| + | < | ||
| + | * Remember that this is the second field we've named ' | ||
| + | |||
| + | ==== Not Equal ==== | ||
| + | |||
| + | * We can check if the value is empty by typing < | ||
| + | * So we can add code to show a message as follows. | ||
| + | < | ||
| + | var message = ""; | ||
| + | var alias = document.getElementsByName(' | ||
| + | if (alias == "" | ||
| + | message += "The Hero is required. "; | ||
| + | } | ||
| + | }</ | ||
| + | |||
| + | ==== Checkbox Status ==== | ||
| + | * Checking a checkbox is more complex in standard Javascript. You need to check each of the values to see which are checked. | ||
| + | * First we need to set a variable ' | ||
| + | * If you try < | ||
| + | * Try this in your console. | ||
| + | < | ||
| + | * You should see the second movie highlighted and < | ||
| + | * We can check whether this movie is selected by doing this. | ||
| + | < | ||
| + | * Try that yourself. | ||
| + | |||
| + | ==== While Loop ==== | ||
| + | |||
| + | * Now, to loop through all the list items, we can do this. | ||
| + | < | ||
| + | |||
| + | }</ | ||
| + | * There' | ||
| + | * For this, we can use a 'while statement' | ||
| + | * A 'while statement' | ||
| + | * In this case, we need to check that the checkbox actually exists (< | ||
| + | * Our loop is then as follows. | ||
| + | < | ||
| + | n++; | ||
| + | }</ | ||
| + | * Copy this into your ' | ||
| + | * Now, if we actually get all the way through the list and have found nothing checked, we want to add a message, but if we do find something, we want to stop it. | ||
| + | * Our ' | ||
| + | * Create a variable called ' | ||
| + | < | ||
| + | var noAppearance = 0;</ | ||
| + | * We can then increment the number every time we find an unchecked box. | ||
| + | < | ||
| + | noAppearance++; | ||
| + | n++; | ||
| + | }</ | ||
| + | * At the end, we can compare the number of unchecked boxes with the total number of movies. If it's less, then at least one is checked. Otherwise, if noAppearance is equal to the number of movies, we need to show a message. | ||
| + | < | ||
| + | message += "You need to add at least one movie. "; | ||
| + | }</ | ||
| + | * There' | ||
| + | * If the ' | ||
| + | * How do we check the status of ' | ||
| + | < | ||
| + | * The value of the movie name input is < | ||
| + | < | ||
| + | message += "If you check the last box, you need to name the movie."; | ||
| + | }</ | ||
| + | * Add this to your ' | ||
| + | * Finally, we can determine whether to submit the form or show a message in the same way as for the previous form. | ||
| + | < | ||
| + | if (message == "" | ||
| + | console.log(' | ||
| + | } else { | ||
| + | status.firstElementChild.innerHTML = message; | ||
| + | status.style.display = ' | ||
| + | }</ | ||
| + | * Save, upload and test this code. | ||
| + | |||
| + | ==== Sharing Code ==== | ||
| + | * Before we enable the submission, take a look at the whole ' | ||
| + | * If we rewrite the entire code, then find we need to change something (for example, we update the form), we need to change this code twice too. Far better to share the same code for both functions. | ||
| + | * To do this, we create a new function. Let's call it ' | ||
| + | < | ||
| + | var message | ||
| + | var noAppearance = 0; | ||
| + | var alias = document.getElementsByName(' | ||
| + | if (alias == "" | ||
| + | message += "The Hero is required. "; | ||
| + | } | ||
| + | var movieList = document.getElementById(' | ||
| + | var n = 0; | ||
| + | while((n < movieList.length) && (!movieList[n].checked)) { | ||
| + | console.log(n); | ||
| + | noAppearance++; | ||
| + | n++; | ||
| + | } | ||
| + | console.log(noAppearance); | ||
| + | if (noAppearance == movieList.length) { | ||
| + | message += "You need to add at least one movie. "; | ||
| + | } | ||
| + | if ((movieList[movieList.length-2].checked) && (movieList[movieList.length-1].value == "" | ||
| + | message += "If you check the last box, you need to name the movie."; | ||
| + | } | ||
| + | console.log(message); | ||
| + | }</ | ||
| + | * We then call ' | ||
| + | < | ||
| + | // check form data | ||
| + | verifyAppearance(); | ||
| + | |||
| + | // take action - display message or submit | ||
| + | var status = document.getElementById(' | ||
| + | if (message == "" | ||
| + | console.log(' | ||
| + | } else { | ||
| + | status.firstElementChild.innerHTML = message; | ||
| + | status.style.display = ' | ||
| + | } | ||
| + | }</ | ||
| + | * The problem now is that the main function doesn' | ||
| + | * We need to ' | ||
| + | < | ||
| + | * Then we can assign that value to ' | ||
| + | < | ||
| + | * Save, upload and test. Is it working correctly? | ||
| + | |||
| + | ==== Uncheck Checkbox ==== | ||
| + | * We still have to write the code for ' | ||
| + | * It's almost exactly the same as for ' | ||
| + | < | ||
| + | // check form data | ||
| + | var message = verifyAppearance(); | ||
| + | |||
| + | // take action - display message or submit | ||
| + | var status = document.getElementById(' | ||
| + | if (message == "" | ||
| + | console.log(' | ||
| + | } else { | ||
| + | status.firstElementChild.innerHTML = message; | ||
| + | status.style.display = ' | ||
| + | } | ||
| + | }</ | ||
| + | * There is one other difference. We don't want to delete ' | ||
| + | * Rather than checking whether it's checked asking the user to uncheck it, let's provide a better user experience by unchecking it automatically. | ||
| + | * Try this in your console first. | ||
| + | < | ||
| + | * That should set the checkbox to an unchecked state. | ||
| + | * We want to do the same thing in our function, but it doesn' | ||
| + | * We can't easily return that from ' | ||
| + | < | ||
| + | var movieList = document.getElementById(' | ||
| + | var message = verifyAppearance(movieList);</ | ||
| + | * Now ' | ||
| + | < | ||
| + | * And we can delete the line where we assign it in that function. | ||
| + | * Now, we can uncheck the checkbox in ' | ||
| + | < | ||
| + | movieList[movieList.length-2].checked = false;</ | ||
| + | * Save, upload and test that everything works as it should. | ||
| + | * If it does, the final step is to add the commands to submit each form. | ||
| + | < | ||
| + | < | ||
| + | * Save, upload and test again. | ||
| + | * Congratulations. You have now created a functional form. | ||
| + | |||
| + | [[en: | ||
en/web_development/forms/javascript.1643123188.txt.gz · Last modified: 2023/08/16 09:33 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
