Scribd
Upload
5 views37 pages

Web Record2

The document outlines a course on web essentials, focusing on practical exercises in creating interactive websites using HTML, JavaScript, PHP, and multimedia handling. It includes detailed exercises, algorithms, and sample programs for various web development tasks, along with pre-lab and post-lab viva questions to assess understanding. The course aims to equip students with skills in web design, form validation, and database applications.

Uploaded by

priyankarajan2706
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
5 views37 pages

Web Record2

The document outlines a course on web essentials, focusing on practical exercises in creating interactive websites using HTML, JavaScript, PHP, and multimedia handling. It includes detailed exercises, algorithms, and sample programs for various web development tasks, along with pre-lab and post-lab viva questions to assess understanding. The course aims to equip students with skills in web design, form validation, and database applications.

Uploaded by

priyankarajan2706
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/ 37

IT3401-WEB ESSENTIALS

PRACTICAL EXERCISES: 30 PERIODS


1. Creation of interactive web sites - Design using HTML and authoring tools
2. Form validation using JavaScript
3. Creation of simple PHP scripts
4. Handling multimedia content in web sites
5. Write programs using Servlets:
i. To invoke servlets from HTML forms
ii. Session tracking using hidden form fields and Session tracking for a hit count
6. Creation of information retrieval system using web, PHP and MySQL
7. Creation of personal Information System

COURSE OUTCOMES:
At the end of this course, the students will be able to:
CO 1: Apply JavaScript, HTML and CSS effectively to create interactive and dynamic websites.
CO 2: Create simple PHP scripts
CO 3: Design and deploy simple web-applications.
CO 4: Create simple database applications.
CO 5: Handle multimedia components
TABLE OF CONTENTS

S.NO LIST OF EXPERIMENTS PAGE NO

1 Creation of interactive web sites - Design using HTML


and authoring tools

2 Form validation using JavaScript

3 Creation of simple PHP scripts

4 Handling multimedia content in web sites

5 Write programs using Servlets:


i.To invoke servlets from HTML forms

(ii)Session tracking using hidden form fields

(iii)Session tracking for a hit count

c. Multiple Regression analysis

d. Also compare the results of the above analysis for the two
data sets.

6 Creation of information retrieval system using web,


PHP and MySQL

7 Creation of personal Information System


EX.NO:1 Creation of interactive web sites - Design using HTML and authoring tools
DATE:

AIM:
To create a interactive website using html and authoring tools

ALGORITHM:

Step1: Create the html file with form tag.


Step2: Using different text properties in html
Step3: Using html element for effective webpage
Step4: Input type element used as button, radio button, checkbox
Step5: using background colors and image to display interactive website

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<title>interactive website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>ONLINE SHOPPING</h1>
<p>Mission, Vission & Values</p>
<p>logo</p>
<img src="images2.jpg">

<li class="active"><a href="#">Home</a></li>


<li><a href="#">Products</a></li>
<li><a href="#">Deals</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Contact</a></li>

<li><a href="#"> Your Account</a></li>


<li><a href="#"> Cart</a></li>
<li><a href="#"> deal of the day</a></li>
<li><a href="#"> offers</a></li>

<img src="images.jpg">
<img src="images3.jpg">
</ul>
</div>
</div>
</nav>
<footer>
<p>Online Store Copyright</p>
<form class="form-inline">Get deals:
<input type="email" class="form-control" size="50" placeholder="Email Address">
<button> Sign Up</button>
</form>
</footer>

</body>
</html>

OUTPUT
PRE-LAB VIVA QUESTIONS:

1. What is HTML?
2. What is a tag?
3. What is the use of image map?
4. What are the elements used to create image?
5. List the attributes of <area> element.

POST-LAB VIVA QUESTIONS:

1. How do you insert a comment in html?


2. What are some of the common lists that can be used when designing a page?
3. How do you create links to sections within the same page?
4. Does a hyperlink apply to text only?
5.How to create the text area in the form?

