ZuoTi.Pro
Question

Student Registration System IFT 458 SPRING 2018 Student Regisration Form Student Id Student Name Student DOB Student Age SearConsider the attached Registration form. Use jQuery to:

1) Change the "Search" link on the left to a button that when clicked, hide all the fields on the form and display the text "This is a search feature..."

2) Display "required" in every input field upon loading the page

3) When the user fills the form and clicks "Login", the values inputted should be displayed in the empty row (under Login) of the page. The display should be in the form:

Student ID:

Student Name:

etc.

4) Modify the form to allow the student to choose

a) A program. Possible programs are IFT, EGR, SER, CSE, and GIT. A student can only be registered in ONE program at time.

b) A campus. Possible campuses are: Poly, Main, West, Downtown. A student can be taking classes in more than one campuses

What to submit?

Submit a Word or PDF file that includes all your codes. You can copy and paste the HTML/CSS/JavaScript/jQuery codes that perform the above four (4) tasks into a single document.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

1.

<html>
<head>
<title>Welcome Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("body").text("This is a search feature...");
});
});
</script>
</head>
<body bgcolor="khaki">
<br><br><br><br><br>
<center>
<font face="arial black" size="4">
Student Registration System<br>
IFT 458 SPRING 2018</font><br>
<br>
<hr size="4" color="blue"/>
<br><br>
<table border="1" width="800" height="300">
<tr>
<th align="center" colspan="3"> Student Regisration Form </th>
</tr>
<tr height="150">
  
<td width="20%"><button class="btn1">Search</button></td>
  
<td widht="60%">

<form>
<table>
<tr>
<td>Student Id</td><td><input type="text" />*</td></tr>

<tr><td>Student Name</td><td><input type="text" /></td></tr>

<tr><td>Student DOB</td><td><input type="datetime" /></td></tr>

<tr><td>Student Age</td><td><input type="number" /></td></tr>

<tr><td colspan="2" align="center"><input style="font-face :'Comic Sans MS';font-size:larger;height: 30px; width:90px;background-color: yellow;color:red;" type="submit" value="Login"/></td>
</tr>
</table>
</form>

</td>
<td widht="20%" colspan="2"></td>
</tr>
<tr>
<td align="center" colspan="3"></td>
</tr>

</table>

<br><br><br>
<hr size="4" color="blue"/>

</center>

</body>
</html>

Student Registration System IFT 458 SPRING 2018 Student Regisration Form 3- <html> <head> <title>Welcome Page</title> 6 <scri

2.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome Page</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("body").text("This is a search feature...");
});
});
</script>
</head>
<body bgcolor="khaki">
<br><br><br><br><br>
<center>
<font face="arial black" size="4">
Student Registration System<br>
IFT 458 SPRING 2018</font><br>
<br>
<hr size="4" color="blue"/>
<br><br>
<table border="1" width="800" height="300">
<tr>
<th align="center" colspan="3"> Student Regisration Form </th>
</tr>
<tr height="150">
  
<td width="20%"><button class="btn1">Search</button></td>
  
<td widht="60%">

<form id="myform">

  
<label>Student ID </label>
<input id="sid" name="sid">
<br>
<label>Student Name </label>
<input id="sname" name="sname">
<br>
<label>Student DOB </label>
<input id="sdob" name="sdob">
<br>
<label>Student age </label>
<input id="sage" name="sage">
<br>
<input type="submit" value="Login">

</form>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
sid: {
required: true,
},
sname: {
required: true,
},
sdob: {
required: true,
},
sage: {
required: true,
}
  
}
});
</script>
</body>
</html>

<label>Student age </label> <input id=sage name=sage> <br> <input typesubmit value=Login> </form> Student Registratio

3.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome Page</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("body").text("This is a search feature...");
});
});
</script>
</head>
<body bgcolor="khaki">
<br><br><br><br><br>
<center>
<font face="arial black" size="4">
Student Registration System<br>
IFT 458 SPRING 2018</font><br>
<br>
<hr size="4" color="blue"/>
<br><br>
<table border="1" width="800" height="300">
<tr>
<th align="center" colspan="3"> Student Regisration Form </th>
</tr>
<tr height="150">
  
<td width="20%"><button class="btn1">Search</button></td>
  
