Homework SourseHello so I need some JavaScript help Ive gotten most of the
Hello so I need some JavaScript help. I\'ve gotten most of the HTML but now I need to code the JavaScript to add the classes up above and store it locally. Pleast help. Let me know if you have any questions.
<html>
<body>
<h1>Class Catalog Maintenance</h1>
<h3>Classes</h3>
<table width=100%>
<tr>
<th>Name</th><th>Number</th><th>Start</th><th>Length</th><th>Weekday</th><th>Time</th><th>Description</th>
</tr>
</table>
<h3>Add a class</h3>
Class Name: <input type=text/><br>
Class Number: <input type=text/><br>
Start Date: <input type=text/><br>
Class length <select></select>
(In Weeks):<br>
Weekday and <select></select> <select></select>
Time:<br>
Class Descrition
<textarea>
</textarea><br>
<button type=submit>Add</button><button type=reset>Clear</button>
</body>
</html>
Solution
Answer
you can get all value fields in
var className = $(\'#className\').val()
var classNumber = $(\'#classNumber\').val()
var classLength = $(\'#classLength\').val()
var StartDate = $(\'#StartDate\').val()
var Weekdays = $(\'Weekdays\').val()
var ClassTiMe = $(\'#ClassTiMe\').val()
var Description = $(\'#Description\').val()
<html>
<head>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"></script>
</head>
<body>
<h1>Class Catalog Maintenance</h1>
<h3>Classes</h3>
<table width=100%>
<tr>
<th>Name</th>
<th>Number</th>
<th>Start</th>
<th>Length</th>
<th>Weekday</th>
<th>Time</th>
<th>Description</th>
</tr>
</table>
<h3>Add a class</h3>
<label id=\"paddingClass\"> Name: <input type=text id=\"className\" /><br></label>
<label id=\"paddingClass\">Class Number: <input type=text id=\"classNumber\" /><br></label>
<label id=\"paddingClass\"> Start Date: <input type=date id=\"StartDate\" /><br></label>
<label id=\"paddingClass\">
Class length: <select id=\"ClassLength\">
<option value>Select</option>
<option value=\"1\">1</option>
<option value=\"2\">2</option>
<option value=\"3\">3</option>
<option value=\"4\">4</option>
<option value=\"5\">5</option>
<option value=\"6\">6</option>
<option value=\"7\">7</option>
<option value=\"8\">8</option>
<option value=\"9\">9</option>
<option value=\"10\">10</option>
</select>(In Weeks):<br>
</label>
Weekday <select id=\"Weekdays\">
<option>Select</option>
<option value=\"1\">Monday</option>
<option value=\"2\">Tuesday</option>
<option value=\"3\">Wednesday</option>
<option value=\"4\">Thursday</option>
<option value=\"5\">Friday</option>
<option value=\"6\">Saturday</option>
<option value=\"7\">Sunday</option>
</select>
<label id=\"paddingClass\">Time:<input type=\"time\" id=\"ClassTiMe\"><br></label>
Class Descrition
<label id=\"paddingClass\">
<textarea id=\"Description\"></textarea><br>
</label>
<label id=\"paddingClass\"><button type=submit onclick=\"saveDetails()\">Add</button></label><label id=\"paddingClass\"><button type=reset onclick=\"clearData()\">Clear</button></label>
</body>
</html>
<script>
function saveDetails() {
var className = $(\'#className\').val()
var classNumber = $(\'#classNumber\').val()
var classLength = $(\'#classLength\').val()
var StartDate = $(\'#StartDate\').val()
var Weekdays = $(\'Weekdays\').val()
var ClassTiMe = $(\'#ClassTiMe\').val()
var Description = $(\'#Description\').val()
alert(\'Details saved Successfully\');
}
function clearData() {
var className = $(\'#className\').val(\"\")
var classNumber = $(\'#classNumber\').val(\"\")
var classLength = $(\'#classLength\').val(\"\")
var StartDate = $(\'#StartDate\').val(\"\")
var Weekdays = $(\'Weekdays\').val(\"\")
var ClassTiMe = $(\'#ClassTiMe\').val(\"\")
var Description = $(\'#Description\').val(\"\")
alert(\'Data clear Successfully\');
}
</script>
<style>
.paddingClass {
padding: 10px 10px 10px 10px
}
</style>
Thank you.
Happy Chegging
