HomeworkLib
Question

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: <input value>

Html code

<html>
<head>
   <title>Welcome Page</title>
   <script src="student_form.js"></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%"><a href="search.html">Search</a></td>


               <td widht="60%">

                   <form name="studentform" onsubmit="return validateForm()">
                       <table>
                           <tr>
                               <td>Student Id</td><td><input type="text" name="Student ID" required>*required</td></tr>

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

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

                               <tr><td>Student Age</td><td><input type="number" name="Student Age" required>*required</td></tr>
                              
                               <td>Programs</td>
                               <td><input type="radio" name="Progams" value="IFT"> IFT<input type="radio" name="Progams" value="EGR"> EGR<input type="radio" name="Progams" value="SER">SER<input type="radio" name="Progams" value="CSE">CSE<input type="radio" name="Progams" value="GIT">GIT</td></tr>
                               <td>Campus</td>
                               <td><input type="checkbox" name="Campus" value="Poly"> Poly<input type="checkbox" name="Campus" value="Main"> Main<input type="checkbox" name="Campus" value="West"> West<input type="checkbox" name="Campus" value="Downtown"> Downtown</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>

javascript code:

function validateForm(){
   var x = document.forms["studentform"]["Student ID"].value;
   if (x ==""){
   alert("Please enter student id");
   return false;
   }
}

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

Homework Answers

Answer #1

HTML -

<html>

<head>

<title>Welcome Page</title>

<script src="student_form.js"></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%"><input type="button" value="Search" onclick="searchClick()" href="search.html"></td>


<td widht="60%">

<form name="studentform" id="studentFormData">

<p id="searchFeature" style="visibility: hidden">This is a search feature...</p>

<table id="formTable">

<tr>

<td>Student Id</td>

<td><input type="text" name="Student ID" required>*required</td>

</tr>

<tr>

<td>Student Name</td>

<td><input type="text" name="Student Name" required>*required</td>

</tr>

<tr>

<td>Student DOB</td>

<td><input type="datetime" name="Student DOB" required>*required</td>

</tr>

<tr>

<td>Student Age</td>

<td><input type="number" name="Student Age" required>*required</td>

</tr>

<td>Programs</td>

<td><input type="radio" name="Progams" value="IFT"> IFT<input type="radio" name="Progams"

value="EGR"> EGR<input type="radio" name="Progams" value="SER">SER<input

type="radio" name="Progams" value="CSE">CSE<input type="radio" name="Progams"

value="GIT">GIT</td>

</tr>

<td>Campus</td>

<td><input type="checkbox" name="Campus" value="Poly"> Poly<input type="checkbox" name="Campus"

value="Main"> Main<input type="checkbox" name="Campus" value="West"> West<input type="checkbox"

name="Campus" value="Downtown"> Downtown</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="button" onclick="displayValue()" value="Login" /></td>

</tr>

</table>

</form>

</td>

<td widht="20%" colspan="2"></td>

</tr>

<tr>

<td align="center" colspan="3">

<!-- displaying studedent values -->

<table id="displayStudentDetials" style="visibility:visible">

<tr>

<td>Student ID</td>

<td>

<p id="studentID"></p>

</td>

</tr>

<tr>

<td>Student Name</td>

<td>

<p id="studentName"></p>

</td>

</tr>

<tr>

<td>Student DOB</td>

<td>

<p id="studentDOB"></p>

</td>

</tr>

<tr>

<td>Student Age</td>

<td>

<p id="studentAge"></p>

</td>

</tr>

</table>

</td>

</tr>

</table>

<br><br><br>

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

</center>

</body>

</html>

Javascript -

<script>

function validateForm() {

var x = document.forms["studentform"]["Student ID"].value;

if (x == "") {

alert("Please enter student id");

return false;

}

document.getElementById('studentID').value = x;

return false;

}

//method to display student value

function displayValue() {

var x = document.forms["studentform"]["Student ID"].value;

var y = document.forms["studentform"]["Student Name"].value;

var z = document.forms["studentform"]["Student DOB"].value;

var w = document.forms["studentform"]["Student Age"].value;

document.getElementById("studentID").innerHTML = x;

document.getElementById("studentName").innerHTML = y;

document.getElementById("studentDOB").innerHTML = z;

document.getElementById("studentAge").innerHTML = w;

}

//when search button clicks

function searchClick() {

if (document.getElementById('searchFeature').style.visibility == "visible") {

document.getElementById('formTable').style.visibility = "visible";

document.getElementById('searchFeature').style.visibility = "hidden";

}

else {

document.getElementById('formTable').style.visibility = "hidden";

document.getElementById('searchFeature').style.visibility = "visible";

}

}

</script>

