Scribd
Upload
7 views12 pages

CSS 08

Css microproject

Uploaded by

yadnyabothe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views12 pages

CSS 08

Css microproject

Uploaded by

yadnyabothe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

A

Micro Project Report

On

“Accepting and Displaying Student Record”


Submitted for the partial fulfillment of fifth semester subject
“Client Side Scripting” code:22519

Submitted by
Bothe Yadnya Uday [27]

Under the Guidance of


Dr.G.N.Jorvekar

Department of Computer Technology


S. K. B. P. Polytechnic, Kopargaon.
(2024-2025)
Certificate

This is certified that micro project titled


“Accepting and displaying user entered data and changing
visibility of elements.”
Carried out under the guidance of Dr.G.N.Jorvekar

Submitted by:-
Bothe Yadnya Uday [27]

As the partial fulfilment of fifth semester subject course of


“Client Side Scripting”
Code :22519 during winter-2024

Department Of Computer Technology


S. K. B. P. Polytechnic, Kopargaon.
(2024-2025)

Guided by HOD

Dr.G.N.Jorvekar Dr.G.N.Jorvekar
CONTENTS.

Sr. No. CONTENT

1 INTRODUCTION

2 OBJECTIVE

3 CODE

OUTPUT
4

CONCLUSION
5

REFERENCE
6
INTRODUCTION:

Creating the form elements:


The <input> tag specifies an input field where the user can enter data.
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
<input type="text">, <input type="checkbox">, <input type="radio">, <input
type="file">, and <input type="password">

Typical form control objects -- also called "widgets" -- include the following:

 Text box for entering a line of text


 Push button for selecting an action
 Radio buttons for making one selection among a group of options
 <select> for selecting a single option from multiple options.

Getting a value in a form object:

The value property of the inputbox, is both readable and writable. That is, you can read
whatever is typed into the box, and you can write data back into it. The process of setting the
value in a form object is just the reverse of reading it.

var fname=document.getElementById("fname").value;

The visibility property sets or returns whether an element should be visible.

The visibility property allows the author to show or hide an element. It is similar to
the display property. However, the difference is that if you set display:none, it hides the entire
element, while visibility:hidden means that the contents of the element will be invisible, but
the element stays in its original position and size.

#ln{visibility: hidden;}
document.getElementById("ln").style.visibility="visible";

OBJECTIVE:
The objective behind the project was to take user input and then display in the format of
table.

Also hiding and making an element visible using style in Javascript.

Accepting the next input only if the first input field is filled.
CODE:
<html>
<style>

#ln{
visibility: hidden;

}
#div1{
visibility: hidden;

}
#div2{
visibility: hidden;

#submit{

}
#reset{

}
body{

}
table{

}
</style>
<body>

<label id="fn"><h4>Enter First Name :</h4>


<input type="text" name="fn" id="fname" onchange="allow(this.value)"/></label><br>

<label id="ln"><h4>Enter Last Name :</h4>


<input type="text" name="ln" id="lname" onchange="show(this.value)" /></label><br>

<div id="div1"><h4>Select Your Branch:</h4>


<select name="branch" id="branch" onchange="say(this.value)">
<option value="BR">Branch</option>
<option value="CM">Computer</option>
<option value="IT">IT</option>
<option value="MK">Mechatronics</option>
</select>
</div><br>

<br><button id="submit" name="click" value="SUBMIT" onclick="sub()"> SUBMIT</button>


<button id="reset" name="click" value="RESET" onclick="reset()"> RESET</button>
<p>
<table id="p" border="1">
<th>STUDENT_NAME</th><th>BRANCH</th></tr>
</table>
</p>
</body>
<script>
function allow(val)
{
if(val!="")
{
document.getElementById("ln").style.visibility="visible";
}
}
function show(val1)
{
if(val1!="")
{
document.getElementById("div1").style.visibility="visible";
}
}
function say()
{
var x=document.getElementById("branch").value; if(x!="")
{
document.getElementById("div2").style.visibility="visible";
}
}

function print()
{
var f=document.getElementById('female'); var m=document.getElementById('male');
if(f.checked==true||m.checked==true){
document.getElementById("submit").style.visibility="visible";
document.getElementById("reset").style.visibility="visible";
}
}

function sub()
{
var n=1;
var x=0;

var selectedRow=null;

var fname=document.getElementById("fname").value; var lname=document.getElementById("lname").value;


var branch=document.getElementById("branch").value;

var name=fname+" "+lname;

if(selectedRow==null){ alert("STUDENT RECORD STORED!");


var addRow=document.getElementById('p'); var NewRow=addRow.insertRow(n);

var col1=NewRow.insertCell(0); var col2=NewRow.insertCell(1); var col3=NewRow.insertCell(2);

col1.innerHTML=name; col2.innerHTML=branch; col3.innerHTML=gender;


n++;
}
}
function reset()
{
document.getElementById("ln").style.visibility="hidden";
document.getElementById("div1").style.visibility="hidden";
document.getElementById("div2").style.visibility="hidden";
document.getElementById("submit").style.visibility="hidden";
document.getElementById("reset").style.visibility="hidden";
var fname=document.getElementById("fname"); fname.value="";
var fname=document.getElementById("lname"); lname.value="";
}

</script>
</html>
OUTPUT:
CONCLUSION:
We successfully took input data from user and displayed it in the table format.

REFERENCES:
https://www.javascript.com › – javascript

https://en.m.wikipedia.org › wiki › css - Wikipedia

You might also like