Scribd
Upload
13 views4 pages

45 Form Input

Uploaded by

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

45 Form Input

Uploaded by

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

Output

- alert()
- confirm()
- document.write()
- console.log(), warn(), info() etc..
- innerHTML
- innerText
- outerHTML

Input
- prompt

Input using Form Elements


------------------------------------
- You can use form elements like
textbox, password, date, checkbox, radio, listbox, etc..

Step-1:
- Collect value from form element

document.getElementById("ProductName").value

Step-2:
- Display value in any container

document.getElementById("lblName").innerHTML =
document.getElementById("ProductName").value;

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Form Input</title>
<link rel="stylesheet"
href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet"
href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
<script type="text/javascript">
function RegisterClick(){
document.getElementById("detailsContainer").style.display =
"block";
document.getElementById("lblName").innerHTML =
document.getElementById("ProductName").value;
document.getElementById("lblPrice").innerHTML =
document.getElementById("ProductPrice").value;
document.getElementById("lblCity").innerHTML =
document.getElementById("ProductCity").value;

StockCheckBox = document.getElementById("ProductStock");
StatusMessage = "";
if(StockCheckBox.checked) {
StatusMessage = "Available";
} else {
StatusMessage = "Out of Stock";
}

document.getElementById("lblStock").innerHTML = StatusMessage;
}
function EditClick(){
document.getElementById("btnRegister").innerHTML = "Update";
}
</script>
<style>
dd,dt {
margin-bottom: 20px;
}
dd {
background-color: lemonchiffon;

}
dt {
background-color: lightcyan;
}
</style>
</head>
<body class="container-fluid">
<div class="mt-2">
<button data-bs-target="#register" data-bs-toggle="modal" class="btn
btn-primary">Register Product</button>
<div class="modal fade" id="register">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Register New Product</h3>
<button class="btn-close"
data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-2">
<label class="form-label">Name</label>
<div>
<input type="text" class="form-control"
id="ProductName">
</div>
</div>
<div class="mb-2">
<label class="form-label">Price</label>
<div>
<input type="text" class="form-control"
id="ProductPrice">
</div>
</div>
<div class="mb-2">
<label class="form-label">Shipped To</label>
<div>
<select class="form-select" id="ProductCity">
<option>Delhi</option>
<option>Hyd</option>
<option>Chennai</option>
</select>
</div>
</div>
<div class="mb-2">
<label class="form-label">Stock</label>
<div class="form-switch">
<input type="checkbox" class="form-check-input"
id="ProductStock"> Available
</div>
</div>

</div>
<div class="modal-footer">
<button id="btnRegister" onclick="RegisterClick()"
class="btn btn-primary" data-bs-dismiss="modal">Register</button>
<button class="btn btn-danger" data-bs-
dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>

<div class="mt-3" style="display: none;" id="detailsContainer">


<h2>Product Details</h2>
<dl class="row w-50">
<dt class="col-3">Name</dt>
<dd class="col-9" id="lblName"></dd>
<dt class="col-3">Price</dt>
<dd class="col-9" id="lblPrice" ></dd>
<dt class="col-3">Shipped To</dt>
<dd class="col-9" id="lblCity"></dd>
<dt class="col-3">Stock</dt>
<dd class="col-9" id="lblStock"></dd>
</dl>
<button onclick="EditClick()" data-bs-target="#register" data-bs-
toggle="modal" class="btn btn-link">Edit Details</button>
</div>

<script src="../node_modules/jquery/dist/jquery.js"></script>
<script
src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

Summary:
- How JavaScript is integrated into HTML page.
- How JavaScript refers HTML
- How to handle output
- How to handle input

Task:
- Design a Registration Form
- UserName
- Password
- Date of Birth
- Age
- Email
- Website Address[url]
- City
- Gender
- Display the details

JavaScript Language Basics


======================
1. Variables
2. Data Types
3. Operators
4. Statements
5. Functions

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy