en:web_development:forms:javascript
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
en:web_development:forms:javascript [2022/01/26 17:04] mag |
en:web_development:forms:javascript [2023/08/16 09:33] (current) |
||
|---|---|---|---|
| Line 734: | Line 734: | ||
| < | < | ||
| if (message == "" | if (message == "" | ||
| - | document.getElementsByName(' | + | document.getElementsByName(' |
| } else { | } else { | ||
| status.firstElementChild.innerHTML = message; | status.firstElementChild.innerHTML = message; | ||
| Line 796: | Line 796: | ||
| * For this, we can use a 'while statement' | * For this, we can use a 'while statement' | ||
| * A 'while statement' | * A 'while statement' | ||
| - | * In this case, we need to check that the checkbox actually exists (< | + | * In this case, we need to check that the checkbox actually exists (< |
| * Our loop is then as follows. | * Our loop is then as follows. | ||
| < | < | ||
| Line 816: | Line 816: | ||
| message += "You need to add at least one movie. "; | 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. | * Finally, we can determine whether to submit the form or show a message in the same way as for the previous form. | ||
| < | < | ||
| if (message == "" | if (message == "" | ||
| - | | + | |
| } else { | } else { | ||
| status.firstElementChild.innerHTML = message; | status.firstElementChild.innerHTML = message; | ||
| status.style.display = ' | 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.1643245440.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
