Unable to load the array data into table on web page - javascript

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);

Related

How to save multiple form data using jquery ajax in laravel?

I am a bit confused with this. How to save multiple row data in laravel using ajax? The idea is to add products and when click on submit button I want to save the table data in database. I am getting an error as invalid argument supplied for foreach in my controller.
This is my blade template with script.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Products Invoice</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="row" id="invoice-data">
<div class="col-md-12">
<table class="table table-bordered" id="main_table">
<thead>
<tr>
<th scope="col">Product Name</th>
<th scope="col">Description</th>
<th scope="col">Price</th>
<th scope="col">Qty</th>
{{--<th scope="col">Discount</th>--}}
<th scope="col">Amount</th>
<th scope="col">
<button class="btn btn-success addRow">Add More</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="product_name[]" class="form-control productname" id="row_0">
<option>Select Product</option>
#foreach($products as $product)
<option name="product_name[]" value="{{$product->id}}">{{$product->name}}</option>
#endforeach
</select>
</td>
<td><input type="text" name="description[]" class="form-control description" readonly></td>
<td><input type="text" id="price" name="price[]" class="form-control price"
onkeyup="rateChange($(this));" readonly></td>
<td><input type="text" name="qty[]" class="form-control qty" onkeyup="qtyChange($(this));"
onkeypress='return onlynumbers(event);'></td>
{{--<td><input type="text" name="dis[]" class="form-control dis"></td>--}}
<td><input type="text" name="amount[]" id="amount" class="form-control amount" readonly></td>
<td><a class="btn btn-danger remove">X</a></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12">
<div class="form-group float-right">
<label for="discount"><b>SubTotal</b></label>
<input type="text" name="subTotal[]" id="subTotal" class="subTotal">
</div>
</div>
<div class="col-md-12">
<div class="form-group float-right">
<label for="discount"><b>Discount <span>%</span></b></label>
<input type="text" name="discount[]" id="discount" class="discount" onkeyup="amount_discount();"
onkeypress='return onlynumbers(event);'>
</div>
</div>
<div class="col-md-12">
<div class="form-group float-right">
<label for="SubTotal"><b>Total</b></label>
<input type="text" name="total[]" id="total" class="total" readonly>
</div>
</div>
<div class="col-md-12">
<div class="form-group float-right">
<button type="button" id="saveInvoice" name="saveInvoice" class="btn btn-success float-right">Submit</button>
</div>
</div>
</div>
</div>
</body>
<script>
$("#saveInvoice").click(function () {
$.ajax({
url: "{{ route('invoice.store') }}",
method: "POST",
data: $("#invoice-data").serialize(),
dataType: "json",
success: function (data) {
console.log(data);
}
});
});
</script>
</html>
And this is my controller to store the data.
public function store(Request $request)
{
$invoices = [];
foreach ($request->input('product_name') as $key => $value) {
$invoices["product_name.{$key}"] = 'required';
$invoices["description.{$key}"] = 'required';
$invoices["price.{$key}"] = 'required';
$invoices["qty.{$key}"] = 'required';
$invoices["amount.{$key}"] = 'required';
$invoices["subTotal.{$key}"] = 'required';
$invoices["discount.{$key}"] = 'required';
$invoices["total.{$key}"] = 'required';
}
$validator = Validator::make($request->all(), $invoices);
if ($validator->passes()) {
foreach ($request->input("product_name") as $key => $value) {
$invoice = new Invoice;
$invoice->product_name = $request->get("product_name")[$key];
$invoice->description = $request->get("description")[$key];
$invoice->price = $request->get("price")[$key];
$invoice->qty = $request->get("qty")[$key];
$invoice->amount = $request->get("amount")[$key];
$invoice->subTotal = $request->get("subTotal")[$key];
$invoice->discount = $request->get("discount")[$key];
$invoice->total = $request->get("total")[$key];
$invoice->save();
}
}
}
It returns me 500 internal server error.
I think you need to print the "$request->input('product_name')" before foreach loop to check product name is coming is an array or not? because error you are getting is " invalid argument supplied for foreach in my controller". Just write print_r($request->input('product_name')) and check value is coming is an array or not?

