Question

In: Computer Science

Create a JavaScript function that will collect the information from the form and verify that it...

  1. Create a JavaScript function that will collect the information from the form and verify that it is the correct type and that there are no blank textboxes.

  2. Save and test the file to ensure that the textbox information is collected and the script is working correctly.

  3. Use the onclick event within the submit button to call this function.

  4. Output validation error messages by writing directly to the

    with the id of "results."

    • (You may want to use alert boxes for testing at first. If you do this, remove the alerts and ensure the message is displayed correctly before submitting.)

  5. Create a loop within the above function that collects the checked value of the radio button group.

  6. Once the value from the radio group is collected,

    • create a function to pass the value for evaluation and return a message for the user based on his or her selected skill type using the

      with the id of "more."

Please I need the same result like as in the image you can copy the link to download the image and below is my code fix that thank you!!!

https://devryu.instructure.com/courses/62607/files/9495251/preview

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript Exercises</title>
<style type="text/css">
body {
   font-family:Verdana, Geneva, sans-serif;
   font-size:100%;
   margin:0;
   padding:0;
}
p {
   color:#900;
   margin-left:20px;
}
div#results {
   background-color:#FF6;
   height:auto;
   width:500px;
   border:1px solid red;
   padding:10px;
   margin-left:20px;
   -moz-box-shadow: 10px 10px 5px #888;
   -webkit-box-shadow: 10px 10px 5px #888;
   box-shadow: 10px 10px 5px #888;
   border-radius:7px;

}
div#more {
   background-color: #39F;
   height:auto;
   width:500px;
   border:1px solid #036;
   padding:10px;
   margin-left:20px;
   margin-top:20px;
   -moz-box-shadow: 10px 10px 5px #888;
   -webkit-box-shadow: 10px 10px 5px #888;
   box-shadow: 10px 10px 5px #888;
   color:#CF0;

}
#form1
{
   padding: 10px;
   width: 500px;
   border-style: solid;
   border-color: #063;
   border-radius: 15px;
   -moz-box-shadow: 10px 10px 5px #888;
   -webkit-box-shadow: 10px 10px 5px #888;
   box-shadow: 10px 10px 5px #888;
   background-color: #CFF;
   margin:20px;
}
</style>
<script type="text/javascript">
function validateForm(){
  
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
  
  
if(name == "" || name == null){//checking for null or empty string
resultsMsg("Hey, you forgot to fill in your name!");
}else{
  
if(age == "" || age == null || isNaN(age)){
resultsMsg("Age is required!");
}else{
  
if(!getSkill()){
resultsMsg("Please select a skill");
}else{
resultsMsg("Success, you selected " + getSkill());
}// end else
}

}//end else
}//end function
  
function getSkill(){
var isChecked = false; // assume no button is checked
var theSelection;
var skills = document.getElementsByName('skillset');// returns an array
for (var i=0; i < skills.length; i++){
if(skills[i].checked){
isChecked = true;
theSelection = skills[i].value;
break; //leave the loop since only one can be checked
}// end if
}// end for
if(isChecked){
return theSelection;
}else{
return false;
}//end else
  
}// end function
  
function resultsMsg(S){
var resultsBox = document.getElementById("results");
//reset to blank by overwriting
resultsBox.innerHTML= S;
}//end function
  
</script>
</head>

<body>

<p>First Paragraph</p>
<p>Second Paragraph</p>
<form name="form1" id="form1" action="" method="post">
  
<label>First Name:
<input type="text" id="name" name="name">
</label>
<br> <!-- new line here -->
<label>Your Age: &nbsp;
<input type="text" id="age" name="age">
</label>
<br> <!-- new line here -->
  
  
<input type="radio" name="skillset" value="Designer">Designer<br>
<input type="radio" name="skillset" value="Developer">Developer<br>
<input type="radio" name="skillset" value="Programmer">Programmer<br>
<input type="radio" name="skillset" value="Artist">Artist<br>
  
<input type="button" value="Submit" onclick="validateForm();"> &nbsp; &nbsp; <input type="reset" value="Clear Form">
  
  
</form>
<div id="results"></div>
<div id="more">You did not selected a Skill</div>

</body>
</html>

Solutions

Expert Solution

Please upvote if you are able to understand this and if there is any query do mention it in the comment section.