RESULT:

The interactive website using html and authoring tools was successfully executed and
output is verified
EX.NO:2 JAVASCRIPT FORM VALIDATIONS
DATE:

AIM:
To create a webpage which validate the form using JavaScript

ALGORITHM:

Step1:Create the html file with form tag.


Step2:Check the form that all fields are filled using java script.
Step3:Create a login page using form tag
Step4:Validate the form using java script.
Step5:Create a credit card validation page.
Step6:Use java script to verify the number is valid or not.

PROGRAM:

Registrationform.html

<html>
<head>
<script>
function validateForm()
{
var name = document.forms["myForm"]["Name"].value;
var dob =document.forms["myForm"]["birthday"].value;
var mobile=document.forms["myForm"]["phoneno"].value;
var mailid=document.forms["myForm"]["email"].value;
if ((name == "")||(dob=="")||(mobile=="") ||(mailid==""))
{
alert("Filled out all field ");
return false;
}
else
{
alert("Thank you for your registration");
return true; }
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
<h4>REGISTRATION FORM VALIDATION</h4>
Name:<input type="text" name="Name"/><br/><br/>

Date of birth: <input type="date" name="birthday" /><br/><br/>


Mobile No: <input type="text" name="phoneno" /><br/><br/>
Email: <input type="email" name="email" /><br/><br/>
<input type="submit" name="reg" value="Register"/><br/><br/>
</form>
</body>
</html>

login.html

<html>
<head>
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==""|| password==""){
alert("Fill out all field");
return false; }
else {
alert("Successfully logged in"); }
}
</script>
</head>
<body>
<h3>Login Form Validation</h3>
<form name="myform" method="post" onsubmit="return validateform()">
Username: <input type="text" name="name"><br/><br/>
Password: <input type="password" name="password"><br/><br/>
<input type="submit" value="Login">
</form>
</body>
</html>

creditcard.html

<!DOCTYPE html>
<html>
<head>
<script>
function creditCardValidation(creditCradNum)
{
var regEx = /^4[0-9]{12}(?:[0-9]{3})?$/;
if(creditCradNum.value.match(regEx))
{
alert("This is a valid credit card number, Thanks");
return true;
}
else
{
alert("Please enter a valid credit card number.");
return false;
}
}
</script>
</head>
<body>
<h2>Credit Card Number Validation</h2>
<form name="form1">
Credit Number: <input type='text' name='creditCradNum'/></br></br>
<input type="submit" name="submit" value="Submit"
onclick="creditCardValidation(document.form1.creditCradNum)"/>
</form>
</body>
</html>

OUTPUT:
PRE LAB VIVA QUESTION

1. Is JavaScript is scripting language?


2. What is JavaScript?
3. What is form validation?
4. How to create an array in JavaScript?
5. What is the purpose of writing document.getElementById ('anumber').value?

POST LAB VIVA QUESTION


1. What is the purpose of ‘This’ operator in JavaScript?
2. In how many ways a JavaScript code can be involved in an HTML file?
3. Name some of the JavaScript Frameworks
4. How you can submit a form using JavaScript?
5. Which keywords are used to handle exceptions?

RESULT:

The webpage which validate the form using JavaScript was successfully executed
and output is verified
EXNO: 3
Date: CREATION OF SIMPLE PHP SCRIPT

AIM
To create a form validation using simple PHP script

ALGORITHM
Step1: Create the html file with form tag.
Step2: Check the form that all fields are filled using PHP
Step3: Create a login page using form tag
Step4: Validate the form using PHP
Step5: Create a FORM validation page.
Step6: Use php script to display the form details
Step7: Validate the form using java script.

PROGRAM
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<?php
// define variables and set to empty values
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["name"]);
$email = test_input($_POST["email"]);
$website = test_input($_POST["website"]);
$comment = test_input($_POST["comment"]);