Dynamic table is not updating when used in Flask, but works properly otherwise [duplicate]

This question already has answers here:
Is it possible to use AngularJS with the Jinja2 template engine?
(2 answers)
How to render by Vue instead of Jinja
(9 answers)
Closed 4 years ago.
this is my HTML code
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<script src="{{url_for('static', filename='login.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/pl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/ggg4zmxzjgz4i9b/style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
</head>
<body>
<div id="app">
<div class="col-xs-5" id="mail_div">
<label for="mail">Mail:</label>
<input v-model="mail" placeholder="Adres e-mail:" type="text" class="form-control" id="mail">
</div>
<div class="col-xs-5" id="date_div">
<label for="date">Data:</label>
<div class='input-group date' id='datetimepicker1'>
<input v-model="date" placeholder="Wybierz datę:" type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-5" id="adress_div">
<label for="adress">Adres:</label>
<input v-model="adress" placeholder="Podaj adres:"type='text' class="form-control" id="adress">
</div>
<div class="col-xs-5" id="company_div">
<label for="company">Firma:</label>
<input v-model="company" placeholder="Podaj firmę:"type='text' class="form-control" id="company">
</div>
<div class="col-xs-5" id="fliers_div">
<label for="fliers">Ulotki:</label>
<input v-model="fliers" placeholder="Wpisz liczbę ulotek:" type='number' class="form-control" id="fliers">
</div>
<div id="table">
<table class="table">
<thead>
<th scope="col">Mail</th>
<th scope="col">Data</th>
<th scope="col">Adres</th>
<th scope="col">Firma</th>
<th scope="col">Ulotki</th>
</thead>
<tbody>
{% for item in rowData %}
<tr>
<th scope="row">{{ item.mail }}</th>
<td>{{ item.date }}</td>
<td>{{ item.adress }}</td>
<td>{{ item.company }}</td>
<td>{{ item.fliers }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div id="button">
<div id="button_container_1">
<button type="button" class="btn btn-primary" #click="addItem">Dodaj dane</button>
</div>
<div id="button_container_2">
<button type="button" class="btn btn-success">Pobierz dane</button>
</div>
</div>
</div>
<script src="{{url_for('static', filename='script.js')}}"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({locale:'pl'});
});
</script>
</body>
And my script.js
var app = new Vue({
el: '#app',
template:'',
data: {
mail:'',
date:'',
adress:'',
company:'',
fliers:'',
rowData:[]
},
methods:{
addItem(){
var my_object = {
mail:this.mail,
date:this.date,
adress:this.adress,
company:this.company,
fliers:this.fliers
};
this.rowData.push(my_object)
this.mail = '';
this.date = '';
this.adress = '';
this.company = '';
this.fliers = '';
}
}
})
When I open this on localhost after running Flask, it doesn't insert any rows in the table after clicking blue button. The same feature works when I just open the .html file (no Flask), of course with the change of script.js reference. I see no errors in the console, even when I press the button, so I don't think it's an issue with button properties. You can also see that the value in the form disappears after pressing the button. The button works, so I think that I should change something in Vue.js components, but I don't know what.
I already have a working solution. I've ditched using a "{{ ... }}" syntax, which conflicts with Flask and put my "item.(...)" components in "v-text" tag instead.

Clearing the form input fields