CODE:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>JavaScript Exercises</title>

<style type="text/css">

body {

   font-family:Verdana, Geneva, sans-serif;

   font-size:100%;

   margin:0;

   padding:0;

}

p {

   color:#900;

   margin-left:20px;

}

div#results {

   background-color:#FF6;

   height:auto;

   width:500px;

   border:1px solid red;

   padding:10px;

   margin-left:20px;

   -moz-box-shadow: 10px 10px 5px #888;

   -webkit-box-shadow: 10px 10px 5px #888;

   box-shadow: 10px 10px 5px #888;

   border-radius:7px;

}

div#more {

   background-color: #39F;

   height:auto;

   width:500px;

   border:1px solid #036;

   padding:10px;

   margin-left:20px;

   margin-top:20px;

   -moz-box-shadow: 10px 10px 5px #888;

   -webkit-box-shadow: 10px 10px 5px #888;

   box-shadow: 10px 10px 5px #888;

   color:#CF0;

}

#form1

{

   padding: 10px;

   width: 500px;

   border-style: solid;

   border-color: #063;

   border-radius: 15px;

   -moz-box-shadow: 10px 10px 5px #888;

   -webkit-box-shadow: 10px 10px 5px #888;

   box-shadow: 10px 10px 5px #888;

   background-color: #CFF;

   margin:20px;

}

</style>

<script type="text/javascript">

function validateForm(){

    //fetching the respective textboxes from their ids

    var name = document.getElementById("name").value;

    var age = document.getElementById("age").value;

    if(name == "" || name == null){//checking for null or empty string

        resultsMsg("Hey, you forgot to fill in your name!");

    } else if (!isNaN(name)) {//if name is a number

        resultsMsg("Name is invalid!")

    } else {

        if(age == "" || age == null /* || isNaN(age) */){

            resultsMsg("Age is required!");

        } else if (isNaN(age)) {//checking if age is not a number

            resultsMsg("Age is invalid!");

        } else {

            if(!getSkill()){//if there is no skill selected

                resultsMsg("Please select a skill");

            } else {

                resultsMsg("Success, you selected " + getSkill());

            }// end else

        }

    }//end else

}//end function

  

function getSkill() {

    var isChecked = false; // assume no button is checked

    var theSelection;

    var skills = document.getElementsByName('skillset');// returns an array

    for (var i=0; i < skills.length; i++) {//looping through all skills

        if(skills[i].checked) {

            isChecked = true;

            theSelection = skills[i].value;//the one selected by the user

            break; //leave the loop since only one can be checked

        }// end if

    }// end for

    if(isChecked) {

        return theSelection;//returning the selected skill

    } else {

        return resultsMsg("You did not selected a skill");

    }//end else

}// end function

  

function resultsMsg(S){

    var resultsBox = document.getElementById("results");//reset to blank by overwriting

    resultsBox.innerHTML= S;

}//end function

  

</script>

</head>

<body>

<p>First Paragraph</p>

<p>Second Paragraph</p>

<form name="form1" id="form1" action="" method="post">

  

<label>First Name:

<input type="text" id="name" name="name">

</label>

<br> <!-- new line here -->

<label>Your Age: &nbsp;

<input type="text" id="age" name="age">

</label>

<br> <!-- new line here -->

<!-- creating all the skills with radio buttons     -->

<input type="radio" name="skillset" value="Designer">Designer<br>

<input type="radio" name="skillset" value="Developer">Developer<br>

<input type="radio" name="skillset" value="Programmer">Programmer<br>

<input type="radio" name="skillset" value="Artist">Artist<br>

  

<input type="button" value="Submit" onclick="validateForm();"> &nbsp; &nbsp; <input type="reset" value="Clear Form">  

</form>

<div id="results"></div>

<!-- <div id="more">You did not selected a Skill</div> -->

</body>

</html>

OUTPUT:

If this was supposed to be done in any other way or there is still any change required in this then plese mention it in the comment section otherwise please upvote.

venereology answered 11 months ago
Next > < Previous

Related Solutions

