I have used checkboxes for checking the mails in my mailing system which is developed in Java.
I want to check all the checkboxes on the click of upper checkbox, but the problem is there that checkboxes are displayed in the the loop according to number of mails retrieved.
Please help me where should i put the javascript code to solve this problem.
The loop code of inbox is given below:
<tr >
<% for(int i=0;i<messageList.size();i++) { message = (Message)messageList.get(i);%>
<td width="10%" height="33" align="left" valign="top" bgcolor="#EEE" >
<!--This link display the full message-->
<input name="Mark_Mail" id="mark_mail" onclick="myfunction(this);" type="checkbox" value="<%=message.getMailId()%>" width="50" height="30" align="top" >
<span id="space1" style="padding:2px"></span>
<!--Check all the Checkboxes-->
<script type="text/javascript">
function checkAll()
{
document.getElementById('mark_mail').checked = "true";
}
</script>
<img src="Images/UnStarred.jpg" height="15" border="0" id="image1" onclick="swapImage()" />
<span id="space1" style="padding:2px"></span>
</td>
<td width="90%" height="33" align="left" colspan="7" valign="bottom" bgcolor="#EEE" >
<!--This link display the full message-->
<a id="link" href="viewMail.jsp?mailId=<%=message.getMailId()%>&isAttach=<%=message.getAttachmentFlag()%>">
<!--Display Sender Address-->
<font color="#000000" size="1"><strong><%=message.getSenderAddress()%></strong></font>
<span id="space1" style="padding:6px"></span>
<!--For Display Message Subject-->
<font color="#000000" size="1"><strong><%=message.getSubject()%></strong></font>
<span id="space1" style="padding:6px"></span>
<!--For Display Attachment Image-->
<%if(message.getAttachmentFlag().equals("1")){%><input type="hidden" name="filename" id="filename" value="<%=message.getFileName()%>" /><input type="hidden" name="filesize" id="filesize" value="<%=message.getFileSize()%> /><img src ="Images/attachment.jpg" style="bgcolor: #EEE" /><%}else{%><span style="padding-left:12px" ></span><%}%>
<span id="space1" style="padding:6px"></span>
<!--For Display Time and Date of messaging-->
<font color="#000000" size="1"><strong><%=message.getTimestamp()%><span style="padding-left:5px"></span><%=message.getDate()%><input type="hidden" name="label" value="<%=message.getLabel()%>"></strong></font>
</a></td>
</tr><% } %>
You need to get the elements by their name, as ID must be unique:
function checkAll() {
var arrMarkMail = document.getElementsByName("mark_mail");
for (var i = 0; i < arrMarkMail.length; i++) {
arrMarkMail[i].checked = true;
}
}
Just place this code in the <head> section of the page.
To call it, have such checkbox wherever you like:
Master: <input type="checkbox" onclick="checkAll();" />
However this better be done by a button:
<button type="button" onclick="checkAll();">Check All</button>
Related
I am making a shopping cart.
This is the code where a user clicks on a dd to cart button to add items to the cart table:
<div class="container">
<a class="addToCart" href="#" data-name="Java" data-price="150"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
<div class="center">Java Basics</div>
<p> 150 SAR </p>
<div>
<label for="qty-1">Quantity</label>
<input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
</div>
<p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>
<div class="container1">
<a class="addToCart" href="#" data-name="PHP" data-price="100"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
<div class="center">PHP Basics</div>
<p> 100 SAR </p>
<div>
<label for="qty-1">Quantity</label>
<input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
</div>
<p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>
<div class="container2">
<a class="addToCart" href="#" data-name="PHP" data-price="100"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
<div class="center">JavaScript Basics</div>
<p> 200 SAR </p>
<div>
<label for="qty-1">Quantity</label>
<input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
</div>
<p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>
with this jQuery script:
and I have javascript file that contains function of the cart like add to cart, remove from car and calculating total.
<script src="js/functions.js"></script>
<script>
// some jQuery function added to the links
$("#totalCart").html();
$(".addToCart")click(function(event){
eventpreventDefault(); //prevent the links from doing the default behaviour when they are clicked
var name= $(this).att("data-name"); //this represents the link that you click on / attr to access one of the attributes
var price= Number($(this).att("data-price"));
addItemtoCart(name, price, 1);
displayCart();
});
function displayCart() { //display cart content into the page as a list
var cartArray = listCart();
var output = "" ;
for ( var i in cartArray) {
output += "<li>" +cartArray[i].name+" "+cartArray[i].quantity+"</li>"
}
$("#showCart").html(output); //html(output) to replace everything in showCart with text we want
$("#totalCart").html(total Cart());
}
and this the cart.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form id="shopping-cart" action="cart.html" method="post">
<table style="width:80%">
<tr>
<th> Item </th>
<th> Quantity </th>
<th> Price </th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
my question is that I want to link add to cart button to the cart.html page with implementing the functions, I do not know how to glue them all together. Using only HtML, JavaScript and a little bit of jQuery.
PS: no database is used.
I have a button in enroll.html . The code of the page is as follows :
<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="http://10.11.201.170/data/sultan/enroll.asp" 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 press Enroll Button , I want to load a page named verify.asp in background . How can I do that ?
The code of verify.asp is as follows :
<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="VBScript" Src="GetInfo.vbs">
</Script>
<title>Enroll Fingerprint.</title>
</HEAD>
<BODY Onload="GetLearnModel()";>
<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>Enroll</p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<Form name="scan" method="Post" action="famenroll2.asp?name=<%=Request("name")%>&check=<%=Request("check")%>&finger=<%=Request("finger")%>">
<Input type="hidden" name="LearnModel" value="">
<Input type="text" name="SlNo" value="">
</Form>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><font size="5" color="#ff0000"><%=Request.Form("SlNo")%></font><font size="5"> Enroll Successfully!</font></p>
</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>
<% Dim Conn,strSQL,objExec,NumOfRecords,se_name,finger
cust_no=Request.QueryString("name")
Set Conn = Server.Createobject("ADODB.Connection")
Conn.Open "Driver={Oracle in XE};DBQ=xe;UID=biotpl;PWD=biotpl;"
'Query for the customer entry in FP_ENROLL Table
strSQL2 = "INSERT INTO TEST values(1,'OS')"
Set objExec = Conn.Execute(strSQL2)
'Query for the no of fingers to be taken for a customer in FP_FINGER_SETUP Table
'Set objExec = Conn.Execute("select FINGURE_NO NoF from BIOTPL.FP_FINGER_SETUP where USER_TYPE=" & Request.QueryString("cust_type") )
'NumOfFingers = objExec("NoF")
'Conn.Close()
Set objExec = Nothing
Set Conn = Nothing
%>
</center>
</BODY>
</HTML>
Add an Id in this Line
<input type="submit" value=" Enroll " name="btnEnroll">
So it becomes :
<input type="submit" value=" Enroll " id="buttonEnroll" name="btnEnroll">
<div id="result"></div>
and Than Write this Script
<script>
$("#buttonEnroll").on('click',function(e){
e.preventDefault();
$( "#result" ).load( "verify.asp" );
alert("Page loading completed");
});
</script>
#result is for loading that page in result id div.
Hope Helps !
Add this inside your header tag
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
Ajax can be used to load a page in background. jQuery supports AJAX functionality and it is easier than what described in the first link. If your intention is to Verify an enrollment, you need to parse the reply coming out of the AJAX request. An earlier answer on parsing can be found here.
The essential steps are
Add an id to your form submit button (say 'enroll')
Include jQuery JavaScript library to your project by adding the following in the header
< script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
3.Within script tag, use a similar methodology as below.
$("#enroll").click(function(){
$.ajax({
url: "verify.asp",
success: function(result){
/* Parse the result and do whatever you want to do here */
}
});
});
//1st way::
function doFunction(event) {
event.preventDefault();
//here you can load verify.aspx by using
$("#resultdiv").load("verify.aspx", {}, function (data) {
alert("loading complete");
});
}
//2nd way:
//By using ajax call
$('#enroll').on('click', 'input[type="submit"]', function(e){
e.preventDefault();
$.post('http://mywebsite/verify.aspx',{ 'data': $('#txt_search').val() } ,function(data) {
console.log(data); // this would show you the returned data.
});
});
You can do it in 2ways:
HTML:
1st way::
=========
Add onclick to your enroll button.
<input type="submit" value="Enroll" onclick="doFunction();" id="enroll" name="btnEnroll"></p>
<div id="resultdiv">
</div>
2nd way:
========
By using ajax call
Here is modified enroll.html with modified Js
<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 src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY>
<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" >
<p>Please input your name: <input type="text" name="txtName" size="20" id="txtname"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="button" value="Enroll" name="btnEnroll" id="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>
<script type="text/javascript">
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
$(document).ready(function(){
$('#btnEnroll').on('click',function(){
var uname = $('#txtname').val();
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
var url = "enroll.asp?name="+uname;
window.location = url;
return true
});
});
</script>
change the url in the javascript code and put yours.If you url look like
http://10.11.201.170/data/sultan/enroll.asp
this then
change the variable url in script section like the following
var url = "http://10.11.201.170/data/sultan/enroll.asp?name="+uname;
and your enroll.asp will remain the same.
Hope that will help.
I have an image for loading. I am using onclick method to redirect so when somebody click on a div, it takes them to another page. How would i be able to load a loading.gif image while the the page is redirecting to the another one. I would really like to use this as this would be more user friendly and my page that is loading usually takes about 15 seconds. I've tried the below code but it is not working.
Here is my code,
<div data-align="center" id="mainDiv" style="height:100%; background-image:url('images1/pattern1.png')">
<table id="login">
<tr>
<td align="right">
<span>UserName :</span>
</td>
<td>
<input type="text" id="txtUsername" runat="server"/>
</td>
</tr>
<tr>
<td align="right">
<span>Password :</span>
</td>
<td>
<input type="password" id="txtPassword" runat="server"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" class="LoginButton" value="Login" onclick="Login();"/>
</td>
</tr>
</table>
<span id="loading" style="visibility: hidden; text-align: center;">
<img src="images1/loading.gif" id="Img5" data-transition="slide" />
</span>
</div>
<script type="text/javascript">
function Login() {
document.getElementById("mainDiv").style.visibility = 'hidden';
document.getElementById("loading").style.visibility = 'visible';
location = "Default.aspx";
};
</script>
Any help would be greatly appreciated.
Thanks.
You could very well handle this through the BeginRequestHandler and EndRequestHandler events. When a partial or full postback occurs (upon button click in your case) you can show the loading image and when the data is served you can hide the loading image in the the EndRequestHandler.
<script type="text/javascript">
function pageLoad(sender, args) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
}
function BeginRequestHandler(sender, args) {
document.getElementById("mainDiv").style.visibility = 'hidden';
document.getElementById("loading").style.visibility = 'visible';
}
function EndRequestHandler(sender, args) {
document.getElementById("mainDiv").style.visibility = 'visible';
document.getElementById("loading").style.visibility = 'hidden';
}
</script>
Your HTML markup will be like below
<div id="mainDiv">
...
...
</div>
<div id="loading" style="visibility: hidden;text-align: center;">
<img src="images1/loading.gif" id="Img5" data-transition="slide" />
</div>
Or if you are open to using jquery plugin then refer my another post here on SO.
Try to put image wrapper outside the mainDiv container
<div id="mainDiv">
...
</div>
<span id="loading" style="visibility: hidden; text-align: center;">
<img src="images1/loading.gif" id="Img5" data-transition="slide" />
</span>
Another issue is that you are attaching onclick event to Div1 which wasn't not declared yet. Try
document.getElementById("mainDiv").onclick = function () {
// your code
}
I have create one HTML with the help of AngularJS.
<form name="target" ng-submit="createAllKeywordsJSON(codeMasterList)"><!-- createAllKeywordsJSON() -->
<input type="submit" value="Save" class="myButton" name="submit" style="margin: 0px;float:right;">
<div class="category-placer2" style="width:100%">
<div class="category-header-keywords">
<div class="icon-add"><img src="images/icon-add.png" alt="Add" border="0" title="Add phone Number" /></div>
<div class="category-header-text" ><span ng-bind="dispName"></span></div>
</div>
<div class="category-base">
<div class="keywordplacer">
<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0" class="keywordsList">
<tr>
<th width="60%" colspan="2">Code Master Name</th>
<th width="30%" colspan="2">Status</th>
</tr>
<tr ng-repeat="type in codeMasterList">
<td width="1%" class="">
<input type="hidden" name="codeMasterId" value="{{type.codeMasterId}}" />
</td>
<td width="60%" class="">
<input type="text" name="keywordName" value="{{type.name}}" alt="Name of Keyword" size="60" >
</td>
<td width="30%" class="">
<input type="radio" value="1" name="{{type.codeMasterId}}" alt="Name of Keyword" ng-checked="{{(type.activeInd == 1) && ('true') || ('false')}}" />Active
<input type="radio" value="0" name="{{type.codeMasterId}}" alt="Name of Keyword" ng-checked="{{(type.activeInd == 0) && ('true') || ('false')}}" style="margin-left:50px;" />Inactive
</td>
</tr>
</table>
</div>
<center>
<hr style=" background-color: #ABBFC6; height: 2px; width: 90%;">
<input type="submit" value="Save" class="myButton" style="margin: 0px;"/>
</center>
<!-- <div class="table-index">P - Primary</div> -->
</div>
</div>
</form>
It will show value in editable mode.
I want to save all the list at a single click on save button. how can i do such thing using angularjs ?
Can you please help me to generate JSON data for the name as well as for radio button value ?
below is my controller:
keywordModule.controller('keywordTypeController',['$scope', '$http', 'keywordService',
function($scope, $http, keywordService) {
$scope.createAllKeywordsJSON = function() {
//alert($scope.codeMasterList.codeMasterId);
var tempItemList = [];
angular.foreach($scope.codeMasterList,function(item,index){
tempItemList.push(item);
});
alert(tempItemList);
/*keywordService.createAllKeywordsJSON().query(codeMasterList,
//Success Handler handler
function(data) {
},
//Failure handler
function(error) {
}
);*/
//alert(codeMasterList);
};
}
]);
$scope.codeMasterList would be the JSON data for your list.
You can update the value of the form fields by using ng-model instead of value. This also will bind the input values right back to the item in the list. So then you can just save $scope.codeMasterList
HTML Sample
<input type="text" ng-model="type.name" alt="Name of Keyword" size="60" >
Working Fiddle
Any way to easily remove all HTML from text but keep all links? I know how to strip all HTML tags, but can't figure out how to keep just links...
Here's my text:
<table border="0" cellpadding="2" cellspacing="7" style="vertical-align:top;">
<tr>
<td width="80" align="center" valign="top"></td>
<td valign="top" class="j">
<font style="font-size:85%;font-family:arial,sans-serif"><br /></font>
<div style="padding-top:0.8em;">
<font style="font-size:85%;font-family:arial,sans-serif"><img alt="" height="1"
width="1" /></font>
</div>
<div class="lh">
<font style="font-size:85%;font-family:arial,sans-serif"><a href=
"http://news.google.com/news/url?sa=t&fd=R&usg=AFQjCNHlTH-LLUq2nHL30fKdJcA62JseSg&url=http://edition.cnn.com/2011/WORLD/africa/05/13/egypt.suzanne.mubarak/">
<b>Egypt's former first lady said to have suffered a heart attack</b></a><br />
<font size="-1"><b><font color="#6F6F6F">CNN
International</font></b></font><br />
<font size="-1">"Hosni Mubarak was also questioned about his luxury mansion in
Sharm el-Sheikh," al-Gohary <b>said</b>. Last month, the <b>former</b>
president <b>suffered a heart attack</b> during questioning over possible
corruption charges, <b>Egyptian</b> state television reported.
<b>...</b></font><br />
<br />
<a class="p" href=
"http://news.google.com/news/more?gl=us&pz=1&ned=us&ncl=dmv9Cur49MVVXrM">
<font class="p" size="-1"><nobr><b>and
more »</b></nobr></font></a></font>
</div>
</td>
</tr>
Thanks
Is this what you want?
function getLinks() {
var table = document.getElementsByTagName('table')[0];
var links = table.getElementsByTagName('a');
for (var i=links.length-1;i>=0;--i) {
table.parentNode.insertBefore(links[i],table.parentNode.firstChild)
}
}