Trying to select any of the radio button which makes appear the textbox but pratically it's not working :( .So here is html in the jsp page.
<%# 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>
<style type="text/css">
input[type=text]{
display : none
}
</style>
<script type="text/javascript" language="text/html" src="../jscript/jquery-1.7.2.js"></script>
<script type="text/javascript" language="javascript" src="../jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript"> // I 'm using your 1st jquery whose usage is void of css
$('input[type=radio]').change(function() {
$('input[type=text]').css('display','none');
$(this).closest('tr').find('input[type=text]').css('display','block');
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test </title>
</head>
<body>
<form action="">
<div align="left" style="color:#2D7EE7">
<table>
<tr>
<td>
<input type="radio" name="radio" value="college"></td>
<td>College </td>
<td><input type="text" name="clg"></td></tr>
<tr>
<td><input type="radio" name="radio" value="school"></td>
<td> School </td>
<td><input type="text" name="schl"></td>
</tr>
</table>
</div>
</form>
</body>
</html>
And here is the piece of code of jquery:
<script type="text/javascript">
$('input[type=radio]').change(function() {
$('input[type=text]').hide();
$(this).parent().next().show();
});
</script>
and css :
<style type="text/css">
input[type=text]{
display : none
}
</style>
But still this is not working :( :(,so any guess where I'm going wrong.Feel free to comment.
Change a bit into:
$('input[type=radio]').change(function() {
$('input[type=text]').hide();
$(this).closest('tr').find('input[type=text]').show();
});
OR
$(document).ready(function(){
$('input[type=radio]').change(function() {
$('input[type=text]').css('display','none');
$(this).closest('tr').find('input[type=text]').css('display','block');
});
});
First try to include just one JQuery script into the page (remove jquery-1.4.2.min.js)
$(':radio') is equivalent to $('[type=radio]')
$(document).ready(function(){
$(':radio').change(function() {
// Hide all input:text in the table
$('input:text', $(this).closest("table")).hide();
$(this).parent().nextAll().find('input:text').show();
});
});
Related
I have a modal form. I've been trying to figure out that If I enter data to the form and click submit, It'll automatically display to a table on the same page. Been trying to use JQuery but it won't display.
i hope that is what you are looking for, try it :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>kkgk</title>
<script src="assets/js/jquery.js"></script>
<style>
table {
border: 1px solid black;
}
td,th {
border:1px solid black;
}
</style>
</head>
<body>
<form class="formulaire">
<input type="text" class="field1">
<input type="text" class="field2">
<input type="submit" value="press">
</form>
<table>
<tr>
<th>Nom</th>
<th>Prenom</th>
</tr>
<tr>
<td>Clegane</td>
<td>Hound</td>
</tr>
</table>
<script>
$(document).ready(function () {
$(".formulaire").submit(function (e) {
e.preventDefault()
var name = $(".field1").val()
var pronoun = $(".field2").val()
$("table").append("<tr><td>"+name+"</td><td>"+pronoun+"</td></tr>")
})
})
</script>
</body>
</html>
I am new #jsp, and would like to call the logout function when the tab or the browser window is closed. i've made some research and found out that i need to use window.onbeforeunload. But the thing is , i don't know where to put it in my jsp page. Here is it's code:
<%# page language="java" contentType="text/html; charset=windows-1256"
pageEncoding="windows-1256"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<%# taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%# taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%# taglib uri="http://java.sun.com/jstl/core-rt" prefix="c-rt" %>
<link rel="stylesheet" href="css/login.css">
<title>Insert title here</title>
<script type="text/javascript" language="javascript" runat="server">
var divSelected = null;
function switchURL()
{
var x = document.getElementById("femp").value;
<c:choose>
<c:when test="${puser.LOGIN==true}">
document.getElementById("temp").value = x;
// alert("${puser.LOGIN}");
</c:when>
<c:otherwise>
document.getElementById("temp").value = 0;
document.getElementById("femp").value = 0;
// alert("${puser.LOGIN}");
</c:otherwise>
</c:choose>
}
</script>
<script type="text/javascript" language="javascript" runat="server">
var divSelected = null;
function Logout()
{
document.getElementById("Form1").target ="";
document.getElementById("Form1").action = "/dcHR/login";
// window.location = "login";
}
</script>
</head>
<body>
<section class="container">
<div class="login">
<form id="Form1" action="http://localhost:80/reports/rwservlet" method="Post" target="_blank">
<input type="hidden" id="cmdkey" name="cmdkey" value="repserv">
<input type="hidden" id="temp" name="P_TO_EMP" value="0">
<input type="hidden" id="femp" name="P_FROM_EMP" value="${puser.USR_USER}" >
<input type="hidden" id="pcomp" name="P_COMP" value="${puser.USR_CP}">
<p> Years:<input type="text" name="P_YEAR"> </p>
<p> Month:<input type="text" name="P_PERIOD"> </p>
<input type="submit" value="Report" name="pbtn" onclick="switchURL()" />
<input type="submit" value="Logout" name="pbtn" onclick="Logout()"/>
</form>
</div>
</section>
</body>
</html>
can somebody help me plz.
Regards to all.
You have to add listener on window object as below
window.addEventListener("beforeunload", function(){
//Ajax call to invoke logout action
});
Put this code in your jsp page.
I have a dynamic web project in eclipse. I have a JSP and a html file.
In my JSP file , I include a html file that has jquery snippet inside script tag.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
$("#in_school").change(function() {
var in_school = $(this).val();
$(".in_school_input").hide("fast", function() {
$("#in_school_" + in_school).show("slow");
});
});
</script>
</head>
<body>
<form>
<div>
Are you in school? <select id="in_school">
<option selected="selected">Please choose</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="in_school_yes" class="in_school_input" style="display: none;">
What grade are you in? <input type="text" name="grade" />
</div>
<div id="in_school_no" class="in_school_input" style="display: none;">
What year did you graduate? <input type="text" name="graduation_year" />
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
My JSP page is :
<%# 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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello World - JSP tutorial</title>
</head>
<body>
<%#include file="htmldata.html" %>
</body>
</html>
When I run this program I only see the form but when I choose the dropdown, nothing happens . It does not prompts me the other questions based on dropdownvalue. Inshort I see that jquery part is never executed.
The expected output is Expected_Demo.
Can anyone tell me where am I going wrong ?
Thanks !
There is nothing wrong with your jsp code.
1- You are have not included jQuery script in html.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2- You have placed javascript before your html. Here is full code:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form>
<div>
Are you in school? <select id="in_school">
<option selected="selected">Please choose</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="in_school_yes" class="in_school_input" style="display: none;">
What grade are you in? <input type="text" name="grade" />
</div>
<div id="in_school_no" class="in_school_input" style="display: none;">
What year did you graduate? <input type="text" name="graduation_year" />
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
<script type="text/javascript">
$("#in_school").change(function() {
var in_school = $(this).val();
$(".in_school_input").hide("fast", function() {
$("#in_school_" + in_school).show("slow");
});
});
</script>
</body>
</html>
Include jquery in your html before <script> that is using it:
Here's a link for cdn :
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
You can chose to download it and include from your own application path
Also, you need to wait until your html loads:
<script type="text/javascript">
$(document).ready(function(){
$("#in_school").change(function() {
var in_school = $(this).val();
$(".in_school_input").hide("fast", function() {
$("#in_school_" + in_school).show("slow");
});
});
});
</script>
I just realized that serializeArray() will not include submit input and submit button values per http://api.jquery.com/serializearray/
No submit button value is serialized since the form was not submitted
using a button.
What is the cleanest way to include the button value in the form submission?
http://jsfiddle.net/QJz35/
<!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=ISO-8859-1" />
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#myForm").submit(function(){
var inputs=$(this).find(":input");
var inputs_serial=inputs.serializeArray();
console.log(this,inputs,inputs_serial);
return false;
});
});
</script>
</head>
<body>
<form id="myForm">
<input name="text" value="text" type="text">
<button name="task" value="MyTask" type="submit">My Task</button>
<input name="task" value="MyTask" type="submit">
</form>
</body>
</html>
I have this index.php file;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Proj</title>
<script type="text/javascript">
function openWindow() {
window.open("popup.php", "popup_id", "scrollbars=no,resizable,width=200,,left=300,top=300,height=200");
}
</script>
</head>
<body>
<form name="form1" action="">
<input name="initialdata" type="text" value="initial data" />
<input type="button" value="Send" onClick="openWindow()" />
</form>
</body>
</html>
and this popup.php file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>popup</title>
<script type="text/javascript">
function putData() {
//How to copy from that file -> document.formname.popupdata.value to
//index.php -> document.form1.initialdata.value???
window.close();
}
function loadData() {
//how to get the value "initial data"
//from index.php -> document.form1.initialdata.value????????????
}
</script>
</head>
<body onLoad="loadData();">
<form name="formname" action="">
<input name="popupdata" type="text" value="" />
<input type="button" value="Send" onClick="putData()" />
</form>
</body>
</html>
How how to get the value "initial data" from from index.php -> document.form1.initialdata.value and how to copy from popup.php -> document.formname.popupdata.value to index.php -> document.form1.initialdata.value??
Using
window.opener.document.getElementsByName("initialdata")[0].value;
This might not work on every browser, though. For details, see this question:
window.opener alternatives