[![output image][1]][1]
I have made a webpage in which I am reading data from a JSON file and displaying it. I am also taking input from input fields and displaying it along with the previous data. But when I click on submit button, the input fields does not get cleared and still have the previous input data. I am resetting the fields but still it's not working.
Here is my code.
<!DOCTYPE html>
<html ng-app="Provider List">
<head>
<meta charset="utf-8">
<title>Provider's List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
</script>
<script type="text/javascript" src= "script/script.js"></script>
</head>
<body ng-controller="Controller">
<div class="container">
<div class="title">
<h1>Provider Directory</h1>
<h5>v2.0</h5>
</div>
<div class="tableDiv">
<div class="providerList">
<p>Provider List</p>
</div>
<table style="width: 100%;">
<thead>
<tr>
<th ng-click="sortData('last_name')">Last Name <div ng-class="getSortClass('last_name')"></div> </th>
<th ng-click="sortData('first_name')">First Name <div ng-class="getSortClass('first_name')"></div> </th>
<th ng-click="sortData('email_address')">Email <div ng-class="getSortClass('email_address')"></div> </th>
<th ng-click="sortData('specialty')">Specialty <div ng-class="getSortClass('specialty')"></div> </th>
<th ng-click="sortData('practice_name')">Practice Name <div ng-class="getSortClass('practice_name')"></div> </th>
<th ng-click="">Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="peoples in people | orderBy:sortColumn:reverseSort">
<td>{{peoples.last_name}}</td>
<td>{{peoples.first_name}}</td>
<td>{{peoples.email_address}}</td>
<td>{{peoples.specialty}}</td>
<td>{{peoples.practice_name}}</td>
<td><input type="button" value = "Delete" text = "Button" data-ng-click="removeRow($index)"/> </td>
</tr>
</tbody>
</table>
</div>
<div class="quickaddForm">
<form class="form-horizontal" role="form" ng-submit="addRow()">
<label>Create Provider</label>
<div class="form-group">
<label class="col-md-2 control-label">Last Name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="last_name"
ng-model="last_name" required />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="first_name"
ng-model="first_name"required/>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Email</label>
<div class="col-md-4">
<input type="text" class="form-control" name="email_address"
ng-model="email_address" required />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Specialty</label>
<div class="col-md-4">
<input type="text" class="form-control" name="specialty"
ng-model="specialty" required />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Practice</label>
<div class="col-md-4">
<input type="text" class="form-control" name="practice_name"
ng-model="practice_name" required/>
</div>
</div>
<div class="form-group">
<div style="padding-left:130px; padding-top:20px">
<input type="submit" value="Submit" class="btn"/>
</div>
</div>
</form>
</div>
</div>
And Here is JAVASCRIPT CODE:
var ProviderList = angular.module('Provider List', []);
ProviderList.controller('Controller', function ($scope, $http){
/*
Reading the data from JSON file
*/
$http.get('people.json').success(function(data) {
$scope.people = data.people;
$scope.sortColumn="LastName"
$scope.reverseSort = false;
/*
Sorting the selected column by clicking on the table heading
*/
$scope.sortData = function (column) {
$scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
$scope.sortColumn = column;
}
$scope.getSortClass = function (column) {
if ($scope.sortColumn == column) {
return $scope.reverseSort ? 'arrow-down' : 'arrow-up';
} return '';
}
/*
Adding the data in JSON format which was entered in the form fields
*/
$scope.addRow = function(){
$scope.people.push({ 'last_name':$scope.last_name,
'first_name': $scope.first_name,
'email_address':$scope.email_address,
'specialty' :$scope.specialty,
'practice_name': $scope.practice_name
});
/*
To clear the input fields once SUBMIT button is clicked.
*/
$scope.people.last_name=' ';
$scope.people.first_name=' ';
$scope.people.email_address='';
$scope.people.specialty='';
$scope.people.practice_name='';
};
/*
Removing the selected row by clicking the delete button.
*/
$scope.removeRow = function (idx) {
$scope.people.splice(idx, 1);
};
});
});
You are binding your inputs with $scope variables so the inputs will be always having the values in your controller, so you need to reset these values in your controller.
And here in your code you are clearing the wrong variables:
$scope.people.last_name=' ';
$scope.people.first_name=' ';
$scope.people.email_address='';
$scope.people.specialty='';
$scope.people.practice_name='';
You need to clear the binded variables without .people, because you are just clearing variables inside your people object here.
So that's what you need:
$scope.last_name='';
$scope.first_name='';
$scope.email_address='';
$scope.specialty='';
$scope.practice_name='';
First add a name for your form, say myForm (not a must if you are not using AngularJS's form validation).
<form name="myForm" class="form-horizontal" role="form" ng-submit="addRow()"></form>
Under the addRow() method in your Angular controller, manually reset all data model values and $setPristine().
$scope.addRow = function() {
// Your codes to submit the data to server
// ...
// Manual Reset
$scope.first_name = '';
$scope.last_name = '';
// Set Form Pristine (Not a must if you are not using AngularJS's form validation)
$scope.myForm.$setPristine();
}

JAVASCRIPT: Dynamic table row with auto-generated combination of selected value

I ask my first question about this at SELECT: Combine value of two or more select and get their combination as output. Now, after I googling I find about dynamic table row creation and deletion and I used this into my problem. After an hour of codings and analyzing, I got this one. My problem now is is following listed below:
1. When I only have 1 select and I choose an option nothing happens, I will work when I add new row that contains another select.
2. When I deleted 1 row the value in my input box did not remove.
3. I can only delete the last row, it is possible to choose?
The following codes are the following below. I hope you may help me about this.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="Cache-control" content="no-cache"> <!--The No-Cache-->
<title>Elements Combination</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Elements
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<select class="form-control" name='name0' >
<option value="H">Hydrogen</option>
<option value="He">Helium</option>
<option value="Be">Beryllium</option>
<option value="B">Boron</option>
<option value="C">Carbon</option>
<option value="N">Nitrogen</option>
</select>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
<input type="text" class="form-control" placeholder="Combination Here" name="combination" id="combination" readonly="">
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><select class='form-control' name='name"+i+"' ><option value='H'>Hydrogen</option><option value='He'>Helium</option><option value='Be'>Beryllium</option><option value='B'>Boron</option><option value='C'>Carbon</option><option value='N'>Nitrogen</option></select></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
$('select').on('change', function(){
var s = '';
$('select').each(function(){
if(s == '') {
s = $(this).val();
} else {
s = s + ' + ' + $(this).val() ;
}
})
$('#combination').val(s);
})
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
</script>
Think about using re-usable functions this will help your code to be much more modular. You could put a delete row function on each row.
See example here: https://jsfiddle.net/dcpcq56v/
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="Cache-control" content="no-cache"> <!--The No-Cache-->
<title>Elements Combination</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Elements
</th>
<th class="text-center" style="width:20%;">
</th>
</tr>
</thead>
<tbody id='element_table'>
</tbody>
</table>
<input type="text" class="form-control" placeholder="Combination Here" name="combination" id="combination" readonly="">
<a id="add_row" class="btn btn-default pull-left">Add Row</a>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var select_item = function(){
$('#combination').val(
$("#element_table select").map(function(index, element){ return $(element).val(); }).get().join("+")
);
};
var add_row = function(){
var new_row = $("<tr><td>"+ ($("#element_table>tr").length+1) +"</td><td><select class='form-control'><option value='H'>Hydrogen</option><option value='He'>Helium</option><option value='Be'>Beryllium</option><option value='B'>Boron</option><option value='C'>Carbon</option><option value='N'>Nitrogen</option></select></td><td><a id='delete_row' class='pull-right btn btn-default'>Delete Row</a></td></tr>").appendTo("#element_table");
select_item();
new_row.find('select').on('change', select_item);
new_row.find("#delete_row").click(function(){
$(this).parents("tr").remove();
select_item();
});
};
add_row();
$("#add_row").click(add_row);
});
</script>
You can create some sort of delete icon in each <td> with number of row.
$(deleteIcon).click(function ()
var td = $(this).parent()[0];
$(td).parent()[0].remove();
});

how to toggle between two html pages by clicking on links

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();
});
});

Categories