bootstrap accordion not working properly - javascript

i am trying to develop bootstrap accordion and it works fine in jsfiddle
But when i tried in my web app its not working.I have attached the screenshot how it looks.As you can see in the screenshot there are no errors in the console.i am including following in my jsp page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
Even I had replaced <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> in place of <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> but no luck.Please tell me what else do i need?
Following is the full code
<%# page import="java.sql.*" %>
<%# page import="DB.*" %>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>send sms</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="tabbable" id="myTabs">
<ul class="nav nav-tabs">
<li class="active">Send Message</li>
<li>Users</li>
<li>Group Message</li>
<li>Sign Out</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="btn-group-vertical pull-right" data-toggle="buttons-radio">
<%
DataBaseConnection db=new DataBaseConnection();
Connection con=db.connet();
PreparedStatement pt=con.prepareStatement("select * from registerSmsUsers");
ResultSet rs=pt.executeQuery();int i=1;
while(rs.next())
{%>
<button type="button" class="btn btn-primary btn-block" id="<%=rs.getString("mobile")%>"><%=rs.getString("name")%></button>
<%i++;}
%></div>
<div class="container">
<div class="row">
<div class="span12">
<h3>Send SMS to Individual number</h3>
<form class="form-signin" action="#" method="post" onsubmit="return false;">
<div class="row">
<div class="span3">
Enter Number to send:
</div>
<div class="span3">
<!-- <input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+22" rel="popover"/> -->
<!--<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" data-delay='{"show":"10", "hide":"3000"}'/>-->
<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+2222" rel="popover" data-trigger="hover" />
</div>
<!--<div class="span6">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
Please enter 10 digit mobile number prefixed by country code eg +911234567890<hr />
</div>
</div>-->
</div>
<div class="row">
<div class="span3">
Enter Message to send:
</div>
<div class="span3"> <div id="datetimepicker" class="input-append date">
<input style="display:none" type="text" name="body" maxlength="160" placeholder="Enter message to send" class=".dtext" id="body" data-trigger="hover"/>
<input type="text" id="txt" style="display:none"/>
<textarea rows="9" cols="50" class="darea1" id="darea"></textarea><span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
<!--<div class="span6">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
The text of the message you want to send, limited to 160 characters.
</div>
</div>-->
</div>
<div class="row">
<div class="span3">
</div>
<div class="span9">
<button class="btn" type="submit" id="openAlert" >Send</button>
</div>
</div>
</form>
</div>
</div>
<div id="le-alert" class="alert alert-warn alert-block fade">
<button href="#" type="button" class="close">×</button>
<h4>Successful</h4>
<p>Message sent successfully</p>
</div>
</div>
</div>
<!-- 2nd tab strats -->
<div class="tab-pane" id="tab2">
<form class="well span9" action="insertNew" method="post">
<div class="row">
<div class="span3">
<label>Name</label>
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required>
</div>
<div class="span3">
<label>Email Address</label>
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required>
</div>
<div class="span3">
<label>Mobile</label>
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required >
</div>
</div>
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
</form>
<input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
<!-- accordion strats-->
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
records
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table> </div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
groups here </div>
</div>
</div>
</div>
<!-- accordion ends-->
<!--<table border="1" id="mytable" class="table"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>-->
</div>
<!-- 2nd tab ends -->
<div class="tab-pane" id="tab3">
<p>para in section 3</p>
</div>
</div>
</div>
<script>
$(function() {
$("#datetimepicker").datetimepicker({
format: "'dd/MM/yyyy hh:mm:ss'",
linkField: "#txt",
linkFormat: "yyyy-mm-dd hh:ii",
autoclose: true,
});
jQuery('#datetimepicker').datetimepicker().on('changeDate', function(ev){
$(".darea1").val($( ".darea1" ).val()+$( "#txt" ).val());
});
});
</script>
<script>
$('#tabAll').click(function(){
$('#tabAll').addClass('active');
$('.tab-pane').each(function(i,t){
$('#myTabs li').removeClass('active');
$(this).addClass('active');
});
});
$('body').on('click', '.btn', function(){
if(this.id=='openAlert')
{$('#number').val('');}else{$('#number').val(this.id);}
});
</script>
<script >
$(document).ready(function(){
$("#signout").click(function() {
window.location.replace("logout.jsp");
});
//next line
var val=0;
$(document).ready(function(){
$('#btn1').click(function(){
if($(".span4").val()!="")
{
$("#mytable").append('<tr id="mytr'+val+'"></tr>');
$("#mytr"+val).append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr'+val+'" checked ></td>');
$(".span4").each(function () {
$("#mytr"+val).append("<td >"+$(this).val()+"</td>");
});
val++;
}
else
{
alert("please fill the form completely");
}
});
$('#btn2').click(function(){
var creat_group=confirm("Do you want to creat a group??");
if(val>1){
alert(creat_group);
}
});
});
//
$('#openAlert').click(function(){
var number = $('#number').val(); // If its a text input could use .text()
var msg = $('#darea').val(); //If its a text input could use .text()
alert(msg);
$.ajax(
{
type: "POST",
url: "messageSending.jsp", //Your full URL goes here
data: { toNumber: number, body: msg},
success: function(data, textStatus, jqXHR){
alert(data);
},
error: function(jqXHR){
alert(jqXHR.responseStatus);
}
});
});
});
</script>
<script>
$(function ()
{ $("#number").popover({title: 'Enter Mobile Number',content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890"});
});
$(function ()
{ $("#body").popover({title: 'Message Body',content: "Maximum 160 characters allowed"});
});
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
</body>
</html>


Head
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js" type="text/javascript">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" type="text/css" rel="stylesheet">
HTML
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/fzN4K/15/
Jquery 1.9.1 : http://jsfiddle.net/fzN4K/16/

Related

I want to stay on dashboard if local storage has access token and redirect to login if not

I am doing it but page continues to refresh as i have local storage token. Its JS that i am using for it.
[![Here is the image i dont want to get back to login page if there is token in local storage][1]][1]
[1]: https://i.stack.imgur.com/IwtcP.png
So here is the full code and this is working fine all i need is to set the check if the token is present in local storage then stay otherwise get back to login page
<html lang="en" style="height: auto;"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AdminLTE 3 | DataTables</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<link rel="stylesheet" href="/assets/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="/assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="/assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="/assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="/assets/dist/css/adminlte.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.1/axios.js"integrity="sha512-SXo2rCaEJmbAPoxtaSjW+/hLaVCMAJ1CX8XnIP02x6/LIaWQp4GipKxQhBwL8Tn5U/K+lD9AaM4f4mXJdKnDQw=="crossorigin="anonymous"referrerpolicy="no-referrer"></script>
<script src="https://kit.fontawesome.com/9f98b6568d.js" crossorigin="anonymous"></script>
</head>
<body >
<div class="wrapper">
<nav class="main-header navbar navbar-expand navbar-white navbar-light ml-0 ">
<ul class="navbar-nav">
<li class="nav-item">
</li>
<li class="nav-item d-none d-sm-inline-block">
View Hotels
</li>
<li class="nav-item d-none d-sm-inline-block">
Add Hotels
</li>
<li class="nav-item d-none d-sm-inline-block">
About Us
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
</li>
<li class="nav-item">
<a class="nav-link" onclick="logout();" role="button">
<i class="fa-solid fa-arrow-right-from-bracket "></i>
</a>
</li>
</ul>
</nav>
<div class="content-wrapper ml-0" style="min-height: 2080.12px;">
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1>DataTables</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
</ol>
</div>
</div>
</div>
</section>
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">DataTable with minimal features & hover style</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<div><div class="row"><div class="col-sm-12 col-md-6"></div><div class="col-sm-12 col-md-6"></div></div><div class="row"><div class="col-sm-12"><table class="table table-bordered table-hover dataTable dtr-inline" role="grid">
<thead>
<tr role="row"><th>Id</th><th >Name</th><th >Email</th><th>Password</th><th>Retype</th><th>Contact</th><th>Actions</th></tr>
</thead>
<tbody id="data">
<script>
axios
.get(
"https://localhost:8000/allusers")
.then((response) => {
console.log(response.data)
for (let i = 0; i < response.data.length; i++) {
document.getElementById('data').innerHTML+=`<tr class="odd">
<td class="dtr-control sorting_1" tabindex="0">${response.data[i].id}</td>
<td>${response.data[i].name}</td>
<td>${response.data[i].email}</td>
<td>${response.data[i].password}</td>
<td>${response.data[i].cpassword}</td>
<td >${response.data[i].contact}</td>
<td ><button class="btn btn-danger">Delete</button>Update</button></td>
`
}
})
.catch((error) => {
console.log(error);
});
</script>
</tbody>
</table>
</div>
</div>
<div class="card">
</div>
</div>
</div>
</div>
</section>
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="float-right d-none d-sm-block">
<b>Version</b> 3.1.0
</div>
<strong>Copyright © 2014-2021 AdminLTE.io.</strong> All rights reserved.
</footer>
<!-- Control Sidebar -->
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<!-- jQuery -->
<script src="/assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="/assets/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="/assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="/assets/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="/assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="/assets/plugins/jszip/jszip.min.js"></script>
<script src="/assets/plugins/pdfmake/pdfmake.min.js"></script>
<script src="/assets/plugins/pdfmake/vfs_fonts.js"></script>
<script src="/assets/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="/assets/plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="/assets/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<!-- AdminLTE App -->
<script src="/assets/dist/js/adminlte.min.js"></script>
<script>
$(function () {
$('#example2').DataTable({
"paging": false,
"lengthChange": false,
"searching": false,
"ordering": false,
"info": false,
"autoWidth": false,
"responsive": false,
});
});
</script>
<script>
const data=localStorage.getItem('token')
if(data===null)
{
window.location.href='/login'
}
else{
}
function logout(){
console.log(localStorage.getItem('token'))
axios
.get(
"https://localhost:8000/logout",{
headers: { Authorization:localStorage.getItem('token') }
})
.then((response) => {
window.location.href='/login'
})
}
</script>
</body></html>
login.html
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AdminLTE 3 | Log in</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"
/>
<link
rel="stylesheet"
href="/assets/plugins/fontawesome-free/css/all.min.css"
/>
<link
rel="stylesheet"
href="/assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css"
/>
<link rel="stylesheet" href="/assets/dist/css/adminlte.min.css" />
</head>
<body class="login-page" style="min-height: 496.781px">
<div class="login-box">
<div class="login-logo">
<b>Admin</b>LTE
</div>
<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">Sign in to start your session</p>
<div class="input-group mb-3">
<input
type="email"
class="form-control"
placeholder="Email"
name="email"
id="email"
/>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input
type="password"
class="form-control"
placeholder="Password"
name="password"
id="password"
/>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="icheck-primary">
<input type="checkbox" id="remember" />
<label for="remember"> Remember Me </label>
</div>
</div>
<div class="col-4">
<button onclick="login()" class="btn btn-primary btn-block">
Sign In
</button>
</div>
</div>
<p class="mb-1">
I forgot my password
</p>
<p class="mb-0">
<a href="register.html" class="text-center">
Register a new membership</a
>
</p>
</div>
</div>
</div>
</div>
<div class="w-100 h-100" id="demo">
<script src="/assets/plugins/jquery/jquery.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/assets/dist/js/adminlte.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.1/axios.js"
integrity="sha512-SXo2rCaEJmbAPoxtaSjW+/hLaVCMAJ1CX8XnIP02x6/LIaWQp4GipKxQhBwL8Tn5U/K+lD9AaM4f4mXJdKnDQw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script>
function login() {
axios
.post(
"https://localhost:8000/login",
{
email: document.getElementById('email').value,
password: document.getElementById('password').value,
},
{
headers: {'Content-Type': 'application/json'}
}
)
.then((response) => {
localStorage.setItem('token',response.data.token);
console.log(localStorage.getItem('token'))
if(localStorage.getItem('token')!=='undefined' ){
if(response.data.data==='f180111#nu.edu.pk'){
window.location.href="/dashboard"
}
else{
window.location.href="/userDashboard"
}
}
else{
window.location.href="/signup"
}
})
}
</script>
</body>
</html>

Unable to properly add TR to HTML from JS script

I keep getting an indexing error while trying to add TR tags to my HTML using the innerHTML attribute. This is what the JS script looks like.
var myTbody = document.querySelector(".table");
var button = document.querySelector(".add-stock");
var input = document.querySelector(".stock-input");
button.addEventListener("click", function () {
var td = document.querySelectorAll("td");
var row = myTbody.insertRow(td.length + 1);
var cell_univeral = row.insertCell(td.length - 1);
cell_univeral.innerHTML = input.value;
});
And this is the related html document:
<!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" />
<title>Technical</title>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="{{url_for('static', filename='css/technical.css')}}"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Home</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#">Technical</a>
<a class="nav-link" href="#">Alpha-Beta</a>
<a class="nav-link" href="#">Partition</a>
<a class="nav-link disabled">More</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="content">
<div class="top-form">
<form action='#' method="post">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"
>Ticker Symbols</label
>
<input
type="text"
class="form-control stock-input"
id="exampleInputEmail1"
aria-describedby="emailHelp"
name="nm"
/>
<div id="symbol" class="form-text">Add stocks one at a time</div>
</div>
<div class="buttons">
<div class="add-button">
<button type="button" class="btn btn-success add-stock">Add</button>
</div>
<div class="submit-button">
<button type="submit" class="btn btn-primary submit-btn">
Submit
</button>
<div class="spinner-border my-spinner hidden" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</form>
</div>
<div class="bottom-from">
<table class="table table-hover">
<thead>
<th>Symbol <span class="counter"></span></th>
</thead>
<tbody class="table-body">
</tbody>
</table>
<div class="alert alert-warning" role="alert">
It may take longer for multiple stocks
</div>
</div>
</div>
</div>
<script src="{{url_for('static', filename='script/technical.js')}}"
/></script>
</body>
</html>
Note that for the first two click events i have no problems whatsoever though i get this error when i click again
Uncaught DOMException: Index or size is negative or greater than the allowed amount
It seems like I'm trying to change the innerHTML of an item that is out of range but i honestly don't know what the actual problem is and how to fix it. Thank you for your help

How do have my page fill the username and password on an external site?

I am trying to make an HTML page, that when users access, it will take them to a 3rd party external site (I have no control over), and fill in the username and password fields, and log them in.
This is the source of the external site, which I got from my browser.
<!DOCTYPE html>
<html><head>
<title>Omitted | Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
var areActiveModsSelected = false;
var areInactiveModsSelected = false;
function SetActiveSelection()
{
var checkboxes = document.ActiveMods.getElementsByClassName("ModSelection");
areActiveModsSelected = !areActiveModsSelected;
SetSelection(checkboxes, areActiveModsSelected);
}
function SetInactiveSelection()
{
var checkboxes = document.InactiveMods.getElementsByClassName("ModSelection");
areInactiveModsSelected = !areInactiveModsSelected;
SetSelection(checkboxes, areInactiveModsSelected);
}
function SetSelection(checkboxes, isSelected)
{
for(var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = isSelected;
}
}
function checkSavegame()
{
var e = document.getElementById("savegame");
if (e != null) {
var savegame = e.options[e.selectedIndex].text;
var isEmpty = isEmptySavegame(savegame);
document.getElementById("mapSelector").disabled = !isEmpty;
document.getElementById("difficultySelector").disabled = !isEmpty;
}
}
function isEmptySavegame(value)
{
var ret = value.match(/SAVEGAME \d\d* - Empty/g) || value.match(/SPIELSTAND \d\d* - Leer/g) || value.match(/SAUVEGARDE \d\d* - Vide/g);
return ret != null;
}
window.onload = function()
{
checkSavegame();
}
</script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/monitor.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/all.js"></script>
</head>
<body>
<div class="white-bg clearfix">
<header class="main-header" role="banner" data-module="sticky">
<div class="header-bar clearfix"> <div class = "row column"> <div class = "top-bar-right"> <ul class = "menu float-left"><li><a target="_newTwitter" href="https://twitter.com/url"><span class="icon icon-twitter"></span></a></li><li><a target="_newFacebook" href="https://www.facebook.com/giants.farming.simulator"><span class="icon icon-facebook"></span></a></li><li><a target="_newYoutube" href="http://www.youtube.com/user/giantssoftware"><span class="icon icon-youtube"></span></a></li><li><a target="_newGoogleolus" href="https://plus.google.com/109211762279175256996"><span class="icon icon-google"></span></a></li> </ul>
<ul class="dropdown menu float-right"><li class="is-dropdown-submenu-parent is-down-arrow menu-flags"><img src="img/icons/flag-en.png" alt="lang"><ul class="menu submenu is-dropdown-submenu first-sub vertical"><li><img style="border:1px solid #000;" src="img/icons/flag-en.png" alt="English"><span class="country">English</span> <span>(en)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-de.png" alt="Deutsch"><span class="country">Deutsch</span> <span>(de)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-fr.png" alt="Francais"><span class="country">Francais</span> <span>(fr)</span></li></ul></li></ul> </div>
</div>
</div>
<div class="top-bar"> <div class="row column"> <div class="top-bar-left"> <img src="img/logo.png"> </div> <div class="top-bar-right"> <ul class="menu float-left"> <li><span>HOME</span></li>
<li><span>SAVEGAMES</span></li>
<li><span>MODS</span></li>
<li><span>JOURNAL</span></li>
<li><div class="status-indicator online"><span>ONLINE</span></div></li></ul></div></div></div></header><section class="content-wrap"><div class="row"> <div class="medium-8 columns">
<img src="template/gsfs.png"><br/><br/><h2>Login to server</h2>
<p>Please enter your login credentials</p>
<div class="row column">
<form name="input" action="index.html?lang=en" method="POST"><div class="table2"><div class="row column table-even"><div class="medium-3 columns column-label">Username</div><div class="medium-9 columns"><input type="text" name="username" value=""></div></div><div class="row column table-odd"><div class="medium-3 columns column-label">Password</div><div class="medium-9 columns"><input type="password" name="password" value=""></div></div><div class="row column table-even text-right">
<input class="button button-form-submit" name="login" type="submit" value="Login"></div></div></form><br />
<h2>Dedicated Server Mobile App (Free)</h2><div><a class="itunesbadge" href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1135922781&mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:135px;height:40px;background-position: center;"></a><a class="googleplaybadge" href="https://play.google.com/store/apps/details?id=com.giantssoftware.fs17_dedi_app" style="margin-left: 5px; display:inline-block;overflow:hidden;background:url(https://play.google.com/intl/en_us/badges/images/apps/en-play-badge-border.png) no-repeat;width:141px;height:40px;background-size: cover;background-position-x: -4px;background-position-y: -3px;"></a></div></div>
</div>
<div class="medium-4 columns">
<div class="social-wrapper">
<div class="social-header clearfix">
<div class="title-wrap clearfix" style="line-height: 62px;">
<i class="icon icon-twitter"></i><span>Twitter</span>
</div>
Follow
</div>
<!-- Load from cache: ../cached/fs17_dedi_twitter_cache_farmingsim_4.json-->
<div class="social-news-block">
<p>RT hi: Come and meet us at E3 at booth West Hall #4512 to learn more about Farming Simulator 19, the next game in the successf…</p>
<span class="post-date">about 1 hour ago</span>
</div>
<div class="social-news-block">
<p>Are you are bale stacking champion? Are you at #blank ? Then show us your skills. The… <a target="_blank" href="blank">nothing</a></p>
<span class="post-date">4 days ago</span>
</div>
<div class="social-news-block">
<span class="post-date">11 days ago</span>
</div>
<div class="social-news-block">
<p>RT #url: We are glad to announce our plans for further expansion by moving to bigger office spaces for our two existing studios…</p>
<span class="post-date">12 days ago</span>
</div>
</div>
</div>
</div>
</section>
<div class="partners clearfix text-center"> <div class="row"> <div class="columns">
<img style="vertical-align:text-top;" src="template/image_11.gif" /> </div> </div> </div> <footer class="main-footer clearfix">
<div class="row">
<div class="medium-8 columns">
<div class="copyright"><img class="copyright__logo" src="img/logos/footer-logo.png"><div>© 2016 GIANTS Software GmbH Alle Rechte vorbehalten.<br>Alle anderen Warenzeichen sind das Eigentum ihrer jeweiligen Besitzer.</div></div> </div>
<div class="medium-4 small-12 columns">
<ul class="menu menu-footer float-right">
<li>7.0.5.0</li>
</ul>
</div>
</div>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/frontend.js"></script>
<script>$(document).foundation();</script>
</div>
</body>
</html>
I tried this, but it simply redirects to the page without filling any of the fields.
<DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
window.onload = function() {
document.getElementById('loginForm').submit();
};
</script>
</head>
<body>
<form id="loginForm" action="URL of site" method="POST">
<input type=hidden name="username" value="moo"/>
<input type=hidden name="password" value="boo"/>
</form>
</body>
</html>
What is wrong with my code, and how can I achieve my goal?
Thank you.

How to show pop-up on button click in JSP

I have the following page in jsp .
The code of the page is as following :
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="JavaScript">
<!--
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
function check()
{
var uname=document.scan.elements[0].value
var bError=false
if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true
if (inStrGrp(uname,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
return true
}
-->
</Script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY onload="document.scan.name.focus();">
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p><font color="#0055FF">Enroll</font></p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<form name="scan" method="POST" action="enroll.jsp" onsubmit="return check()">
<p>Please input your name: <input type="text" name="name" size="20"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="submit" value=" Enroll " name="btnEnroll"></p>
</form>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
</center>
</BODY>
</HTML>
When I click on Enroill button I want to show a pop-up like as following with an image source tag .
How can I do this on Jsp ? Any advice is of great help .

Here is code snippet using bootstrap
<!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">
<title>Online Demonstration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<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.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Online Demonstration</div>
<form name="scan" method="POST" action="enroll.asp">
<div class="panel-body">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<div class="row">
<div class="form-group">
<label class="col-md-5">Please input your name:</label>
<div class="col-md-5">
<input type="text" class="form-control" id="UserName"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-5">If you want to enroll 2 fingers, please check the box.</label>
<div class="col-md-5">
<input type="checkbox" name="chk2Finger" value="2">
</div>
</div>
</div>
<input class="btn btn-default" type="submit" value="Submit">
</div>
</form>
</div>
</div>
<!-- Modal code goes here-->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class=row>
<img src="" class="img-thumbnail col-lg-2">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- /.modal -->
<script type="text/javascript">
function inStrGrp(src,reg){
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
$(document).ready(function(){
$('input[type="submit"]').click(function (e) {
e.preventDefault();
var userName = document.getElementById('UserName').value;
var bError=false
if (userName.length==0)
{
window.alert("Name is required.\n")
return false
}
if (userName.indexOf("\\")>=0)
bError=true
if (inStrGrp(userName,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
$('#myModal').modal('show');
return true
});
});
</script>
</body>
</html>
Hope it will help.Thanks

With pure its not possible to show pop up and show image on that pop up.You can do it with jquery UI dialog .
And it will be great if you use bootstrap framework which have modal where you can insert anything you want.

bootstrap double datepicker value parsing

I have a form with 2 field that contains bootstrap datepicker. And I wanna set the startDate Of second field with the value from first field. can you
help me?? Here is my sample html code
<title>Pusat Penelitian Bioteknologi LIPI</title>
<link rel="shortcut icon" href="http://localhost/SIPEKAT/assets/img/logolipi.png" type="image/x-icon">
<link href="http://localhost/SIPEKAT/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="http://localhost/SIPEKAT/assets/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<script src="http://localhost/SIPEKAT/assets/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="http://localhost/SIPEKAT/assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://localhost/SIPEKAT/assets/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="http://localhost/SIPEKAT/assets/js/notifikasi.js"></script>
<script src="http://localhost/SIPEKAT/assets/js/bootstrap-datepicker.js"></script>
<link href="http://localhost/SIPEKAT/assets/css/datepicker.css" rel="stylesheet">
<link href="http://localhost/SIPEKAT/assets/css/dashboard.css" rel="stylesheet">
<!--header-->
<!--header-->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color:#7AD0E7;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://localhost/SIPEKAT/beranda_user"><img src="http://localhost/SIPEKAT/assets/img/logolipikecil.png"> </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li >
<a href="http://localhost/SIPEKAT/beranda_user"><font color="white">
<b>BERANDA</b></font>
</a>
</li>
<li class="active">
<a href="http://localhost/SIPEKAT/barang_user"><font color="white">
<b>BARANG</b></font>
</a>
</li>
<li >
<a href="http://localhost/SIPEKAT/informasi_user"><font color="white">
<b>INFORMASI</b></font>
</a>
</li>
<li >
<a href="http://localhost/SIPEKAT/riwayat"><font color="white">
<b>RIWAYAT</b></font>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" >
<font color="white"><b><span class="glyphicon glyphicon-user"></span> tutang</b> <span class="caret"></span></font>
<ul class="dropdown-menu">
<li>MENU ADMIN</li>
<li>PROFIL</li>
<li class="divider"></li>
<li>LOGOUT</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->
<div class="panel panel-default" style="background-color:#f5f5f5">
<h5 style="margin-left:1150px">24-Mar-2015</h5>
</div>
<!--judul-->
<div class="panel panel-default" style="margin-top:5px;">
<div class="panel-body" style="background-color:#f1f1f2">
<h3 style="margin-left:115px;">DAFTAR BARANG / FORMULIR PEMINJAMAN</h3>
</div>
</div>
<!--body-->
<div class="container" style="background-color:#F1F1F2; margin-top:20px; margin-bottom:20px;" >
<div class="panel-body">
<form class="form-horizontal" role="form" method="post" id="form_pinjam" name="form_pinjam" action="http://localhost/SIPEKAT/barang_user/simpan">
<div class="form-header" style="background-color:#7AD0E7;">
<font color="white"><center>INFORMASI BARANG<center></font>
</div>
<br />
<div class="form-group">
<label for="nama_barang" class="col-md-3 control-label">Nama Barang</label>
<div class="col-md-8">
<input type="text" class="form-control" id="nama_barang" name="nama_barang" placeholder="Nama Barang" value="Thermohygrometer / Alat Ukur " disabled>
<input type="hidden" name="nama_barang_tmp" id="nama_barang_tmp" value="Thermohygrometer / Alat Ukur ">
<input type="hidden" name="kd_barang" id="kd_barang" value="3030301086">
<input type="hidden" name="nip" id="nip" value="196304231988031002">
</div><br />
</div>
<div class="form-group">
<label class="col-md-3 control-label">Pilih Aset</label>
<div class="col-md-8">
<table class="table">
<thead>
<tr>
<th></th>
<th><center>Kode Aset</center></th>
<th><center>Kondisi</center></th>
<th><center>Status</center></th>
<th><center>Keterangan</center></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox" >
<label><input type="checkbox" name="aset[]"value="3030301086-001"></label>
</div>
</td>
<td><center>3030301086-001</center></td>
<input type="hidden" id="kondisi_3030301086-001" value="baik">
<input type="hidden" id="status_3030301086-001" value="baik">
<td><center>baik</center></td>
<td><center>baik</center></td>
<td><center>-</center></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="form-header" style="background-color:#7AD0E7;">
<font color="white"><center>INFORMASI LAINNYA<center></font>
</div><br />
<div class="form-group">
<label for="keperluan" class="col-md-3 control-label">Keperluan</label>
<div class="col-md-8">
<textarea class="form-control" name="keperluan" id="keperluan" placeholder="Keperluan"></textarea>
</div>
</div>
<div class="form-group">
<label for="tanggal_pinjam" class="col-md-3 control-label">Tanggal pinjam</label>
<div class="col-md-8">
<input type="text" class="form-control" name="tanggal_pinjam" id="tanggal_pinjam" placeholder="Tanggal pinjam" >
</div>
</div>
<div class="form-group">
<label for="tanggal_kembali" class="col-md-3 control-label">Tanggal Kembali</label>
<div class="col-md-8">
<input type="text" class="form-control" name="tanggal_kembali" id="tanggal_kembali" placeholder="Tanggal Kembali">
</div>
</div>
<div style="margin-left:900px">
<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
<button class="btn btn-primary btn-sm" type="submit" form="form_pinjam" id="kirim">Kirim</button>
</div>
</form>
</div>
</div>
</div>``
<script type="text/javascript">
$(document).ready(function () {
$('#tabel').dataTable();
var date = new Date();
date.setDate(date.getDate()); //disini tempat buat ganti hari mulainya datepicker
$('#tanggal_pinjam').datepicker({
format: "yyyy-mm-dd",
weekStart: 1,
startDate: date,
clearBtn: true,
language: "id",
keyboardNavigation: false,
forceParse: false,
daysOfWeekDisabled: "0,6",
todayHighlight: true,
});
$('#tanggal_kembali').datepicker({
format: "yyyy-mm-dd",
weekStart: 1,
clearBtn: true,
language: "id",
startDate: date ,
keyboardNavigation: false,
forceParse: false,
daysOfWeekDisabled: "0,6",
todayHighlight: true
});
});
</script>

I think what you are trying to do is something like this:
Below is the js code: http://jsfiddle.net/rgej2z2e/
$(document).ready(function(){
$('.dt').datepicker({minDate:0});
$('#startDate').on('change', function(e){
$('#endDate').datepicker('update', $(this).val());
});
});
I hope it's help :)

Categories