$gender = test_input($_POST["gender"]);
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>PHP Form Validation Example</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name">
<br><br>
E-mail: <input type="text" name="email">
<br><br>
Website: <input type="text" name="website">
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="other">Other
<br><br>
<input type="submit" name="submit" value="Submit">
</form>

<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>

</body>
</html>
OUTPUT

PRELAB VIVA QUESTION

1. What is PHP?

2. What are the popular frameworks in PHP?

3. What is "echo" in PHP?


4. Name any four built-in functions in PHP.

5.What are the different types of Array in PHP?

POST LAB VIVA QUESTION

1. Write syntax to open a file in PHP?

2. Does JavaScript interact with PHP?


3. How to display text with a PHP script?
4. How do you execute a PHP script from the command line?
5. How can PHP and HTML interact?

RESULT
The form validation using PHP script was successfully executed and output is verified
Ex:4
Date: HANDLING MULTIMEDIA CONTENT IN WEB SITES

AIM
To write Handling Multimedia Content In Web Sites using html
ALGORITHM:

Step1:Create a html file with audio and video controls


Step2:<audio>, <video> elements contain the <source> element, the <source> tag is used
to attach multimedia files.
Step3:Using different html element for effective website
Step4:Effectively play audio and videos in website
Step5:We can use audio and video link to handle multimedia content
PROGRAM
<!DOCTYPE html>
<html>
<body>
<h1><center>HANDLING MULTIMEDIA CONTENT IN WEB SITES</center></h1>
<h2>Audio</h2>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
<h2>Video</h2>
<video width="420" height="250" controls>
<source src="video.mp4" type="video/mp4">
</center>
</video>
<h2>Youtube videos</h2>
<h3>Ex:2 Form validation using JavaScript</h3>
<iframe width="420" height="345" src="https://www.youtube.com/embed/1iaUWdVRABU">
</iframe>
<h3>Ex:5 Write programs using Servlets:</h3>
<iframe width="420" height="345" src="https://www.youtube.com/embed/9fjNuEfMOgU">
</iframe>
</body>
</html>

Output:
PRELAB VIVA QUESTION

1. What is the use of the required attribute in HTML5?


2. What are the various formatting tags in HTML?

3. What is the use of an iframe tag?


4. What are the New tags in Media Elements in HTML5?

5. Explain new input types provided by HTML5 for forms?

POST LAB VIVA QUESTION

1. How can we include audio or video in a webpage?

2. What are Semantic Elements?

3. How do you separate a section of texts in HTML?

4. How do you create a hyperlink in HTML?

5. Which type of video formats is supported by HTML5?

RESULT
The multimedia content in websites successfully executed and output is verified
EX: 5(i) INVOKING SERVLETS FROM HTML FORM
DATE:

AIM:
To write a java program to invoke servlets from HTML form, hidden form field
and session tracking.

ALGORITHM :

Step1: Create a web page using HTML form that contains the field text, submit button.
Step2: Set the URL of the server as the value of form’s action attribute.
Step3: Run the HTML program.
Step4: Define the class server that extends the property of the class Generic Servlet.
Step5: Handle the request from the client by using the method service() of Generic
Servlet class.
Step6: Send the response to the client by using the method of PrintWriter class.

PROGRAM:
i)To invoke servlets from HTML forms

PostParm.java
import java.io.*;
import java.util.*;
import javax.servlet.*;
public class PostParam extends GenericServlet
{
public void service(ServletRequestrequest,ServletResponse response)throws
ServletException,IOException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html><head><title>My Servlet invoked from HTML</title></head>");
out.println("<body>Welcome to My First Servlet invoked from html</body></html>");
}

web.xml
<web-app>
<servlet>
<servlet-name>InvokeServlet</servlet-name>
<servlet-class>PostParam</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>InvokeServlet</servlet-name>
<url-pattern>/PostParam</url-pattern>
</servlet-mapping>
</web-app>
test.html
<html>
<body>
<form name = "postparam" method = "post"
action="http://localhost:8080/servlet/PostParam">
<input type="submit" value="Go to My Servelet"/>
</form>
</body>
</html>

