Question

In: Computer Science

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

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.
Save and test the file to ensure that the textbox information is collected and the script is working correctly.
Use the onclick event within the submit button to call this function.
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.)
Create a loop within the above function that collects the checked value of the radio button group.
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> 
<label>Your Age:  
<input type="text" id="age" name="age">
</label>
<br> 


<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();">     <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>

<title>JavaScript Exercises</title>

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>

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>

<label>First Name:

</label>

<label>Your Age:  

</label>

<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>

</form>

</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 4 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

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...

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...

(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...

The code to create a Search/Filter Data with Javascript or html from html page.

Subjects