i have my index.jsp :
<%# page pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello</title>
</head>
<body>
Hello !
<input type="hidden" name="ip" value="" id="ip">
<script>
var ip = document.getElementById("ip");
ip.value = userip;
</script>
</body>
</html>
I have another view.jsp which one take an argument like that :
http://localhost:8200/view/view.jsp?ip=IP_VALUE
Then when i open this link and replace IP_VALUE by anything, this value is automatically added to my database.
But now i'm trying to call hiddenly this jsp page, i mean i want that when the user open my page, my javascript variable "ip" is past to my view.jsp like :
http://localhost:8200/view/view.jsp?ip= "ip"
But i want that the user don't see that, so i don't want any redirection or form, just an AJAX hidden call of my jsp.
view.jsp is on the same folder than my index.jsp
How can i do that hiddenly ?
Try this:
<%# page pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello</title>
</head>
<body>
Hello !
<input type="hidden" name="ip" value="" id="ip">
<script>
var ip = document.getElementById("ip");
ip.value = userip;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', 'view.jsp?ip' + userip, true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
//alert(xmlhttp.responseText);
}
}
};
xmlhttp.send(null);
</script>
</body>
</html>
You can send any value to any page by XMLHttpRequest object.
Related
Window.open() could not open new webpage?
Is it because of my JavaScript, or there is there a problem anywhere else in my code?
function getage() {
var age = document.getElementById("customerage").value;
if (age > 21) {
window.open = "beer.com";
} else if (age > 0) {
window.open = "http://lol.disney.com/games/tsum-tsum-tower";
} else
alert("Please input correct age!");
}
<html>
<head>
<title>I drink alcohol.com</title>
<meta charset="utf-8">
<meta name="Sumei" content="Alcohol Web">
</head>
<body>
<h1>Welcom to "I drink alcohol.com"</h1>
<h3>Here is couple of questions for you:</h3>
<p>How old are you?</p>
<form method="post">
<input type="number" name="customerage" id="customerage" />
<input type="submit" onclick="getage()" value="OK">
</form>
<script>
/* getage function*/
</script>
</body>
</html>
just use window.open
var option= "location=yes,height=570,width=520,scrollbars=yes,status=yes";
var link = URL + location.href;
var win = window.open(link, "_blank", option);
If i understand correctly you want to go to pages based on iteration result
well try this piece of code, also you are not using window.open() correctly that should be used like window.open(URL, "_blank", option); if you want it to open in new tab
else go for code below
if(age>21)
{
window.location="beer.com";
}
else if(age>0)
{window.location="http://lol.disney.com/games/tsum-tsum-tower";}
else
alert("Please input correct age!");
}
well also what i think you should add something in your elseif like
else if(age>0 && age <21)
use window.open() to open in new tab, and use window.location.href to open link in same tab
<html>
<head>
<title>I drink alcohol.com</title>
<meta charset="utf-8">
<meta name="Sumei" content="Alcohol Web">
</head>`
<body>
<h1>Welcom to "I drink alcohol.com"</h1>
<h3>Here is couple of questions for you:</h3>
<p>How old are you?</p>
<form method="post">
<input type="number" name="customerage" id="customerage"/>
<input type="submit" onclick="getage()" value="OK">
</form>
<script>
function getage() {
var age = document.getElementById("customerage").value;
if(age>21)
{window.open("beer.com");}
else if(age>0)
{window.open("https://www.google.com");}
else
alert("Please input correct age!");
}
</script>
</body>
</html>
I am getting null value in variable k can anyone help me plz ..... It is taking the input of alert but not setting value to k can I perform the same without button or click event
<% // some jsp code
String key="some value";
if(key!= null)
{
%>
<html>
<head>
<script type="text/javascript">
var val = prompt("Please enter R for Read or W for Write", "");
document.getElementById("hid").value=val;
</script>
</head>
<body>
<input type="hidden" id="hid" name="hid" />
</body>
</html>
<%
}
String k=request.getParameter("hid");
key=key+k;
System.out.println(key);
%>
Just add a window.onload event handler
<% // some jsp code
String key="some value";
if(key!= null)
{
%>
<html>
<head>
<script type="text/javascript">
var val = prompt("Please enter R for Read or W for Write", "");
window.onload = function() {document.getElementById("hid").value=val; }
</script>
</head>
<body>
<input type="hidden" id="hid" name="hid" />
</body>
</html>
<%
}
String k=request.getParameter("hid");
key=key+k;
System.out.println(key);
%>
The Javascript is executing before the DOM is loaded, try either putting the code before the script (put script at base of body as recommended), or as stated use window.onload or jQuery $(function(){});
I'm attempting to create a page with a simple input form, use that to create the URL required and display the resulting page in a div all in one go. When I sent the user directly to the created URL from clicking submit that worked perfectly, but I can't seem to get it to do anything with the following code:
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>
<form id="theForm">
<input id='subj'/>
<input type='submit'/>
</form>
<script>
var theForm = document.getElementById('theForm');
var theInput = document.getElementById('subj');
var show;
theForm.onsubmit = function(e){
show = "www.someurl.com/" + encodeURIComponent(theInput.value);
return show;
$('#display').load(show);
}
</script>
<div id="display"></div>
I've changed three things and got the code to work:
1. Changed the div to an iFrame
2. Added an "action" attribute to the form and set it to "#" so that the program doesn't exit the webpage upon clicking the form.
3. Removed the "encodeURIComponent" command from the code, because it didn't work with it..
This is my example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="theForm" action="#">
<input id='subj'/>
<input type='submit'/>
</form>
<iframe id="display"></iframe>
<script>
var theForm = document.getElementById('theForm');
var theInput = document.getElementById('subj');
var show;
theForm.onsubmit = function(e){
var show = "http://someUrl.com/" + (theInput.value);
console.log(show);
document.getElementById("display").src= show;
}
</script>
</body>
</html>
I am developing a application where I have a jsp page with a dynamicly generated table (which is made using jstl) where each cell have one checkbox. When I mark this checkbox, I need that an event be triggered to database to insert an row in a table. If I unmark the checkbox, this row should br removed. Someone have any idea how to do this? My thoughts about this is that I should use some ajax code for this, but I have no clue by where start. Someone can give me some ideas about this (don't even need code, an sort of algorithm should be enough, I guess).
I follow the suggestion from Mr Matej Chrenko, and write the follow code:
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-1.11.0.min.js"> </script>
<script>
$(".checkbox").change(function() {
if(this.checked) {
window.alert("unmarked");
} else{
window.alert("marked");
}
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cadastra Horario Livre</title>
</head>
<body>
<p align="center">
<span class="usuario">${nome}</span> | <strong> Hora Livre</strong> | Sair
</p>
<p align="center">
<form method="post" action="">
<table border = 2>
<tr>
<th> </th>
<c:forEach var="item" items="${list2}">
<th> <c:out value="${item}"/> </th>
</c:forEach>
</tr>
<c:forEach var="item2" items="${list}">
<tr>
<td> <c:out value="${item2}"/> </td>
<c:forEach var="item" items="${list2}">
<td> <input type="checkbox"> </td>
</c:forEach>
</tr>
</c:forEach>
</table>
</form>
</p>
</body>
</html>
However, nothing is happening when I click on the checkbox. What I did wrong? (I add the jquery file inside the folder WEB-INF of my project - same place this jsp is located).
This:
$(".checkbox").change(function() {
if(this.checked) {
//Do stuff
} else{
//unchecked
}
});
and this:
https://api.jquery.com/jQuery.ajax/
would help you.
I think Ajax is the possible solution. You can use jQuery to do it easier.
You can refer here
Ok, I solve the problem by changing the javascript code used to sent the request to the server. I follow the instructions from this article.
The code for the JSP page ended like that:
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="<c:url value='/js/ajax.js'/>"></script>
<script>
function handleClick(cb, idevento, data, hora) {
if(cb.checked) {
alert("marked "+data+" "+hora+" for "+idevento);
sendAjaxRequest("/hora_livre/CadastraHoraLivre?target=cadastra&data="+data+"&hora="+hora+"&evento="+idevento, "showdetails");
} else{
alert("unmarked "+data+" "+hora+" for "+idevento);
sendAjaxRequest("/hora_livre/CadastraHoraLivre?target=remove&data="+data+"&hora="+hora+"&evento="+idevento, "showdetails");
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cadastra Horario Livre</title>
</head>
<body>
<p align="center">
<span class="usuario">${nome}</span> | <strong> Hora Livre</strong> | Sair
</p>
<p align="center">
<table border = 2>
<tr>
<th> </th>
<c:forEach var="item" items="${list2}">
<th> <c:out value="${item}"/> </th>
</c:forEach>
</tr>
<c:forEach var="item2" items="${list}">
<tr>
<td> <c:out value="${item2}"/> </td>
<c:forEach var="item" items="${list2}">
<td> <input type="checkbox" id="checkbox" onclick="handleClick(this, '${id}', '${item2}', '${item}')"> </td>
</c:forEach>
</tr>
</c:forEach>
</table>
<div id="showdetails"> </div>
</p>
</body>
</html>
the file ajax.js included in the page is that:
/* common method to get XMLHttp request object */
function getXMLHttpRequest() {
var req;
if (window.XMLHttpRequest) { // For Firefox, Mozilla, Safari, …
req = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // For IE
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
//
}
}
}
return req;
}
/* method for dynamically getting current time in milliseconds and append that value to no-cache parameter
* IE browser does not send ajax request if the url is same, simply get result from cache
* to avoid this and make a new request, we append no-cache param to each ajax request.
*/
function getNoCacheValue(url)
{
var d = new Date();
var appendstring = (url.indexOf("?") != -1) ? "&" : "?";
var nocachevalue = appendstring + "no-cache=" + d.getTime();
return nocachevalue
}
/* method to send a ajax request, and write the response text to given divid. */
function sendAjaxRequest(url, divid) {
url = url + getNoCacheValue(url);
var req = getXMLHttpRequest();
req.onreadystatechange = function() {
processResponse(req, divid)
};
req.open('GET', url, true);
req.send(null);
}
function processResponse(req, divid) {
if (req.readyState == 4) {
if (req.status == 200) {
document.getElementById(divid).innerHTML=req.responseText;
invokeScript(document.getElementById(divid));
}
}
}
/* method for executing script separately.
* (scenario : send a Ajax request, response is HTML with some scripts – scripts in response HTML should not load )
* to overcome this issue, we used this method to load the scripts separately.
*/
function invokeScript(divid) {
var scriptObj = divid.getElementsByTagName("SCRIPT");
var len = scriptObj.length;
for(var i=0; i<len; i++) {
var scriptText = scriptObj[i].text;
var scriptFile = scriptObj[i].src
var scriptTag = document.createElement("SCRIPT");
if ((scriptFile != null) && (scriptFile != "")) {
scriptTag.src = scriptFile;
}
scriptTag.text = scriptText;
if (!document.getElementsByTagName("HEAD")[0]) {
document.createElement("HEAD").appendChild(scriptTag)
}
else {
document.getElementsByTagName("HEAD")[0].appendChild(scriptTag);
}
}
}
I have a form in a Registeration.jsp page:
form name="users" method="post" onSubmit="return checkCorrect()"
action="Registeration.jsp">
The Script checkCorrect is written at the start of the page, returns true or false based on information submitted to the form (using getElementById if it matters) and the script definitely works (worked on html page without jsp before)
after the form I have this:
<% if(request.getMethod().equals("POST")){...}
And I need that the jsp part will work ONLY if and after the form is successfully submitted, but somehow the javascript script is not called and don't work and the form is always submitted.
What am I doing wrong?
edits:
there's no redirection in my page, the javascript check function, the form, and the JSP part that procces the form after submitting it are at the same page.
the jsp part is used to send the data from the form to a database.
the function:
function checkCorrect(){
var fullname=document.getElementById("fullname").value;
...
if (response.length==0)
{
return true;
}
else
{
alert ("These problems are found in your form:\n\n"+response);
return false;
}
}
then come the body and the form and then
the jsp part:
<%
if(request.getMethod().equals("POST")){
String fullname=request.getParameter("fullname");
and go on.. } % >
Solution:
check the JavaScript part really good people it doesn't have compiler so even a tiny problem there can screw up the entire project.
<% uname=""+request.getAttribute("username"); %>
This variable will get a value only when you load your page or refresh it.
I guess your page flow is as follows.
You have your first page with form, and onsubmit form will call javascript function as
<form name="users" method="post" onSubmit="returncheckCorrect()" action="Registeration.jsp">
then your javascript will check your answer like :
<script type="text/javascript">
function returncheckCorrect() {
var x = document.getElementsByName("userName")
if (your condition) {
alert("Redirecting");
return true;
} else {
alert("Not Redirecting");
return false;
}
}
// return false; // lol, see why indentation is useful ?
</script>
then (if (your condition == true)) your java script will redirect to a second page where you want to get the value in a scriptlet like
<% uname=""+request.getAttribute("username"); %>
Make sure your code is in this manner.
Following is the code which I tried as you said, its working
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function chkme() {
var x = document.getElementById('textfield');
if (x.value == 'sarin') {
alert("success");
} else {
alert("failed");
}
return true;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form id="form1" name="form1" method="post" onsubmit="chkme();"
action="">
<input type="text" name="textfield" id="textfield" /> <input
type="text" name="textfield2" id="textfield2" /> <input
type="submit" name="button" id="button" value="Submit" />
</form>
<%
if (request.getMethod().equals("POST")) {
String textfield = request.getParameter("textfield");
String textfield2 = request.getParameter("textfield2");
%>
<%=textfield%>
<br />
<%=textfield2%>
<%
}
%>
</body>
</html>