I m adding DropDown in jsp page.
and m trying to redirect a page exact after index change without any button click.
How can i add it to jsp page?
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('com').bind('change', function () {
var value = $(this).val();
if(value==1) window.location = "servlet1?id=1";
if(value==2)window.location = "servlet1?id=2";
return false;
});
});
</script>
<body>
<select id="com">
<option></option>
<option value="1">Link1</option>
<option value="2">Link2</option>
</select></body>
Not working, is anything missing , plz
When i change index then i want to redirect to corresponding link/page.
Using jQuery you could do it as follows,
$(function(){
// bind change event to select
$('#ID_OF_select_ITEM').bind('change', function () {
var value = $(this).val(); // get selected value
window.location = someURL; // redirect based on the value
return false;
});
});
Just use '#com' instead of 'com' probably it will work
if still not working then let us know we have alternative for this task
Related
I am developing a web application in which I which I have a JavaScript array and I want this array in my JSP page and iterate it save the data in database.
var value = response;
for (var key in value) {
if (value.hasOwnProperty(key)) {
alert(key + " -> " + value[key]);
var sample = new Array();
sample=value[key];
console.log(sample);
// document.getElementById('');
}
}
});
I want this data on my JSP page is it possible. If it is possible, then how?
You can have javascript in jsp but that will always execute on client side. So if you want to save some stuff on trigger of some event inside browser you can do that by making ajax call or form submission. Ajax is preferred way because its faster and better experience for user
But if you have intention of execution of javascript on server side thats not possible
Java script client side script whereas jsp is server side script so you can't simply do this.
What you can do is submit the calculated variable from javascript to server by form-submission, or using URL parameter or using AJAX calls and then you can make it available on server to store in database.
Client Side:
<script type="text/javascript">
var n = document.getElementById("data");
var f=new Array( "apple", "orange", "mango" );
n.value = f;
</script>
<form action="Your_JSP.jsp" method="POST">
<input type="hidden" id="data" name="data" value="" />
<input type="submit" />
</form>
Server Side:
<%
String val = request.getParameter("data");
String aa[]=val.split(",");
for(String x : aa )
out.println(x);
//now hereyou can use aa array tostore in database or do whatever you want
%>
Try this if you have two different jsp:
first.jsp
<script>
var response = [];
...
var put = function(form) {
form.resp.value = response.join(','); //using comma as separator
};
</script>
<form onsubmit='put(this)' method='next.jsp' method='post'>
<input type='hidden' name='resp' />
<button>Submit</button>
</form>
next.jsp
<%
String[] resp = request.getParameter("resp").split(",");
%>
Response is: ${param.resp} <!-- debugging -->
yes , its possible to do that. you can show array in HTML tag
<!DOCTYPE html>
<html>
<head>
<script>
var value=response;
for (var key in value) {
if (value.hasOwnProperty(key)) {
alert(key + " -> " + value[key]);
var sample = new Array();
sample=value[key];
console.log(sample);
// do here as
document.getElementById("array").innerHTML = sample;
// here array is <p> tag in html and sample is array which will be shown in jsp page.
}
}
</script>
</head>
<body>
<form action="get.jsp" method="POST">
<p id="array" name="array" type="hidden"></p>
<input type="submit" />
</body>
</html>
in get.jsp you will able to get value from array as:
<%
String []array = request.getParameter("array").split(",");
//this String array you can use to store data in DB
%>
I'm trying to make it so that when an option from the combobox is selected it fills out some of the later input fields. current code (below) doesnt give anny errors just simply does not give output on item changed.
my question being how can I make it so that when selected item changes it fills in some fields.
<div>
options:<select id="optionbox" onchange="Change()">
<option value="op1">option1</option>
<option value="op2">option2</option></select><br>
<form action="KlusServlet.do" method="post"> //not relevant i think used for servlets later on
<input id="description" type="text"></input>
</form>
<script type="text/javascript">
function Change() {
var e = document.getElementById("optionbox");
var selOption = e.options[e.selectedIndex].value;
document.getElementById("description").innerHTML = "selected: " + selOption;
}
</script>
</div>
for textboxes you need to use .value not innerHTML like below
document.getElementById("description").value = "selected: " + selOption;
you can use jquery code $('#selector').val(value); for that
Working Code
<div>
options:<select id="optionbox" onchange="Change()">
<option value="op1">option1</option>
<option value="op2">option2</option></select><br>
<form action="KlusServlet.do" method="post"> //not relevant i think used for servlets later on
<input id="description" type="text"></input>
</form>
<script type="text/javascript">
function Change() {
var e = document.getElementById("optionbox");
var selOption = document.getElementById("optionbox").value;
alert(selOption);
$('#description').val(selOption);
}
</script>
</div>
I'm having a dropdown for selecting cities of Tamil Nadu.
All the cities are in an array list and using a for loop, I am iterating the values and writing using document.write but still I'm not getting the values printed in dropdown.
<select>
<script>
document.writeln('<option value="chennai">');
</script>
</select>
How to get the dropdown values printed now?
Thanks in advance!
Assuming you are using jquery :
Assuming your HTML is similar to this
<SELECT NAME="mylist">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</SELECT>
you need to modify your selector to iterate over the <OPTION> tags, your selector was iterating over the <SELECT> tag
var inputName = mylist;
$(':input[name=' + inputName + '] option').each(function(i, selected) {
alert($(selected).text());
});
if you need in java script :
<form>
<select id="myselect">
<option value="cat">Option 1</option>
<option value="dog">Option 2</option>
<option value="bear">Option 3</option>
</select>
</form>
<script type="text/javascript">
var selectobject=document.getElementById("myselect")
for (var i=0; i<selectobject.length; i++){
alert(selectobject.options[i].text+" "+selectobject.options[i].value)
}
</script>
Your option tag should look like this:
<option value="chennai">Chennai</option>
The code snippet you posted would produce an invalid (unclosed) option tag.
<select>
<script >
var list = [1,2,3];
for(i in list){
document.write("<option>"+list[i]+"</option>");
}
</script>
<select>
var list = ${cities}
I will give you a demo.
<?php
$city=array('Chennai','Madurai','Dindigal');//array containing cities
$count=1;
echo "<select>";
foreach($city as $value)
{
echo "<option value='city.$count'>".$value."</option>";
}
?>
Hope you understands.You can also use the id of each for other purposes in jsp
It's years since I've written anything in JSP and your question is lacking a bit in clarity but I think you're after something like this?
<%
String[] cityArray={"Chennai","Madurai","Dindigal"};
%>
That's just a an array of cities as an example - I assume you have your own
Then, in your page code
<select>
<%
int i=0;
for(i=0;i<cityArray.length;i++)
{
out.print("<option>" + cityArray[i] + "</option>");
}
%>
</select>
I've got nothing to test that with and the memory is a bit dim on jsp but is that what you mean?
Can we initialize JavaScript variables with java in jsp page?
like,
<script type="text/javascript">
var refreshId = setInterval(function() {
var nv=<% out.print(num_voted); %>;
var tv=<%out.print(totalvoted); %>;
var m=<% out.print(month);%>;
var y=<% out.print(year);%>;
alert("refreshed");
$('#alertmessagebox').text("Total members voted "+nv+" out of "+tv+" for "+m+" " +y);
}, 9000);
$.ajaxSetup({ cache: false });
</script>
Code is not working as expected. :(
Is there way to do this? Why it is not possible by this way? shall we need to create header to do this?
Here is an example of setting Javascript variables in a JSP.
<head>
<%
String numVotedStr = request.getParameter("numvoted");
int numVoted = 0;
if (numVotedStr != null) {
numVoted = Integer.parseInt(numVotedStr);
}
%>
<script type="text/javascript">
function setInterval() {
alert("hello " + <%= numVoted %>);
}
</script>
</head>
<body>
<form>
<input type="button" onclick="setInterval()" value="Press Me"/>
</form>
</body>
</html>
To test, use the appropriate version of this URL:
http://localhost:8080/sandbox/example.jsp?numvoted=99
This will popup an alert box with the integral value of "numvoted" on the HTTP request, by producing an HTML page where the value is initialized in Javascript. (The code should have at least a try-catch for the parseInt() call, but this will serve as simple example.)
I have a map that you can click on locations to get information for that area and I would like to show that information in a Iframe on the same page when clicked
My page has this for the link now
`<AREA SHAPE="CIRCLE" COORDS="555,142,6" HREF="http://www.Page.com" TITLE="" />`
Any suggestions
The beauty of AJAX is that you don't really need an IFRAME to do this.
You've got a server that will return to you information about a certain area. Each of the AREA tags simply needs an onclick attribute that calls a JavaScript function to retrieve that information and display it in a location you set aside on your page.
Here is a sample HTML page that will retrieve information from the server using AJAX
<html>
<head>
<script type="text/javascript">
function getAreaInfo(id)
{
var infoBox = document.getElementById("infoBox");
if (infoBox == null) return true;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) alert(xhr.status);
infoBox.innerHTML = xhr.responseText;
};
xhr.open("GET", "info.php?id=" + id, true);
xhr.send(null);
return false;
}
</script>
<style type="text/css">
#infoBox {
border:1px solid #777;
height: 400px;
width: 400px;
}
</style>
</head>
<body onload="">
<p>AJAX Test</p>
<p>Click a link...
Area One
Area Two
Area Three
</p>
<p>Here is where the information will go.</p>
<div id="infoBox"> </div>
</body>
</html>
And here is the info.php that returns the information back to the HTML page:
<?php
$id = $_GET["id"];
echo "You asked for information about area #{$id}. A real application would look something up in a database and format that information using XML or JSON.";
?>
Hope this helps!