OUTPUT:

RESULT:

Thus java program to invoke servlet from HTML form, hidden form field and
session tracking was executed successfully and output is verified
EX: 5 (ii) SESSION TRACKING FOR HIDDEN FORM FIELD
DATE:

AIM:
To write a Java Program for Session tracking a hit count. This servlet uses session
tracking to count the number of times a client has accessed it.

ALGORITHM:
Step1: Create the class as servlet.
Step2: Enter the name in the form.
Step3: If enter the name then the hello servlet page is opened.
Step4: Else the error message will be displayed.

PROGRAM:
gui.html
<html>
<head><title>Session Tracking using Hidden Form Field</title>
</head>
<body>
<form method=get action="http://localhost:8080/servlet/Servlet1">
Enter name: <input type="text" name="uName"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>

Servlet1.java
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Servlet1 extends HttpServlet
{
public void doGet(HttpServletRequestrequest,HttpServletResponse response)
{
try
{
response.setContentType("text/html");
PrintWriter out=response.getWriter();
String n=request.getParameter("uName");
out.print("<form action=http://localhost:8080/servlet/Servlet2>");
out.print("<input type='hidden' name='uName' value="+n+">");
out.print("<input type='submit' value='Just click here'>");
out.print("</form>");
out.close();
}
catch(Exception e)
{
System.out.println(e);
}
}
}

Servlet2.java
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Servlet2 extends HttpServlet
{
public void doGet(HttpServletRequestrequest,HttpServletResponse response)
{
try
{
response.setContentType("text/html");
PrintWriter out=response.getWriter();
String n=request.getParameter("uName");
out.println("Hello"+n);
out.close();
}
catch(Exception e)
{
System.out.println(e);
} } }

web.xml
<web-app>
<servlet>
<servlet-name>InvokeServlet</servlet-name>
<servlet-class>Servlet1</servlet-class>
</servlet>
<servlet>
<servlet-name>InvokeServlet</servlet-name>
<servlet-class>Servlet2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>InvokeServlet</servlet-name>
<url-pattern>/Servlet1</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>InvokeServlet</servlet-name>
<url-pattern>/Servlet2</url-pattern>
</servlet-mapping>
</web-app>

OUTPUT:

RESULT:
The servlet uses session tracking to count the number of times a client has
accessed it successfully executed and output is verified
EX: 5 (iii) SESSION TRACKING FOR A HIT COUNT
DATE:

AIM:
To write a program for Session Tracking for a Hit Count

ALGORITHM:
Step1: Servlet program to keep track of user visiting the page.

Step2: The count is incremented by one when user visits.

Step3: The output displays the greeting message.

Step4: The number of previous access is also displayed.