<td widht="60%">

<form id="myform" method='post' class='myform'>

  
<label>Student ID </label>
<input id="sid" name="sid">
<br>
<label>Student Name </label>
<input id="sname" name="sname">
<br>
<label>Student DOB </label>
<input id="sdob" name="sdob">
<br>
<label>Student age </label>
<input id="sage" name="sage">
<br>
<input type="submit" value="Login">

</form>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
sid: {
required: true,
},
sname: {
required: true,
},
sdob: {
required: true,
},
sage: {
required: true,
}
  
}
});
</script>

<script>
$('.myform').submit(function(e) {
  
e.preventDefault();
  
// $(this).serialize(); will be the serialized form
$(this).append($(this).serialize() + '<br />');
});
</script>

</body>
</html>

V just for the demos, avoids form submit jQuery.validator.setDefaults({ debug: true, success: valid }); $(#myform ).valid

0 0
Add a comment
Know the answer?
Add Answer to:
Consider the attached Registration form. Use jQuery to: 1) Change the "Search" link on the left...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search"...

    i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search" link on the left to a button that when clicked, hide all the fields on the form and display the text "This is a search feature..." 3) When the user fills the form and clicks "Login", the values inputted should be displayed in the empty row (under Login) of the page. The display should be in the form: Student ID: <input value> Student Name:...

  • URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

    URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to download the uncompressed latest version of jQuery Copy the jQuery.x.x.x.js file in the folder and specified as source file. Task 2: Download and install HTML-Kit 1. Navigate to htmlkit.com. 2. Click Download HTML-Kit 292. After it downloads, launch HKSetup.exe. Choose Full installation (the default) Uncheck Yes, download and install HTML-Kit Tools Trial. 6. Click Next>Finish. Task 3: Creating a Simple jQuery Application Launch HTML-Kit....

  • This is a website picture The html and css code is as follow And my problem is as follow use the php and mysql Northwind Customer Database Search List Records All Records CustomerName v CustomerName...

    This is a website picture The html and css code is as follow And my problem is as follow use the php and mysql Northwind Customer Database Search List Records All Records CustomerName v CustomerName ContactName Address City PostalCode Search O ASC DESC List All Records Insert Record Country List City CustomerName ContactName Address City PostalCode Country List City Find by IID Find Insert 1 <! DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http:L 3-<head> 4 Kmeta http-equiv-"Content-Type" content-"text/html; charset-utf-8" />...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • Form Processing HTML One of the most ubiquitous uses of JavaScript is validating form data on...

    Form Processing HTML One of the most ubiquitous uses of JavaScript is validating form data on the client side before it is submitted to the server. It is done everywhere because it is fast and it gives you a great deal of flexibility in how you handle errors insofar as the GUI is concerned. Attached is an image of some code I wrote (so Blackboard can't mess it up). Some things to notice that will help you with the lab....

  • New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /*...

    New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /* New Perspectives on HTML5, CSS3, and JavaScript 6th Edition Tutorial 13 Case Problem 3 Filename: mas_register.js Author: Date: Function List ============= formTest() Performs a validation test on the selection of the conference session package and the conference discount number calcCart() Calculates the cost of the registration and saves data in session storage    writeSessionValues() Writes data values from session storage in to the registration...

  • CS 2050 – Programming Project # 1 Due Date: Session 3 (that is, in one week!)....

    CS 2050 – Programming Project # 1 Due Date: Session 3 (that is, in one week!). Can be resubmitted up to two times until Session 6 if your first version is submitted by session 3. In this project, you create two classes for tracking students. One class is the Student class that holds student data; the other is the GradeItem class that holds data about grades that students earned in various courses. Note: the next three projects build on this...

  • Jubail University College Computer Science & Engineering Department Assessmen Assignment Course Code CS120/C5101 t Type: 1...

    Jubail University College Computer Science & Engineering Department Assessmen Assignment Course Code CS120/C5101 t Type: 1 Semester: 403 Course Title Programming Submission 27-06-2020 Total Points 8 Date Submission Instructions: • This is an individual assignment. • Please submit your program (Java fle) in Blackboard. You can create one java project, named as Assignment1_id and add separate java file for each question. You can name your javá files as 01.02.... etc. • Make sure that you include your student ID name...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT