how to toggle between two html pages by clicking on links - javascript

I have three html pages separately
homepage (with two links (sign up) and (sign in) )
sign-in
sign-up
I want to hide the other page, when one page is shown only.
homepage.jsp
<!DOCTYPE html>
<script type="text/javascript">
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
</script>
<!-- write your code here -->
<div>
Create account
Sign In
</div>
<div>
<nav>
<div id="in" style="display: none;">
<jsp:include page="sign-in.jsp"></jsp:include>
</div>
</nav>
<nav>
<div id="join" style="display: none;">
<jsp:include page="sign-up.jsp"></jsp:include>
</div>
</nav>
</div>
<!-- write your code here -->
sign-in.jsp
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Laar Project Store </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- write your code here -->
<div style="margin: 50px;">
<div class = "input-group input-group-xs" role = "group">
<form>
<table>
<div class = "input-group input-group-xs">
<tr>
<td style="align: right; width: 100px;"><span class="input-group-addon">Email</span></td>
<td><input type="email" class="form-control" name="email" placeholder="Email" required/></td>
</tr>
</div>
<div class = "input-group input-group-xs">
<tr>
<td style="align: right; width: 100px;"><span class="input-group-addon">Password</span></td>
<td><input type="password" class="form-control" name="password" placeholder="Password" required/></td>
</tr>
</div>
<div class = "input-group input-group-xs">
<tr>
<td></td>
<td><input type="submit" class="btn btn-success btn-xs" value = "Sign In" style="margin-top: 10px; margin-bottom: 10px;"/></td>
</tr>
</div>
</table>
</form>
</div>
</div>
<!-- write your code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
sign-up.jsp
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Laar Project Store </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- write your code here -->
<div style="margin: 50px;">
<div class = "input-group input-group-xs" role = "group">
<form>
<table>
<div class = "input-group input-group-xs">
<tr>
<td style="align: right; width: 100px;"><span class="input-group-addon">Email</span></td>
<td><input type="email" class="form-control" name="email" placeholder="Email" required/></td>
</tr>
</div>
<div class = "input-group input-group-xs">
<tr>
<td style="align: right; width: 100px;"><span class="input-group-addon">Password</span></td>
<td><input type="password" class="form-control" name="password" placeholder="Password" required/></td>
</tr>
</div>
<div class = "input-group input-group-xs">
<tr>
<td></td>
<td><input type="submit" class="btn btn-success btn-xs" value = "Sign In" style="margin-top: 10px; margin-bottom: 10px;"/></td>
</tr>
</div>
</table>
</form>
</div>
</div>
<!-- write your code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
I want to know that how do i hide the other page when the one page is shown.
Please help. I am waiting for your kind response.

I assume that you handle which submit button is clicked. So give an id to your page's outmost div. An you can manage your pages as follows:
$(function () {
$('#homepageDivId').show();
$('#signInPageId').hide();
$('#signOutPageId').hide();
$('#signInPageId input[type=button]').click(function() {
$('#homepageDivId').hide();
$('#signOutPageId').hide();
$('#signInPageId').show();
});
$('#signOutPageId input[type=button]').click(function() {
$('#signInPageId').hide();
$('#homepageDivId').hide();
$('#signOutPageId').show();
});
$('#homepageDivId input[type=button]').click(function() {
$('#signInPageId').hide();
$('#signOutPageId').hide();
$('#homepageDivId').show();
});
});

Related

Unable to load the array data into table on web page

I am trying to dynamically load data into a table on web page using Javascript. Here is the code I've tried:
class UI{
static displayBooks(){
const storedBooks =[
{
title : 'matrix',
author : 'john doe',
isbn : '45565'
},
{
title : 'book-two',
author : 'john toe',
isbn : '45566'
}
];
const books = storedBooks;
books.forEach((book) => UI.addBookToList(book));
}
static addBookToList(book){
const list = document.getElementById('book-list');
const row = document.createElement('tr');
row.innerHTML =`
<td>${book.title}</td>
<td>${book.author}</td>
<td>${book.isbn}</td>
<td><a href="#" class="btn btn-danger btn-sm" delete>x</td>`;
list.appendChild.row;
}
}
// Display Books
document.addEventListener('DOMContentLoaded',UI.displayBooks);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://bootswatch.com/5/yeti/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<title>My Book List</title>
</head>
<body>
<div class="container mt-4">
<h1 class="display-4 text-center">
<i class="fa-solid fa-book-open text-primary"></i>
My<span class="text-primary">Book</span>List
</h1>
<form id="book-form">
<div class="form-group">
<label for="title">Title</label>
<input type="text" id="title" class="form-control">
</div>
<div class="form-group">
<label for="author">Author</label>
<input type="text" id="author" class="form-control">
</div>
<div class="form-group">
<label for="isbn">ISBN#</label>
<input type="text" id="isbn" class="form-control">
</div>
<input type="submit" value="Add Book" class="btn btn-primary w-100 mt-3">
</form>
<table class="table table-striped mt-5">
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Author</th>
<th scope="col">ISBN#</th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="book-list"></tbody>
</table>
</div>
<script src="main.js"></script>
</body>
</html>
If you run the above code you can see the data is not loaded into the HTML table. The expected output is:
I am not able to get the rows of arrays which I have entered. I am not able to understand what is wrong with the code. Can anyone help me out on how to console the arrays which have been stored in the storedBooks variable.
Your code seems to be almost correct for what you are trying to do. However, in the very last line of your function there's list.appendChild.row;, you are trying to access an undefined property row of appendChild, but the method Node.appendChild() needs to take a child node as an argument.
In your case it should be:
list.appendChild(row);

Displaying user input in the table form using Javascript DOM

i have trouble displaying users' input and have spent some time looking at it and unsure which part had gone wrong. I am supposed to display the "Result" word in green and display user's input in a form of table. I used document.getElementsByClassName('container').innerHTML to add new element in the homepage.
Could anyone explain why the word Result and table doesn't show?
My code:
/*** Home ***/
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="mhsavings.js"></script>
</head>
<style>
.main-content{
width:70%;
/* background-color: lightblue; */
text-align: center;
}
</style>
<body>
<div class="container main-content">
<h1 style="margin-top:40px; margin-bottom: 30px;">Savings</h1>
<h3 style="color:blue;margin-bottom:48px;">How long does it takes for me to reach My Goal?</h3>
<form>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon1">Initial Amount ($)</span>
<input type="text" class="form-control" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon2">Yearly interest (%)</span>
<input type="text" class="form-control" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon3">My Goal</span>
<input type="text" class="form-control" id="goal" aria-describedby="basic-addon3" id="goal">
</div>
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
</form>
</div>
</body>
</html>
/*** in JS file ***/
function calculate(){
'use stict';
var initialAmt = document.getElementById("initialAmt");
var yearlyInt = document.getElementById("yearlyInt");
var goal = document.getElementById("goal");
console.log(goal.value);
var receive = Math.round(initialAmt, 2);
var years = 0;
while (receive < goal) {
receive *= (1 + yearlyInt);
years += 1;
}
// console.log(document.getElementsByClassName('container'));
document.getElementsByClassName('container').innerHTML = "<h3 style='color:green; margin-bottom: 20px'>Result</h3>";
document.getElementsByClassName('container').innerHTML = `<table style='width: 500px'>
<tr>
<th>You will achieve your goal in (years):</th>
<td>${years}</td>
</tr>
<tr>
<th>You will get ($):</th>
<td>${receive}</td>
</tr>
</table>`;
}
#1: name of function not the function execution!
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
to
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate">Calculate</button>
#2: getElementsByClassName returns a collection not an element!
#3: lacking of parseInt before calculating
Beside the comments from other user posted in your original question,you code has many incorrect points:
You need to use value to get the input value,so change var initialAmt = document.getElementById("initialAmt"); to var initialAmt = document.getElementById("initialAmt").value;
When use innerHTML,you need to append the value,make sure not to override it
function calculate(){
'use stict';
var initialAmt = parseInt(document.getElementById("initialAmt").value);
var yearlyInt = parseInt(document.getElementById("yearlyInt").value);
var goal = parseInt(document.getElementById("goal").value);
var receive = Math.round(initialAmt, 2);
var years = 0;
while (receive < goal) {
receive *= (1 + yearlyInt);
years += 1;
}
// console.log(document.getElementsByClassName('container'));
var result = document.createElement("div");
var content = "<h3 style='color:green; margin-bottom: 20px'>Result</h3>";
content += `<table style='width: 500px;border:1px'>
<tr>
<th>You will achieve your goal in (years):</th>
<td>`+years+`</td>
</tr>
<tr>
<th>You will get ($):</th>
<td>`+receive+`</td>
</tr>
</table>`;
result.innerHTML = content;
document.getElementsByClassName('container')[0].appendChild(result);
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="mhsavings.js"></script>
</head>
<style>
.main-content{
width:70%;
/* background-color: lightblue; */
text-align: center;
}
</style>
<body>
<div class="container main-content">
<h1 style="margin-top:40px; margin-bottom: 30px;">Savings</h1>
<h3 style="color:blue;margin-bottom:48px;">How long does it takes for me to reach My Goal?</h3>
<form>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon1">Initial Amount ($)</span>
<input type="text" class="form-control" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon2">Yearly interest (%)</span>
<input type="text" class="form-control" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon3">My Goal</span>
<input type="text" class="form-control" id="goal" aria-describedby="basic-addon3" id="goal">
</div>
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
</form>
</div>
</body>
</html>
Using your functio, you may use this code
form fields are text fields. With parseInt() a text string is converted into an integer.
Below I added an extra <div id="result"></div> but if you want to use the container div, you can target this div with document.querySelector(".container").innerHTML = .... This will select the first class with that name. Note that this will replace all html code in the form!
function calculate(){
'use stict';
let initialAmt = parseInt( document.getElementById("initialAmt").value );
let yearlyInt = parseInt( document.getElementById("yearlyInt").value );
let goal = parseInt( document.getElementById("goal").value );
let receive = Math.round(initialAmt, 2);
let years = 0;
while (receive < goal) {
receive *= (1 + yearlyInt);
years += 1;
}
let result = '<h3 style="color:green; margin-bottom: 20px">Result</h3><table style="width: 500px"><tr><th>You will achieve your goal in (years):</th><td>' + years + '</td></tr><tr><th>You will get ($):</th><td>' + receive + '</td></tr></table>';
document.getElementById("result").innerHTML = result;
}
.main-content{
width:70%;
/* background-color: lightblue; */
text-align: center;
}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container main-content">
<h1 style="margin-top:40px; margin-bottom: 30px;">Savings</h1>
<h3 style="color:blue;margin-bottom:48px;">How long does it takes for me to reach My Goal?</h3>
<form>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon1">Initial Amount ($)</span>
<input type="text" class="form-control" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon2">Yearly interest (%)</span>
<input type="text" class="form-control" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon3">My Goal</span>
<input type="text" class="form-control" id="goal" aria-describedby="basic-addon3" id="goal">
</div>
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
</form>
<div id="result"></div>
</div>

Php, Jquery/JS, Submit button

Okay, so for some reason I have a crazy problem that is just making my mind go crazy. I have an open source shoutbox, worked great in the website.com/shouot/SHOUTDIREC/chat.html but once I try to embed into my previous built site(website.com/chat.php), the submit button like grays out and I can't submit the post. Another thing is it doesn't show previous post that show up when I go back to SHOUTDIREC/chat.html. I tried changing /chat.php to /chat.html nothing. Still grayed out not working submit button.
This is the ./chat.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Making a Shoutbox with PHP and jQuery</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/emojione/1.3.0/assets/css/emojione.min.css"/>
<link rel="stylesheet" href="./shout/assets/css/styles.css" />
<script type="text/javascript" src="./livechat/php/app.php?widget-init.js"></script>
</head>
<body>
<div class="shoutbox">
<h1>Shout box <img src='./shout/assets/img/refresh.png'/></h1>
<ul class="shoutbox-content"></ul>
<div class="shoutbox-form">
<h2>Write a message <span>×</span></h2>
<form action="./shout/publish.php" method="post">
<label for="shoutbox-name">nickname </label> <input type="text" id="shoutbox-name" name="name"/>
<label class="shoutbox-comment-label" for="shoutbox-comment">message </label> <textarea id="shoutbox-comment" name="comment" maxlength='240'></textarea>
<input type="submit" value="Shout!"/>
</form>
</div>
</div>
<!-- Include jQuery and the EmojiOne library -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://cdn.jsdelivr.net/emojione/1.3.0/lib/js/emojione.min.js"></script>
<script src="./shout/assets/js/script.js"></script>
</body>
</html>
Here is the /SHOUTDIREC/chat.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wyfi-Chat</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/emojione/1.3.0/assets/css/emojione.min.css"/>
<link rel="stylesheet" href="./assets/css/styles.css" />
</head>
<body>
<div class="shoutbox">
<h1>Shout box <img src='./assets/img/refresh.png'/></h1>
<ul class="shoutbox-content"></ul>
<div class="shoutbox-form">
<h2>Write a message <span>×</span></h2>
<form action="./publish.php" method="post">
<label for="shoutbox-name">nickname </label> <input type="text" id="shoutbox-name" name="name"/>
<label class="shoutbox-comment-label" for="shoutbox-comment">message </label> <textarea id="shoutbox-comment" name="comment" maxlength='240'></textarea>
<input type="submit" value="Shout!"/>
</form>
</div>
</div>
<!-- Include jQuery and the EmojiOne library -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://cdn.jsdelivr.net/emojione/1.3.0/lib/js/emojione.min.js"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>
I don't know why it's not working. Maybe a permission issue? Or what? I have no clue, and my mind is going absolutely nuts.
function AjaxShowForm(a, v) {
var data = $("#" + v).serialize();
$.ajax({
type: "POST",
url: "https://api.stackexchange.com/2.2/answers/45403161?order=desc&sort=activity&site=stackoverflow",
data: data,
beforeSend: function (html) { // this happens before actual call
$("#" + a).html("<img src='//vistablog.ir/images/loading_.gif'></img>loading..");
$("#" + a).show();
},
success: function (html) { // this happens after we get results
$("#" + a).html("");
$("#" + a).show();
$("#" + a).append(html);
}
});
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='' method='post' id='form1'>
<table dir='rtl' border='0'>
<tr>
<td>name <span style="color:red">*</span></td>
<td><input type='text' name='in1' required></td>
</tr>
<tr>
<td>description</td>
<td><textarea name='in3'></textarea></td>
</tr>
<tr>
<td>family</td>
<td><input type='text' name='in2'></td>
</tr>
<tr>
<td>email</td>
<td><input type='text' name='in4'></td>
</tr>
<tr>
<td>roles</td>
<td><input type='checkbox' name='in5'></td>
</tr>
<td></td>
<td><input type='submit' value='submit' onclick='return AjaxShowForm("showajax1","form1")'></td>
</table>
<p id='showajax1'></p></form>
</center>

How can I design multiple buttons in a JSP each onclick, will display different input options

My Requirement Description :: I am designing a webapp in JAVA which interacts with the DB (MySQL) and registers an employee, updates the employee information, query an employee with employee id and removes a record. In the backend I am using Hibernate framework.
So I should have 4 buttons in my webpage :
Add Employee
Update Employee
Remove Employee
Query Employee
On clicking "Add Employee" it should request the user for some info like employee id, name etc. And other 3 buttons should be on hidden mode.
Same case on clicking other buttons also.
My Problem :: I have designed my Webpage, how ever when I am clicking on any of the button, nothing is getting displayed. I am not sure where is the problem.
I have limited knowledge with JSP and CSS.
Please let me know where I am doing wrong and help me out in this situation
Here is my JSP code :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Employee Registration</title>
<style type="text/css">
.ui-jqgrid .ui-jqgrid-bdiv {
overflow-y: scroll;
background: #FBFBFB;
max-height: 220px;
}
</style>
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/js/jquery-ui-1.10.3/css/ui-lightness/jquery-ui-1.10.3.custom.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/js/jqGrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/button.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/design.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jquery.gritter.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jsn.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/main.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/s1.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/s2.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/style.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/somu.css">
<script type="text/javascript" src="/Employee/WebContent/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jqGrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
function display_ct() {
var strcount
var x = new Date()
var x1 = x.getHours() + ":" + x.getMinutes() + ":" + x.getSeconds();
document.getElementById("time_div").innerHTML = x1;
tt = display_c();
}
function display_c() {
var refresh = 1000; // Refresh rate in milli seconds
mytime = setTimeout('display_ct()', refresh)
}
function showDiv(element){
var type = element.value;
var effect = 'slide';
var options = {direction: "left"};
var duration = 500;
if (type == 'Employee Registration') {
alert("hi");
$('#id_register').show();
$('#id_update').hide();
$('#id_removal').hide();
$('#id_query').hide();
alert("done");
}
else if (type == 'Employee Update'){
$('#id_register').hide();
$('#id_update').show();
$('#id_removal').hide();
$('#id_query').hide();
}
else if (type == 'Employee Removal'){
$('#id_register').hide();
$('#id_update').hide();
$('#id_removal').show();
$('#id_query').hide();
}
else if (type == 'Employee Query'){
$('#id_register').hide();
$('#id_update').hide();
$('#id_removal').hide();
$('#id_query').show();
}
}
</script>
</head>
<body onload=display_ct();>
<div class="Bitmap">
<img src="Images/online-employee-registration.jpg" style="height: 800px; width: 1355px; position: absolute; z-index: -1;" />
</div>
<table width="1300" class="myTable">
<tr class="Labels">
<td align="center" width="800">
<b><font size="12"><label>Welcome to Employee Portal</label></font></b>
</td>
</tr>
</table>
<table width="1300" class="myTable">
<tr class="Labels">
<td align="right" width="200"><span id="time_div" class="clock2"></span></td>
</tr>
</table>
<center>
<form action="EmployeeRegistration" name="UserDetailsContract" method="post"
enctype="multipart/form-data" id="id_userDetailsContract">
<table>
<tr align="center">
<td>
<input value="Employee Registration"
type="button"
onclick="showDiv(this);" />
<input value="Employee Update"
type="button"
onclick="showDiv(this);" />
<input value="Employee Removal"
type="button"
onclick="showDiv(this);" />
<input value="Employee Query"
type="button"
onclick="showDiv(this);" />
</td>
</tr>
</table>
<div id="id_register" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Name:<td><input type="text" name="name"/></tr>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
<tr><td width="20%">Email ID:<td><input type="text" name="emailID"/></tr>
<tr><td width="20%">Phone:<td><input type="text" name="phone" size="30" /></tr>
<tr><td width="20%">City:<td><input type="text" name="city" size="30" /></tr>
</tbody>
</table>
<input type="submit" value="Register" />
</div>
<div id="id_query" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Search" />
</div>
<div id="id_update" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Update" />
</div>
<div id="id_removal" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Remove" />
</div>
<!-- <p /> -->
</form>
</center>
</body>
</html>

add new input after button is clicked

I need to have a button which will add a new text and input each time after the button is clicked.
Desired output after the button is clicked once.
But given my following codes, my new input will override the initial input.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>Input
<input type="text" class="form-control" readonly="readonly">
</td>
</tr>
</tbody>
</table>
<div class="form-group row" style="padding-top: 10px">
<div class="col-md-1 text-center">
<button id="addnewinputbtn" name="button" class="btn btn-default">Add New Input</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#addnewinputbtn').click(function() {
$('tr').appendTo('tbody')
.html(
'<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
});
});
</script>
</body>
</html>
this code
$('tr').appendTo('tbody').html(
'<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
});
.html() on tr will replace the html of tr element with the new input td element , you should append the new input td element in the tr element.
Edited: This code will replace the html of the tr element in the DOM since the selector $('tr') will select the tr element present in the DOM.
$('tr').appendTo('tbody')
.html(
'<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
});
but if you wan to create a new tr element, the code should be
$('').appendTo('tbody')
.html(
'New Input ');
});
$('') will create a new element.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>Input
<input type="text" class="form-control" readonly="readonly">
</td>
</tr>
</tbody>
</table>
<div class="form-group row" style="padding-top: 10px">
<div class="col-md-1 text-center">
<button id="addnewinputbtn" name="button" class="btn btn-default">Add New Input</button>
</div>
</div>
<script type="text/javascript">
$(document)
.ready(
function() {
$('#addnewinputbtn')
.click(
function() {
$('<tr>').appendTo('tbody').html(
'<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
});
});
</script>
</body>
</html>
Try doing appending it do the tr instead like so:
$('tr').append(...);
That will append a new element nested in the tr tag instead of appending a new element to the body thus overriding itself
You can use Jquery append to add another element.
function AddTextBox(){
$("#populateInput").append('<input type="text" class="customControl"/>')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="AddTextBox()">Add Input</button>
<div id="populateInput">
</div>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>Input
<input type="text" class="form-control" readonly="readonly">
</td>
</tr>
</tbody>
</table>
<div class="form-group row" style="padding-top: 10px">
<div class="col-md-1 text-center">
<button id="addnewinputbtn" name="button" class="btn btn-default">Add New Input</button>
</div>
</div>
<script type="text/javascript">
$(document)
.ready(
function() {
$('#addnewinputbtn')
.click(
function() {
$('tbody')
.append(
'<tr><td>New Input <input type="text" class="form-control" readonly="readonly"></td></tr>');
});
});
</script>
</body>
</html>

Categories