PROGRAM
SessionServletDemo.java
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class SessionServletDemo extends HttpServlet
{
public void doGet(HttpServletRequestrequest,HttpServletResponse response)
throws ServletException,IOException
{
response.setContentType("text/html");
HttpSession session=request.getSession();
Integer count=(Integer)session.getAttribute("count");
if(count==null)
{
count=new Integer(0);
}
else
{
count=new Integer(count.intValue()+1);
}
session.setAttribute("count",count);
PrintWriter out=response.getWriter();
out.print("<html><head></head><body><h2>The number of previous
access" +count);
out.print("</body></html>");
} }
web.xml
<web-app>
<servlet>
<servlet-name>InvokeServlet</servlet-name>
<servlet-class>SessionServletDemo</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>InvokeServlet</servlet-name>
<url-pattern>/SessionServletDemo</url-pattern>
</servlet-mapping>
</web-app>

OUTPUT:
PRELAB QUESTION
1. What are servlets?
2. List the application of servlets.
3. What is the servlet interface and its methods
4. What is the life-cycle of a servlet?
5. What is session in servlet?
6.Show how is session tracking is achieved by the URL rewriting?
7.What is called session handling in java ?
8.What is the use of attribute in servlets?
9.What are different types of Session Tracking?

POST LAB QUESTION


1. How to get the path of servlet in the server?
2.How can you create a session in servlet?
3.How is the Get () method different from the Post() method?
4.How do you redirect a request from one servlet to another?
5.What is difference between PrintWriter and ServletOutputStream?

RESULT:

The Session Tracking for a Hit Count was successfully executed and output is
verified
EXNO:6
Date: Creation of information retrieval system using web, PHP and MySQL

AIM:

To create a php program for login page with SQL connection.

ALGORITHM
Step1: Create the html file with form tag.
Step2: Create the login page that all fields are filled using PHP
Step 3: Create a login page using tag
Step4:Validate the login page using php
Step5: Connect to the database using php
Step6:Validate the login page using Php

PROGRAM:

HTML FILENAME: Db.html

<html>

<body>

<form action="sql.php" method="post">

<br><center><table border=2" bordercolor="red">

<tr><td><table><tr font face="white">

<th colspan="2" bgcolor="crimson" align="center">

<h3>LOGIN FORM</th></tr>

<tr><th align="left">UserName</th>

<td><input type="text" name="u"></td></tr>

<tr><th align="left">Password</th>
<td><input type="password" name="p"></td></tr>

<tr align="center"><br><td><input type="submit" value=" LOGIN "></td>

<td><input type="reset" value=" CLEAR "></td></tr>

</table></td></tr></table>

</center></form></body></html>

PHP FILENAME: Sql.php

<?php_track_vars ?>

<?php

$un=$_POST['u'];

$pd=$_POST['p'];

$con=0;

$db=mysql_connect("localhost","root","");

$sel=mysql_select_db("vaidoo",$db);

$res=mysql_query("SELECT name,password

FROM riya");

while($row=mysql_fetch_array($res))

if($un==$row{"name"} && $pd==$row{"password"})

$con=1;

if($con==1)

echo"<font color='blue' size='5' align='center'>Welcome to this pc</font>";


}

else

echo"<font color='red' size='5' align='center'>Invalid Username or Password</font>";

mysql_close($db);

?>

Output
PRELAB QUESTION
1. Define PHP. List the features.
2. List the rules for creating variables in PHP.
3. Name any four built-in functions in PHP.
4. List out Popular Databases for PHP Web Application Development
5. What is database connectivity?
POST LAB QUESTIONS
1. How to create a PHP script?
2. In how many ways we can retrieve the data in the result set of MySQL using PHP?
3. What is the difference between $message and $$message?
4. How do you execute a PHP script from the command line?
5. How can PHP and HTML interact?

RESULTS
The php program for login page with SQL connection is successfully executed and
output is verified
EXNO:7
Date: Creation of personal information system

AIM:

To write a javascript program to create of personal information system using html,css

Algorithm:
Step 1:Create and write the html code.
Step 2:create and desigh the html code by using css.
Step 3:create a javascript file.
Step 4: Run html file and enter the values for each field
Step 5: Use javascript file and SQL commands to insert and view the values in
the table.

Program:
Index.html
<!DOCTYPE html>
<head>
<title>Crud Operation</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>

<body>
<table>
<tr>
<td>
<form autocomplete="off" onsubmit="onFormSubmit()">
<div>
<label for="empCode">Emp-Code</label>
<input type="text" name="empCode" id="empCode">
</div>
<div>
<label for="empName">Emp-Name</label>
<input type="text" name="empName" id="empName">
</div>
<div>
<label for="empsalary">Emp-salary</label>
<input type="text" name="empsalary" id="empsalary">
</div>
<div>
<label for="mobile">Mobile</label>
<input type="number" name="mobile" id="mobile">
</div>

<div class="form_action--button">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</div>
</form>

<td>
<table class="list" id="storeList">
<thead>
<tr>
<th>Emp-code</th>
<th>Emp-Name</th>
<th>Emp-salary</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</td>
</td>
</tr>
</table>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>

Style.css:
body{

background-image: url('background.jpg');

background-repeat: no-repeat;

background-attachment: fixed;

background-size: cover;

table{

width: 80%;

margin: 40px auto;

background: rgb(124,154,167);

table.list{

text-align: center;

width: 100%;

}
td{

border: 1px solid rgb(204,200,200);

text-align: left;

padding: 8px 15px;

tr:nth-child(even), table.list thread> tr{

background-color: rgb(204,200,200);

input[type="text"],input[type="number"]{

width:91%;

padding:12px 20px;

margin:8px 0;

display: inline-block;

border: 1px solid rgb(165,161,161);

border-radius: 4px;

input[type="submit"],input[type="reset"]{

background: #eee;

padding:6px 12px;

margin:15px 0 10px;

display: inline-block;

border: none;

border-radius: 30px;

font-size: 1rem;

cursor: pointer;

outline: none;

input[type="submit"]:hover{

background: #4b99d8;
}

input[type="reset"]:hover{

background: #4b99d8;

button{

background: #eee;

padding:6px 12px;

margin:15px 0 10px;

display: inline-block;

border: none;

border-radius: 30px;

font-size: 1rem;

cursor: pointer;

outline: none;

button:hover{

background:#4b99d8 ;

Script.js
var selectedRow = null

function onFormSubmit(e) {

event.preventDefault();

var formData = readFormData();

if (selectedRow == null){

insertNewRecord(formData);

else{

updateRecord(formData);

}
resetForm();

//Retrieve the data

function readFormData() {

var formData = {};

formData["empCode"] = document.getElementById("empCode").value;

formData["empName"] = document.getElementById("empName").value;

formData["empsalary"] = document.getElementById("empsalary").value;

formData["mobile"] = document.getElementById("mobile").value;

return formData;

//Insert the data

function insertNewRecord(data) {

var table = document.getElementById("storeList").getElementsByTagName('tbody')[0];

var newRow = table.insertRow(table.length);

cell1 = newRow.insertCell(0);

cell1.innerHTML = data.empCode;

cell2 = newRow.insertCell(1);

cell2.innerHTML = data.empName;

cell3 = newRow.insertCell(2);

cell3.innerHTML = data.empsalary;

cell4 = newRow.insertCell(3);

cell4.innerHTML = data.mobile;

cell4 = newRow.insertCell(4);

cell4.innerHTML = `<button onClick="onEdit(this)">Edit</button> <button


onClick="onDelete(this)">Delete</button>`;

//Edit the data

function onEdit(td) {

selectedRow = td.parentElement.parentElement;

document.getElementById("empCode").value = selectedRow.cells[0].innerHTML;
document.getElementById("empName").value = selectedRow.cells[1].innerHTML;

document.getElementById("empsalary").value = selectedRow.cells[2].innerHTML;

document.getElementById("mobile").value = selectedRow.cells[3].innerHTML;

function updateRecord(formData) {

selectedRow.cells[0].innerHTML = formData.empCode;

selectedRow.cells[1].innerHTML = formData.empName;

selectedRow.cells[2].innerHTML = formData.empsalary;

selectedRow.cells[3].innerHTML = formData.mobile;

//Delete the data

function onDelete(td) {

if (confirm('Do you want to delete this record?')) {

row = td.parentElement.parentElement;

document.getElementById('storeList').deleteRow(row.rowIndex);

resetForm();

//Reset the data

function resetForm() {

document.getElementById("empCode").value = '';

document.getElementById("empName").value = '';

document.getElementById("empsalary").value = '';

document.getElementById("mobile").value = '';

selectedRow = null;

}
Output:

You might also like