0 0
Add a comment
Know the answer?
Add Answer to:
i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search"...
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

  • Consider the attached Registration form. Use jQuery to: 1) Change the "Search" link on the left...

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

  • I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

    I need help writting a Javascript function that does the following its for a HTML/CSS Shopping Cart Page CODE This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...

  • Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8">...

    Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8"> </head> <body> <h2>Order Form</h2> <form name="orderForm" method="post" action="processForm.html"> <table> <tr> <th colspan="2">Personal Information</th> </tr> <tr> <td>First Name:</td> <td><input type="text" name="firstName" id="firstName" size="30"></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" name="lastName" id="lastName" size="30"></td> </tr> <tr> <td>Address:</td> <td><input type="text" name="address" id="address" size="30"></td> </tr> <tr> <td>City:</td> <td><input type="text" name="city" id="city" size="30"></td> </tr> <tr> <td>Province:</td> <td><select name="province" id="province" size="1"> <option disabled>Select a province</option> <option value="BC">British Columbia</option> <option value="AB">Alberta</option> <option...

  • How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta...

    How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> function openAccount() { /* - get the account and initial amount values - check that all necessary information is provided - call the setCookie function to create account */ } function Deposit() { /* - get the account and amount values - check that all necessary information is provided - alter cookie with current amount of deposit */ } function...

  • Im working with php but having problem displaying the correct result. I need to show Order...

    Im working with php but having problem displaying the correct result. I need to show Order processed at (time) HTML file: <!DOCTYPE html> <html> <head> <title>Bob's Auto Parts - Order Form</title> </head> <body> <form action="processorder.php" method="post"> <table style="border: 0px;"> <tr style="background: #cccccc;"> <td style="width: 150px; text-align: center;">Item</td> <td style="width: 15px; text-align: center;">Quantity</td> </tr> <tr> <td>Tires</td> <td><input type="text" name="tireqty" size="3" maxlength="3" /></td> </tr> <tr> <td>Oil</td> <td><input type="text" name="oilqty" size="3" maxlength="3" /></td> </tr> <tr> <td>Spark Plugs</td> <td><input type="text" name="sparkqty" size="3" maxlength="3" /></td>...

  • I have to make a pixel art maker using javascript. HTML and CSS were already provided....

    I have to make a pixel art maker using javascript. HTML and CSS were already provided. I only had to do the JavaScript part. Every time I run the HTML folder nothing happens when I choose the width, height, and color. This is my code: (ONLY JS IS SUPPOSED TO BE FIXED). JS: // Select color input // Select size input const colorPicker = document.getElementsById('colorPicker'); const rowNum = document.getElementsById('inputHeight'); const cellNum = document.getElementById('inputWidth'); const pixelCanvas = document.getElementById('pixelCanvas'); const form =...

  • PHP Can't get my code to work, what am I doing wrong? <!DOCTYPE html> <html> <head>...

    PHP Can't get my code to work, what am I doing wrong? <!DOCTYPE html> <html> <head> <script> </script> </head> <body> <h2>Temperature Conversion Table</h2> <h4>Enter a starting value in degrees Fahrenheit and an increment value.</h4> <form name="myTemp" onsubmit="convertCelcius()" method="post"> <input type="text" name="temperature"> Enter an value in degrees Fahrenheit<br><br> <input type="radio" name="degIncrement" id="degIncrement5"> Convert in increment in 5 degrees<br> <input type="radio" name="degIncrement" id="degIncrement10"> Convert in increment in 10 degrees <br/><br/><input type="submit" value="Submit"> </form> <?php if( $_POST["temperature"] || $_POST["degincrement"] ) { //get he...

  • HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500"...

    HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500" border="10"> <!-----row---1----logo---> <tr><td> <img src="20150516_084745" width="700" height="200"> </td></tr> <!-----row-2-navigation-----> <tr><td> <!----start-navigation-table----> <table width="700" height="100" border="5" bgcolor="lightgreen" > <tr><td><a href="HerbFarm.html"> <center> HOME </center></a></td> <td><a href="about3.html"> <center> ABOUT </center></a></td> <td><a href="contact3.html"> <center> CONTACT </center></a></td> <td><a href="gallery3.html"> <center> GALLERY </center></a></td> </tr> </table> <!------end-navigation-table----> </td></tr> <tr><td> <h1>Contact </h1> <form action="thankyou.html">    </form> <div class="row"> <div class="col-75"> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-50"> <h3>Billing Address</h3> <label for="fname"><i...

  • I need to complete 3 validation cases in this Javascript code. I need to validate email,...

    I need to complete 3 validation cases in this Javascript code. I need to validate email, phone and street address. How would I go about validating these 3 cases in this code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Week 10: Regular Expressions</title> <style type="text/css"> span { padding: 2px; } .success { color: #008000; background: #99cc99; } .failure { color: #ff0000; background: #ff9999; } </style> <script type="text/javascript"> function validateInput(form) { var result0 = document.getElementById('result0'), result1 = document.getElementById('result1'), result2 = document.getElementById('result2'),...

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