I am not able to get the datepicker to work. this is a second page in the application and loads the header.jsp which has the navigation bar.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<jsp:include page="/WEB-INF/views/header.jsp" />
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="<c:url value="/resources/js/bootstrap-datepicker.js" />"></script>
<jsp:useBean id="patient" class="com.mycompany.model.Patient" scope="session"/>
<jsp:setProperty name="patient" property="*"/>
<form class="navbar-form pull-left" method="POST" action="/myapp/success">
<div><table>
<tr><td>Patient ID </td><td> <input name ="pid" type="text" class="form-control" style="width: 200px;" required></td></tr>
<tr><td>First Name </td><td><input name="first_name" type="text" class="form-control" style="width: 200px;"></td></tr>
<tr><td>Last Name </td><td><input name="last_name" type="text" class="form-control" style="width: 200px;"></td></tr>
<tr><td>Age </td><td><input name="age" type="text" class="form-control" style="width: 200px;"></td></tr>
<tr><td><button type="submit" class="btn btn-default">Save</button></td></tr>
</table></div>
</form>
<div>
<div class='well'>
<input type='text' class="form-control" id='datetimepicker6'/>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker6').datepicker();
});
</script>
</div>
please tell me where i am going wrong... the jquery doesn't seem to be working for me
Related
So I am currently getting a
Cross origin requests are only supported for HTTP.
After looking it on for a while I was able to determine it happens when you try to upload javascript files from local and not http that issue occurs.
My jsp on back end
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Product Finder</title>
</head>
<body ng-app="myProductFinder">
<div class="generic-container" ng-controller="UserController as ctrl">
<form ng-submit="ctrl.submit()" name="myForm" class="form-horizontal">
<input type="text" ng-model="ctrl.searchString" id="uname" class="username form-control input-sm" placeholder="Enter your name" required/>
<input type="submit" value="Search" class="btn btn-primary btn-sm">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="<c:url value='/static/js/app.js' />"></script>
<script src="<c:url value='/static/js/service/productSearchService.js' />"></script>
<script src="<c:url value='/static/js/controller/productSearchController.js' />"></script>
</body>
</html>
My rendered page on fron end source
<html>
<head>
<title>Product Finder</title>
</head>
<body ng-app="myProductFinder">
<div class="generic-container" ng-controller="UserController as ctrl">
<form ng-submit="ctrl.submit()" name="myForm" class="form-horizontal">
<input type="text" ng-model="ctrl.searchString" id="uname" class="username form-control input-sm" placeholder="Enter your name" required/>
<input type="submit" value="Search" class="btn btn-primary btn-sm">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="/searchMart/static/js/app.js"></script>
<script src="/searchMart/static/js/service/productSearchService.js"></script>
<script src="/searchMart/static/js/controller/productSearchController.js"></script>
</body>
</html>
If you look at the script on last 3 lines it is pointing to local path and not through localhost which I would expect it to go through. I am using jetty to run it. Does anyone know why it is not picking the local host url
I was not putting http:// in my get request in my service js.
$http.get('http://localhost:8080/searchMart/index/search',productName)
How can I use <video> tag for my spring application in jsp page with jstl tags
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%#page session="true"%>
<html>
<head>
<link href="<c:url value="/resources/css/bootstrap.css" />"
rel="stylesheet">
<title>Login Page</title>
<style>
</style>
</head>
<script src="<c:url value="/resources/js/jquery.1.10.2.min.js" />"></script>
<script src="<c:url value="/resources/js/main.js" />"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
</script>
<body onload='document.loginForm.username.focus();'>
<nav>
<h1>CHALLENGER</h1>
<video width="320" height="240" controls="controls">
<source src="C:\\Users\\ratheesh\\Downloads\Linux\\LinuxInspires.mp4" type="video/mp4" />
</video>
<ul>
<li id="login"><a id="login-trigger" href="#"> Log in <span></span>
</a>
<div id="login-content">
<c:if test="${not empty error}">
<div class="error">${error}</div>
</c:if>
<c:if test="${not empty msg}">
<div class="msg">${msg}</div>
</c:if>
<form name='loginForm'
action="<c:url value='/j_spring_security_check' />" method='POST'>
<fieldset id="inputs">
<input type='text' name='username' id="username"
placeholder="Your email address" required> <input
type='password' name='password' id="password"
placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input name="submit" type="submit" id="submit" value="submit" />
<label><input type="checkbox" checked="checked">
Keep me signed in</label>
</fieldset>
<input type="hidden" name="${_csrf.parameterName}"
value="${_csrf.token}" />
</form>
</div></li>
</ul>
</nav>
</body>
</html>
I am wondering why this is not loading video on my jsp page
when I put the same video tag in stand alone html page it is working
Any help will be appreciated highly
I'm trying to code a checkbox that must be checked in order for the "Submit" button on a form to be enabled. I first tried using a linked file to no avail; now even inserting the script doesn't seem to work. Can anyone help? The entire code for the page is posted below. Thanks in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="includes/imagetransition.js"></script>
<script type="text/javascript" src="includes/checkenabledisable.js"></script>
<script type="text/javascript">
var checker = document.getElementById('acknowledgment');
var sendbtn = document.getElementById('submitmessage');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
</script>
<title>Contact Us</title>
</head>
<body>
<div class="page-wrapper">
<div id="header">
<img src="images/img1.jpg" name="slideshow" width="70%" height="200" alt="headerimage.gif"><br>
Previous |
Auto/Stop |
Next</div>
<br><br>
<aside class="sidebar">
<div id="vmenu">
<ul>
<li class="sideli">Home</li>
<li class="sideli">Areas</li>
<li class="sideli">Profiles</li>
<li class="sideli">Contact Us</li>
</ul>
</div>
</aside>
<section class="main">
We will review your submission and contact you, usually within 72 hours.</p>
<form action="actionemail.php" method="post">
<table class="emailtable">
<tr><td><label for="name" class="emaillabel">Name: </label></td><td><input type="text" name="fullname" size="50" value="Name" style="width: 290px;" /></td></tr>
<tr><td><label for="phone" class="emaillabel">Phone: </label></td><td><input type="text" name="phone" size="20" value="Phone" style="width: 290px;" /></td></tr>
<tr><td><label for="email" class="emaillabel">Email: </label></td><td><input type="text" name="email" size="50" value="Email" style="width: 290px;" /></td></tr>
<tr><td><label for="comment" class="emaillabel">Issue: </label></td><td><textarea rows="3" cols="26" name="comment" value="Tell Us More" style="width: 290px; height: 55px"></textarea></td></tr>
</table><br>
<input id="acknowledgment" type="checkbox" name="acknowledgment" value="1" /><label for="acknowledgment">I acknowledge that there may be a delay in responding to this request.</label><br>
<br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled />
</form>
</section>
</div>
</body>
</html>
Your function is not "listening" for an onchange event.
Use this instead. Notice I changed the checkbox to have an onclick event.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="includes/imagetransition.js"></script>
<script type="text/javascript" src="includes/checkenabledisable.js"></script>
<script type="text/javascript">
function enableSubmitButton() {
if (document.getElementById("acknowledgment").checked == true)
document.getElementById("submitmessage").disabled = false;
}
</script>
<title>Contact Us</title>
</head>
<body>
<div class="page-wrapper">
<div id="header">
<img src="images/img1.jpg" name="slideshow" width="70%" height="200" alt="headerimage.gif"><br>
Previous |
Auto/Stop |
Next</div>
<br><br>
<aside class="sidebar">
<div id="vmenu">
<ul>
<li class="sideli">Home</li>
<li class="sideli">Areas</li>
<li class="sideli">Profiles</li>
<li class="sideli">Contact Us</li>
</ul>
</div>
</aside>
<section class="main">
We will review your submission and contact you, usually within 72 hours.</p>
<form action="actionemail.php" method="post">
<table class="emailtable">
<tr><td><label for="name" class="emaillabel">Name: </label></td><td><input type="text" name="fullname" size="50" value="Name" style="width: 290px;" /></td></tr>
<tr><td><label for="phone" class="emaillabel">Phone: </label></td><td><input type="text" name="phone" size="20" value="Phone" style="width: 290px;" /></td></tr>
<tr><td><label for="email" class="emaillabel">Email: </label></td><td><input type="text" name="email" size="50" value="Email" style="width: 290px;" /></td></tr>
<tr><td><label for="comment" class="emaillabel">Issue: </label></td><td><textarea rows="3" cols="26" name="comment" value="Tell Us More" style="width: 290px; height: 55px"></textarea></td></tr>
</table><br>
<input id="acknowledgment" type="checkbox" name="acknowledgment" value="1" onclick="enableSubmitButton()"><label for="acknowledgment">I acknowledge that there may be a delay in responding to this request.</label><br>
<br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled />
</form>
</section>
</div>
</body>
</html>
You should place the javascript below the definition of the items. HTML is interpreted linearly. This means that the Javascript is executed in the beginning when no items is known as "acknowledgement"
put some function name inside a script
<script type="text/javascript">
function checker()
{
var checker = document.getElementById('acknowledgment');
var sendbtn = document.getElementById('submitmessage');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}
</script>
and then you will call function in button onClick event
<form action="actionemail.php" method="post">
<br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled onclick="checker();"/>
<%# 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>
<link href="login-box.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<table>
<tr>
<td height="50px"></td>
</tr>
</table>
<fieldset id="searchFS" class="legend" style="display: block">
<legend>Search for Contact:</legend>
<table>
<tr>
<td width="55%"></td>
<td><input id="contactName" name="contactName" type="text"
width="20px" value=""></input></td>
<td><input type="submit" name="Submit" value="Search"
class="button" onclick="getcontact()" />
</td>
</tr>
</table>
</fieldset>
</center>
<p id="para"></p>
</body>
<script>
function getcontact(){
document.getElementById('para').innerHTML ="<table><tr><td>kkkkkkk</td></tr></table>";
}
</script>
</html>
WHen am pressing the button the value of the element appears than disappears while the page reloads! can anyone tell me how to fix this ?
Change "getContact()" to "getContact(); return false" to prevent the form from submitting.
A more ideal solution would be to bind to the click event:
document.querySelector('[name="Submit"]').addEventListener('click', function (e){
//prevent default behavior -- stop form from submitting
e.preventDefault();
document.getElementById('para').innerHTML ="<table><tr><td>k</td></tr></table>";
});
could you please help me with this code?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Daily News</title>
<script type="text/javascript" src="Scripts.js">
</script>
<link href="homepage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="body">
<div class="header">
<img id="header-image" src="news_logo.png" />
<form id="login-form" action="customerLogin.html" method="post" onsubmit="return validate(this)">
<table>
<tr>
<td><label for="loginid">Login:</label></td>
<td id="login-form"><input id="login-boxes" type="text" id="loginid"></td>
<td><label for="pword">Password:</label></td>
<td id="login-form"><input id="login-boxes" type="password" id="pword"></td>
</tr>
<tr>
<td></td>
<td id="login-buttons"><input type="submit" value=" Sign In ">
<input type="reset" value="Clear form">
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
My Javascript is:
function validate(loginForm)
{
var booValid = true;
var strErrorMessage = "";
var minLength=5;
var maxLength=10;
if(loginForm.pword.value.length < minLength)
{
strErrorMessage = "password must at least 5 characters\n";
booValid=false;
}
if(loginForm.pword.value.length > maxLength)
{
strErrorMessage = "pasword must not more than 10 characters\n";
booValid=false;
}
if(loginForm.loginid.value.indexOf("#") == -1)
{
strErrorMessage = "please enter an e-mail address as your login name\n";
booValid=false;
}
if(!booValid)
{
alert(strErrorMessage);
}
return booValid;
}
I couldn't figure out what was with this code, it doesn't seem to read from javascript at all.
I have no idea why it does not. I've also tried to use only Login Form and javascript then it works and when i put everything together then it doesn't work.
You probably want to replace every id= with class=
Instead of your later ids you want to use name
<input id="login-boxes" type="text" id="loginid">
<input id="login-boxes" type="password" id="pword">
to
<input class="login-boxes" type="text" name="loginid">
<input class="login-boxes" type="password" name="pword">
Try to change :
<input id="login-boxes" type="password" id="pword">
to
<input id="login-boxes" type="password" name="pword">
and
<input id="login-boxes" type="password" id="pword">
to
<input id="login-boxes" type="password" name="pword">