Hello so I need some JavaScript help. I\'ve gotten most of the HTML but now I ne
ID: 3776270 • Letter: H
Question
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>
Explanation / Answer
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>Add</button></label><label id="paddingClass"><button type=reset>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
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.