If it needs more information be specific. JavaScript Functions Create the makeBranches() function that will be...
If it needs more information be specific. JavaScript Functions Create the makeBranches() function that will be used to append node branches to the node tree diagram. The function will have two parameters named treeNode and nestedList. The treeNode parameter stores the current node from the source article and the nestedList parameter stores the structure of the node tree displayed in the web page. Add the commands described in the steps below. Each time the makeBranches() function is called, it is...
I'm trying to create a javascript order form that outputs the items/cost/quantity in the form of...
I'm trying to create a javascript order form that outputs the items/cost/quantity in the form of a table. I have to use a for loop to accomplish this, but I'm not sure where to place the loop & what it needs to reference <!DOCTYPE html> <head> <meta charset="utf-8" /> <style media="screen"> div{ background-color: #f7df3e; border: 1px solid black; padding: 10px; margin: 30px; } h1{ text-align: center; } </style> <script type="text/javascript"> var items = []; var quans = []; var costs...
Do for javascript. Create a form with the following inputs. L -> Loan Amount in $'s,...
Do for javascript. Create a form with the following inputs. L -> Loan Amount in $'s, i -> Interest Rate %/year, n -> Number of Compounding Periods months Given the following formula to solve for the monthly payments mp = ( i * (1+i)^n * L ) / ( (1+i)^n - 1 ) Output the results L = $, i = %/month , n = months mp = $ And a table which lists the remaining loan amount and interest...
Write a javascript program according to the follow requirements: Create a function that converts Fahrenheit to...
Write a javascript program according to the follow requirements: Create a function that converts Fahrenheit to Celsius. It takes a single argument which represents degrees in Fahrenheit. It converts it and returns the degrees in Celsius. Create another function that converts Celsius to Fahrenheit. It takes a argument in Celsius and returns the degrees in Fahrenheit. Implement the function convert(isFtoC, from, to) below. It takes the following three arguments: isFtoC: a boolean that is true if degrees must be converted...
[Javascript] Create a function that gets the total amount and percentage of covid case data for...
[Javascript] Create a function that gets the total amount and percentage of covid case data for each Age Group in the covid cases data set(which contains the property "Age Group" in each case array). Age Groups: 'younger than 18', 'between 19 to 28 Years', 'between 29 to 38 Years','between 39 to 48 Years','between 49 to 58 Years','between 59 to 68 Years','between 69 to 78 Years','between 79 to 88 Years', and'older than 89' the function getSummaryOfAges(data) should return an Object with...
Write a JavaScript function to get the values of form containing the following input fields: fname...
Write a JavaScript function to get the values of form containing the following input fields: fname lname address city state
A) Lymphatic capillaries collect ______ from the tissue. They then merge to form lymphatic ________________ which...
A) Lymphatic capillaries collect ______ from the tissue. They then merge to form lymphatic ________________ which then merge to form lymphatic __________________. These larger lymphatic vessels merge to form one of two ducts: the __________________ and the ________________________. B) What part of the body does the right lymphatic duct collect from? What part of the body does the thoracic duct collect from? Which blood vessels do the lymphatic ducts empty into? What are lymphatic nodules? Clusters of lymphatic nodules can...
USING JAVASCRIPT Create a file name dayOfWeek.js and write an arrow function named dayOfWeek that accepts...
USING JAVASCRIPT Create a file name dayOfWeek.js and write an arrow function named dayOfWeek that accepts a Date object dateStr and returns a string that is the day of the week in English form (i.e. “Sunday”, “Monday”, etc.). Test your function by creating a date object that is a significant date to you (such as your birthday) and passing that date object to your function. Test your function at least twice with two different dates. Submit the dayOfWeek.js file to...
(Javascript) Modify the JavaScript file to implement a function named calculateTotalPrice. At the bottom of the...
(Javascript) Modify the JavaScript file to implement a function named calculateTotalPrice. At the bottom of the file are sample inputs and outputs to test your implementation. /* * The price per ticket depends on the number of tickets * purchased, there are 4 ticket pricing tiers. Given the * number of tickets return the total price, formatted to * exactly two decimal places with a leading dollar sign. * Tier 1: *   Minimum number of tickets: 1 *   Price per...
Modify the code so that it provides a web form to collect the cookie values from...
Modify the code so that it provides a web form to collect the cookie values from the users. In other words, you will add two text boxes where users will enter the cookie name and the cookie value. You will also add a submit button, which lets users to send the cookie values to the server. The page should display the previous cookie values when it is loaded. <!DOCTYPE html> <?php     $cookie_name = "user";     $cookie_value = "John Doe";...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT