Solved

Help with JavaScript function for activate and deactivate buttopns

Posted on 2014-07-30
48
598 Views
Last Modified: 2014-08-25
Experts,

Please see the code below and here is what I am looking for.
1) The images or buttons in my code should only become active if two or more items are checked and these buttons should be grayed out (or inactive until two or more items have been selected).
2) Also I need to update my alert message to check for two or more items have been selected.

Thanks in advance and appreciate your help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<script language="JavaScript">
function validatePage(FuseAction)
{
		
	valid = false;
	for(j=0;j<frmFA.length;j++)
	{
		if (frmFA.elements[j].checked)
			valid = true;
	}
	if (valid)
		submitfuseAction(FuseAction);
	else
		alert('At least one item must be selected.');
}
</script>
</head>

<body>
<table>
<cfoutput query="myQry1">
	<tr>

		<td> <input type="checkbox" name="itemID" value="#myQry1.ItemID#"></td>
		<td><span class='my_class_item'>Item Name : </span></td> #myQry1.itemName#
	</tr>
</cfoutput>

	<tr>
		  <td align="center" colspan="6">
		  <a href="JavaScript:validatePage('MyFuseaction1');"><img src="/Images/Images1.gif" alt="" border="0" align="middle"></a>
			&nbsp;&nbsp;<span class='my_class_item'><span class='bold'>-OR-</span></span>&nbsp;&nbsp;
			<a href="JavaScript:validatePage('MyFuseaction2');"><img src="/Images/Images2.gif" border="0" align="middle"></a>
		  </td>
		</tr>
</table>	
</body>
</html>

Open in new window

0
Comment
Question by:Tpaul_10
  • 24
  • 21
  • 3
48 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40231610
I'm not sure how far into your project you are but utilising a framework like http://knockoutjs.com/ is a great way to robustly control this sort of logic.

Essentially when you can configure the elements to reflect the logic you want.  I don't want to go down this path too far with you unless it will fit in the scope of your project.

If you're interested, just let me know and I'll knock up a demo for you
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40231854
Try out below code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Love to marry an free matrimonial website</title>
<script language="JavaScript">
function validatePage(FuseAction)
{
		
	valid = false;
	for(j=0;j<frmFA.length;j++)
	{
		if (frmFA.elements[j].checked)
			valid = true;
	}
	if (valid)
		submitfuseAction(FuseAction);
	else
		alert('At least one item must be selected.');
}



function countCheckboxes ( ) {
        var form = document.getElementById('testForm');
        var count = 0;
        for(var n=0;n < form.length;n++){
          if(form[n].name == 'itemID[]' && form[n].checked){
            count++;
			
          }
        }
		
		if(count >2)
		{
		
        document.getElementById('itembutton').style = "block";
        document.getElementById('checkCount').innerHTML = count;
		alert("total no of checkbox selected "+count)
		}
      }
</script>
</script>
</head>

<body>
<form name="form1"  id="testForm">

<table>
<cfoutput query="myQry1">
	<tr>

		<td> <input type="checkbox" name="itemID[]" id="item1" value="#myQry1.ItemID#" onclick="countCheckboxes()" >
		<input type="checkbox" name="itemID[]"  id="item2" value="#myQry1.ItemID#" onclick="countCheckboxes()" >
		<input type="checkbox" name="itemID[]"  id="item3" value="#myQry1.ItemID#" onclick="countCheckboxes()" >
		<input type="checkbox" name="itemID[]"  id="item4" value="#myQry1.ItemID#" onclick="countCheckboxes()" >
		
		</td>
		<td><span class='my_class_item'>Item Name : </span></td>itemName
	</tr>
</cfoutput>

	<tr id="itembutton" style="display:none">
		  <td align="center" colspan="6">
		  <a href="JavaScript:validatePage('MyFuseaction1');"><img src="/Images/Images1.gif" alt="" border="0" align="middle"></a>
			&nbsp;&nbsp;<span class='my_class_item'><span class='bold'>-OR-</span></span>&nbsp;&nbsp;
			<a href="JavaScript:validatePage('MyFuseaction2');"><img src="/Images/Images2.gif" border="0" align="middle"></a>
		  </td>
		  <span id="checkCount"></span>
		</tr>
</table>	
</form>
</body>
</html>
                                  

Open in new window

0
 

Author Comment

by:Tpaul_10
ID: 40232723
Thank You experts,

I have updated my function with the following code based on the above code by "insoftservice". Haven't checked the option from Rob due to the time constraint.

valid = false;
	var counter = 0
	for(j=0;j<frmFA.length;j++)
	{
		if (frmFA.elements[j].checked)
			{
				valid = true;
				counter++
			}
	}
<cfif not isWholesaler>	
	if (counter >= 2)
		submitfuseAction(myFuseaction);
	else
		alert('At least two items must be selected');
<cfelse>		
	if (counter > 0)
		submitfuseAction(myFuseaction);
	else
		alert('At least one Item must be selected ');
</cfif>		

Open in new window


I am having trouble with the first question from the original post (which is below)

1) The images or buttons in my code should only become active if two or more items are checked and these buttons should be grayed out (or inactive until two or more items have been selected).

Basically user should be able to see the images/buttons when they come to the page but should be inactive. Based on the selection it should be active/inactive and I can modify my if condition.

style="display:none">

Open in new window

-- This is not displaying the images when the user comes to the page.

Any help would be very much appreciated.
Thanks in advance
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40232738
Instead of style="display:none" you could use css to gray out

Please note: That i have just given below basic css gray out example which you could use it at your end. you could replace the id with id present in our previous example

<div id="wrapper">
    <img id="myImage" src="something.jpg" />
</div>

#myImage {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
}

/* or */

#wrapper {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
    background-color: #000;
}
0
 

Author Comment

by:Tpaul_10
ID: 40232876
Thank You.
Do you mean like following?

if(count >2)
		{
		
        document.getElementById('wrapper').style = "block";
}

Thanks

Open in new window

0
 

Author Comment

by:Tpaul_10
ID: 40233034
Sorry, should have been more specific.
I have added the CSS code to my images/buttons part of the code.

How to activate the grayed area with the above code...should I use unblock or enable..etc,./

Thank you.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40233142
Understand about your time contraints but is this what you're after?

It uses a combination of knockoutjs for the logic control, and bootstrap for making the buttons simulate a disabled/enabled state

Demo here: http://jsbin.com/kacof/2/

I've used buttons to represent the disabled state but they could easily be replaced with your images.

javascript:
viewModel = {
	itemID: ko.observableArray([])
}

viewModel.itemID.subscribe(function(newval){
	if(viewModel.itemID().length >= 2) {
		$('button').removeClass('disabled');
	}
	if(viewModel.itemID().length < 2) {
		$('button').removeClass('disabled').addClass('disabled');
	}
});

ko.applyBindings(viewModel);

Open in new window


All you need to do is add data-bind="checked: itemID" to the input element.  I've also wrapped your input elements in a label as it allows the label to be clicked to check the box

<label>
      <input type="checkbox" name="itemID" value="#myQry1.ItemID#" data-bind="checked: itemID">Item Name : #myQry1.itemName#
</label>
0
 

Author Comment

by:Tpaul_10
ID: 40233554
Thanks Rob, appreciate your example and that is exactly what I am looking for, but It looks like I need to use the following code to work.

<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>

Open in new window


The very first thing when I used the above is..my page layout and styles were completely changed and also taking time to load the page...

Thanks and I am still looking for a good way to do it.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40233575
What you're describing is the bootstrap css. Remove that and it'll still work though well need to tweak your css to handle what happens with the disabled class. When I get a sec I'll post an update without bootstrap
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40233579
ok I've update it to not use bootstrap at all

http://jsbin.com/kacof/3/

As for it loading slowly, you can download the knockoutjs and jquery scripts and serve them from your local server.  That may or may not be slower for you.  Regardless the browser with cache it after the first request anyway so subsequent loads will be a LOT faster.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40233580
I've removed the "disabled" class from the buttons and moved it to it's inherent attribute
ie
<button type='button' class='btn btn-default' disabled>

As for the javascript, we just modify that attribute rather than add/remove a class

viewModel.itemID.subscribe(function(newval){
	if(viewModel.itemID().length >= 2) {
		$('button').prop('disabled',false);
	}
	if(viewModel.itemID().length < 2) {
		$('button').prop('disabled',true);
	}
});

Open in new window


The above function can be simplified, but i've kept it in full to show what's happening:
viewModel.itemID.subscribe(function(newval){
	$('button').prop('disabled',(viewModel.itemID().length < 2));
});

Open in new window

0
 

Author Comment

by:Tpaul_10
ID: 40265402
I will have to try Rob's solution and will be doing it in a day or tow. Sorry for the delayed response and please keep this question open.

Thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40265484
Not at all.  We all get busy with things.  I'll keep monitoring.
0
 

Author Comment

by:Tpaul_10
ID: 40277290
Rob,

I can't get it done with just the images -:(
Took your following code and took out the <button> section and added image and not working as I expected.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2014 by rjurd (http://jsbin.com/kacof/3/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
	<head>
<script src="//code.jquery.com/jquery.min.js"></script>
bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
		<title>Untitled Document</title>
	
<style id="jsbin-css">

</style>
</head>

	<body class='well'>
		<div data-bind="text: itemID().length + ' selected'"></div>
		<table>
			<cfoutput query="myQry1">
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID-0#" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID#-1" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID-2#" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID#-3" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
			</cfoutput>

			<tr>
				<td align="center" colspan="6">
					<a href="JavaScript:validatePage('MyFuseaction1');"><img src="/Images/Images1.gif" alt="" border="0" align="middle">
					</a>
					<button type='button' class='btn btn-default' disabled>Action 1</button>
					&nbsp;&nbsp;<span class='my_class_item'><span class='bold'>-OR-</span></span>&nbsp;&nbsp;
					<a href="JavaScript:validatePage('MyFuseaction2');"><img src="/Images/Images2.gif" border="0" align="middle"></a>
					<button type='button' class='btn btn-default' disabled>Action 2</button>
				</td>
			</tr>
		</table>	
	<script>
function validatePage(FuseAction)
{

	valid = false;
	for(j=0;j<frmFA.length;j++)
	{
		if (frmFA.elements[j].checked)
			valid = true;
	}
	if (valid)
		submitfuseAction(FuseAction);
	else
		alert('At least one item must be selected.');
}

viewModel = {
	itemID: ko.observableArray([])
}

viewModel.itemID.subscribe(function(newval){
	$('button').prop('disabled',(viewModel.itemID().length < 2));
});

ko.applyBindings(viewModel);
</script>
<script src="http://static.jsbin.com/js/render/edit.js?3.18.29"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1656750-34', 'jsbin.com');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');

</script>

</body>
</html>

Open in new window

0
 

Author Comment

by:Tpaul_10
ID: 40277298
I have also tried the following as well as a simpler version.

I am able to gray out the buttons with CSS, but can't take out the style with
document.getElementById('wrapper').style = "none";

Open in new window


And can not make the both the buttons active. Please try with an image and you should be able to see the difference.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function countCheckboxes ( ) {
        var form = document.getElementById('testForm');
        var count = 0;
        for(var n=0;n < form.length;n++){
          if(form[n].name == 'itemID[]' && form[n].checked){
            count++;
			
          }
        }
		
		if(count >2)
		{
		
        document.getElementById('wrapper').style = "none";
        //document.getElementById('checkCount').innerHTML = count;
		 document.getElementById('test').disabled = false;
		alert("total no of checkbox selected "+count)
		}
		else
		{
		document.getElementById('test').disabled = true;
		}
      }
/*
function diableQuoteBtns()
{
  document.getElementById('itembutton').disabled = false;


}*/
</script>
</head>
<style>
#myImage {
    opacity: 0.5;
    filter: alpha(opacity=40); /* msie */
}

/* or */

#wrapper {
    opacity: 0.5;
    filter: alpha(opacity=40); /* msie */
    background-color: #0000;
}
</style>
<body >
<form name="form1"  id="testForm">
<table>

	<tr>

		<td> <input type="checkbox" name="itemID[]" id="item1" value="1" onclick="countCheckboxes()" >
		<input type="checkbox" name="itemID[]"  id="item2" value="2" onclick="countCheckboxes()" >
		<input type="checkbox" name="itemID[]"  id="item3" value="3" onclick="countCheckboxes()" >
		<input type="checkbox" name="itemID[]"  id="item4" value="4" onclick="countCheckboxes()" >
		
		</td>
		<td><span class='my_class_item'>Item Name : </span></td>
	</tr>
	</table>
<table>
<tr>

     <td align="center" colspan="6">
		 <!---<a href="JavaScript:validatePage('myAction1');"><div id="wrapper"><img id="myImage" src="button_quote.gif" alt="" border="0" align="middle"></div></a>
			&nbsp;&nbsp;<span class='my_class_item'><span class='bold'>-OR-</span></span>&nbsp;&nbsp;
			<a href="JavaScript:validatePage(''myAction2');"><div id="wrapper"><img id="myImage" src="button_quote.gif" border="0" align="middle"></div></a>--->
			
				<div id = "wrapper"><input type="image" disabled name="Testing"  id="test" src="button_image1.gif" border="0" align="middle" onClick="JavaScript:validateForm('myAction1');">
				<input type="image" disabled name="Testing"  id="test" src="button_iamge2.gif" border="0" align="middle" onClick="JavaScript:validateForm('myAction2');">
				</div>
		  </td>
		 
</tr>
</table>
</form>
</body>

</html>

Open in new window

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40277863
Ok, I've seen your code.  The difference is you're trying to style an <a> tag with an <img> and use it as a button.  The images you're trying to use... can these be created using CSS? or even as a background to a button element?  Are you able to post the images you're trying to use here so I can get an idea of what you're trying to use as I may be able to style it differently for you to get the same effect.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40277877
This uses an image sprite https://0.s3.envato.com/files/140020.jpg
and css to style the buttons as images

http://jsbin.com/kacof/5/edit
0
 

Author Comment

by:Tpaul_10
ID: 40278238
Thanks for following up and responding to my questions.

1. I am not sure what you meant by "can these images be created by using CSS"?
(I have these images and when I come to the page, I want them to be visible but grayed out like I am doing in my code like setting the background to #0000 in my CSS)

2. Once 2 or more check boxes are checked I will have to make them active and not grayed out.

3. Yes, I have attached a sample button and my original button will exactly looks like the same.

4. I was experimenting with my code and changed from <a> to the following code.

<div id = "wrapper"><input type="image" disabled name="Testing"  id="test" src="button_image1.gif" border="0" align="middle" onClick="JavaScript:validateForm('myAction1');">
				<input type="image" disabled name="Testing"  id="test" src="button_iamge2.gif" border="0" align="middle" onClick="JavaScript:validateForm('myAction2');">
				</div>

Open in new window


Please let me know if you need any additional information to get this done and appreciate all your time and help.
button-submit.gif
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40278285
No problem. I'll be here till we solve it

Two things.

 Firstly I'll style your button without an image as it doesn't look like you need one and using an image limits you somewhat

Secondly did you see
http://jsbin.com/kacof/5/edit
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40278605
http://jsbin.com/kacof/6/edit

I've styled your image as a pure CSS derivative
0
 

Author Comment

by:Tpaul_10
ID: 40278667
Thanks again Rob, appreciate all your help.

I have checked the link and  works exactly what I am looking for. I have copied the code to test the same on my machine with no luck and please see the following code which I am using or basically copied from your link and trying.

Other thing  I forgot was , Yes I should be able to post and need to add Onclick event for both the buttons

Following is code I am verifying now.

Sincere Thanks Rob
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
<script src="//code.jquery.com/jquery.min.js"></script>
bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
function validatePage(FuseAction)
{

	valid = false;
	for(j=0;j<frmFA.length;j++)
	{
		if (frmFA.elements[j].checked)
			valid = true;
	}
	if (valid)
		submitfuseAction(FuseAction);
	else
		alert('At least one item must be selected.');
}

viewModel = {
	itemID: ko.observableArray([])
};

viewModel.itemID.subscribe(function(newval){
	$('button').prop('disabled',(viewModel.itemID().length < 2));
});

ko.applyBindings(viewModel);


		<title>Untitled Document</title>
		
	</head>
	<style>
	button:hover {
	background: url(https://0.s3.envato.com/files/140020.jpg) no-repeat -23px -23px
}

button.mail {
	background: url(https://0.s3.envato.com/files/140020.jpg) no-repeat -31px -35px
}

button.tool {
	background: url(https://0.s3.envato.com/files/140020.jpg) no-repeat -85px -35px

}
button.yours,button.mine {
	float: left;
}
button.yours {
	background: url(http://filedb.experts-exchange.com/incoming/2014/08_w34/868007/button-submit.gif) no-repeat;
	width: 60px;
	height: 24px;
	border: 0px;
}
button.mine {
	/*background-color: #da0000;*/
	border-radius: 10px;
	height: 20px;
	width: 60px;
	color: white;
	font-size: 10px;
	letter-spacing: 1px;
	font-weight: bold;
}
button.mine {
  background: -webkit-linear-gradient(white, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(white, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(white, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(218,0,0,0.4), #d40000 19%); /* Standard syntax */
}
button {
	width: 45px;
	height: 30px;
	outline:0;
}

button:disabled {
	opacity: 0.5;
}
	</style>

	<body class='well'>
		<div data-bind="text: itemID().length + ' selected'"></div>
		<table>
			<cfoutput query="myQry1">
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID-0#" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID#-1" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID-2#" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID#-3" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
			</cfoutput>

			<tr>
				<td align="center" colspan="6">
					<!--<a href="JavaScript:validatePage('MyFuseaction1');"><img src="/Images/Images1.gif" alt="" border="0" align="middle">
					</a>-->
					<!--<button type='button' class='btn btn-default mail' disabled></button>
					&nbsp;&nbsp;<span class='my_class_item'><span class='bold'>-OR-</span></span>&nbsp;&nbsp;-->
					<!--<a href="JavaScript:validatePage('MyFuseaction2');"><img src="/Images/Images2.gif" border="0" align="middle"></a>-->
					<!--<button type='button' class='btn btn-default tool' disabled></button>-->
					<button type='button' class='btn btn-default yours' disabled></button>&nbsp;
					<button type='button' class='btn btn-default mine' disabled>Submit</button>
				</td>
			</tr>
		</table>	
	</body>
</html>

Open in new window

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40278688
The <style> tag is between the <head> and the <body>.  It needs to be in the <head>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
<script src="//code.jquery.com/jquery.min.js"></script>
bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
function validatePage(FuseAction)
{

	valid = false;
	for(j=0;j<frmFA.length;j++)
	{
		if (frmFA.elements[j].checked)
			valid = true;
	}
	if (valid)
		submitfuseAction(FuseAction);
	else
		alert('At least one item must be selected.');
}

viewModel = {
	itemID: ko.observableArray([])
};

viewModel.itemID.subscribe(function(newval){
	$('button').prop('disabled',(viewModel.itemID().length < 2));
});

ko.applyBindings(viewModel);


		<title>Untitled Document</title>
		
	<style>
	button:hover {
	background: url(https://0.s3.envato.com/files/140020.jpg) no-repeat -23px -23px
}

button.mail {
	background: url(https://0.s3.envato.com/files/140020.jpg) no-repeat -31px -35px
}

button.tool {
	background: url(https://0.s3.envato.com/files/140020.jpg) no-repeat -85px -35px

}
button.yours,button.mine {
	float: left;
}
button.yours {
	background: url(http://filedb.experts-exchange.com/incoming/2014/08_w34/868007/button-submit.gif) no-repeat;
	width: 60px;
	height: 24px;
	border: 0px;
}
button.mine {
	/*background-color: #da0000;*/
	border-radius: 10px;
	height: 20px;
	width: 60px;
	color: white;
	font-size: 10px;
	letter-spacing: 1px;
	font-weight: bold;
}
button.mine {
  background: -webkit-linear-gradient(white, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(white, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(white, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(218,0,0,0.4), #d40000 19%); /* Standard syntax */
}
button {
	width: 45px;
	height: 30px;
	outline:0;
}

button:disabled {
	opacity: 0.5;
}
	</style>
	</head>

	<body class='well'>
		<div data-bind="text: itemID().length + ' selected'"></div>
		<table>
			<cfoutput query="myQry1">
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID-0#" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID#-1" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID-2#" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID#-3" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
			</cfoutput>

			<tr>
				<td align="center" colspan="6">
					<!--<a href="JavaScript:validatePage('MyFuseaction1');"><img src="/Images/Images1.gif" alt="" border="0" align="middle">
					</a>-->
					<!--<button type='button' class='btn btn-default mail' disabled></button>
					&nbsp;&nbsp;<span class='my_class_item'><span class='bold'>-OR-</span></span>&nbsp;&nbsp;-->
					<!--<a href="JavaScript:validatePage('MyFuseaction2');"><img src="/Images/Images2.gif" border="0" align="middle"></a>-->
					<!--<button type='button' class='btn btn-default tool' disabled></button>-->
					<button type='button' class='btn btn-default yours' disabled></button>&nbsp;
					<button type='button' class='btn btn-default mine' disabled>Submit</button>
				</td>
			</tr>
		</table>	
	</body>
</html>

Open in new window

0
 

Author Comment

by:Tpaul_10
ID: 40278716
Thank you for the quick reply.

I have just copied your code from above and still not working -:(
I am looking into it to see why

Sincere thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40278730
What exactly isn't working?  Is something not showing, are the buttons enabled/disabled?  I need a little more to go on.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:Tpaul_10
ID: 40278817
Sorry Rob.

1. When I load the page the button are grayed out : Works
2. When I check the check boxes nothing happens

I am also trying to see if there is any JS error with no luck.

Thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40278822
make sure you open the dev tools before you load the page, otherwise reload and try again.

if the button are not being disabled then it will be related to the knockoutjs library not loading?not sure but have a look at the network tab as well as the console in the dev tools, when you load the page.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40278825
ok I think i've got it, you just missed putting <script> tags around the javascript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
<script src="//code.jquery.com/jquery.min.js"></script>
bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script>
function validatePage(FuseAction)
{

	valid = false;
	for(j=0;j<frmFA.length;j++)
	{
		if (frmFA.elements[j].checked)
			valid = true;
	}
	if (valid)
		submitfuseAction(FuseAction);
	else
		alert('At least one item must be selected.');
}

viewModel = {
	itemID: ko.observableArray([])
};

viewModel.itemID.subscribe(function(newval){
	$('button').prop('disabled',(viewModel.itemID().length < 2));
});

ko.applyBindings(viewModel);
</script>

		<title>Untitled Document</title>
		
	<style>
	button:hover {
	background: url(https://0.s3.envato.com/files/140020.jpg) no-repeat -23px -23px
}

button.mail {
	background: url(https://0.s3.envato.com/files/140020.jpg) no-repeat -31px -35px
}

button.tool {
	background: url(https://0.s3.envato.com/files/140020.jpg) no-repeat -85px -35px

}
button.yours,button.mine {
	float: left;
}
button.yours {
	background: url(http://filedb.experts-exchange.com/incoming/2014/08_w34/868007/button-submit.gif) no-repeat;
	width: 60px;
	height: 24px;
	border: 0px;
}
button.mine {
	/*background-color: #da0000;*/
	border-radius: 10px;
	height: 20px;
	width: 60px;
	color: white;
	font-size: 10px;
	letter-spacing: 1px;
	font-weight: bold;
}
button.mine {
  background: -webkit-linear-gradient(white, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(white, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(white, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(218,0,0,0.4), #d40000 19%); /* Standard syntax */
}
button {
	width: 45px;
	height: 30px;
	outline:0;
}

button:disabled {
	opacity: 0.5;
}
	</style>
	</head>

	<body class='well'>
		<div data-bind="text: itemID().length + ' selected'"></div>
		<table>
			<cfoutput query="myQry1">
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID-0#" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID#-1" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID-2#" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID#-3" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
			</cfoutput>

			<tr>
				<td align="center" colspan="6">
					<!--<a href="JavaScript:validatePage('MyFuseaction1');"><img src="/Images/Images1.gif" alt="" border="0" align="middle">
					</a>-->
					<!--<button type='button' class='btn btn-default mail' disabled></button>
					&nbsp;&nbsp;<span class='my_class_item'><span class='bold'>-OR-</span></span>&nbsp;&nbsp;-->
					<!--<a href="JavaScript:validatePage('MyFuseaction2');"><img src="/Images/Images2.gif" border="0" align="middle"></a>-->
					<!--<button type='button' class='btn btn-default tool' disabled></button>-->
					<button type='button' class='btn btn-default yours' disabled></button>&nbsp;
					<button type='button' class='btn btn-default mine' disabled>Submit</button>
				</td>
			</tr>
		</table>	
	</body>
</html>

Open in new window

0
 

Author Comment

by:Tpaul_10
ID: 40278893
No luck Rob, same thing from last time.
I have added the language attribute to script and tried with no luck. I have just copied your code from above and tried

Have you tried the above code on your computer independently?


Also, I think following is the issue.

button.yours {
	background: url(http://filedb.experts-exchange.com/incoming/2014/08_w34/868007/button-submit.gif) no-repeat;

Open in new window

can I update it to background: C:/Images/myimage.gif;?

Thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40278909
You can update the image url but not with c:/.... hang on, how are you running this?
When you vie it on your machine, what's the url of your page?
See the scripts that start with "//..." put an http: at the beginning ad I suspect you're running this on file://
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40278914
Vie should be run. I'm on my phone heading to bed.  I'll check in the morning.
0
 

Author Comment

by:Tpaul_10
ID: 40278926
This is the URL when I verify it.

C:\Users\myName\Desktop\JSTesting\hello11.html

Thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40278936
Yes that's the issue. It's running locally in the file://context and not http://so the scripts are trying to load from a local location.

So change them to:
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>

Open in new window

0
 

Author Comment

by:Tpaul_10
ID: 40278990
Yes, I have added http and added the code background: url(button_quote.gif) no-repeat;

Still the same Rob and sorry to disturb your sleep. I will try to play with the code and see I can get it done.


Attached is the code I have right now
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script>
function validatePage(FuseAction)
{

	valid = false;
	for(j=0;j<frmFA.length;j++)
	{
		if (frmFA.elements[j].checked)
			valid = true;
	}
	if (valid)
		submitfuseAction(FuseAction);
	else
		alert('At least one item must be selected.');
}

viewModel = {
	itemID: ko.observableArray([])
};

viewModel.itemID.subscribe(function(newval){
	$('button').prop('disabled',(viewModel.itemID().length < 2));
});

ko.applyBindings(viewModel);
</script>

		<title>Untitled Document</title>
		
	<style>
	button:hover {
	background: url(https://0.s3.envato.com/files/140020.jpg) no-repeat -23px -23px
}

button.mail {
	background: url(https://0.s3.envato.com/files/140020.jpg) no-repeat -31px -35px
}

button.tool {
	background: url(https://0.s3.envato.com/files/140020.jpg) no-repeat -85px -35px

}
button.yours,button.mine {
	float: left;
}
button.yours {
	background: url(button_quote.gif) no-repeat;
	width: 60px;
	height: 24px;
	border: 0px;
}
button.mine {
	/*background-color: #da0000;*/
	border-radius: 10px;
	height: 20px;
	width: 60px;
	color: white;
	font-size: 10px;
	letter-spacing: 1px;
	font-weight: bold;
}
button.mine {
  background: -webkit-linear-gradient(white, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(white, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(white, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(218,0,0,0.4), #d40000 19%); /* Standard syntax */
}
button {
	width: 45px;
	height: 30px;
	outline:0;
}

button:disabled {
	opacity: 0.5;
}
	</style>
	</head>

	<body class='well'>
		<div data-bind="text: itemID().length + ' selected'"></div>
		<table>
			<cfoutput query="myQry1">
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID-0#" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID#-1" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID-2#" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
						<input type="checkbox" name="itemID" value="#myQry1.ItemID#-3" data-bind="checked: itemID">Item Name : #myQry1.itemName#
						</label>
					</td>
				</tr>
			</cfoutput>

			<tr>
				<td align="center" colspan="6">
					<!--<a href="JavaScript:validatePage('MyFuseaction1');"><img src="/Images/Images1.gif" alt="" border="0" align="middle">
					</a>-->
					<!--<button type='button' class='btn btn-default mail' disabled></button>
					&nbsp;&nbsp;<span class='my_class_item'><span class='bold'>-OR-</span></span>&nbsp;&nbsp;-->
					<!--<a href="JavaScript:validatePage('MyFuseaction2');"><img src="/Images/Images2.gif" border="0" align="middle"></a>-->
					<!--<button type='button' class='btn btn-default tool' disabled></button>-->
					<button type='button' class='btn btn-default yours' disabled></button>&nbsp;
					<button type='button' class='btn btn-default mine' disabled>Submit</button>
				</td>
			</tr>
		</table>	
	</body>
</html>
                                          

Open in new window

Thanks
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 40279122
@Tpaul_10 what issue you are facing.
I hope u tried my code and it was working right? do you require any more changes in that
0
 

Author Comment

by:Tpaul_10
ID: 40279208
Yes, I have tried your code and didn't work as I was expecting.

Here is what I am looking for

1. Images should display when I go to the page but should gray out (in your post you had <tr id="itembutton" style="display:none">.
So, I took out and made some changes. (please see below code which I have made some changes and not get it right)

2. When more than two check boxes are selected the images should NOT be grayed out and active so that users can complete their action or transaction.

3. Rob had an example and this is exactly what I am looking. (here is the link )
But I copied the same code to try it out and doesn't work :(

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function countCheckboxes ( ) {
        var form = document.getElementById('testForm');
        var count = 0;
        for(var n=0;n < form.length;n++){
          if(form[n].name == 'itemID[]' && form[n].checked){
            count++;
			
          }
        }
		
		if(count >2)
		{
		
        document.getElementById('wrapper').style = "none";
        //document.getElementById('checkCount').innerHTML = count;
		 document.getElementById('test').disabled = false;
		alert("total no of checkbox selected "+count)
		}
		else
		{
		document.getElementById('test').disabled = true;
		}
      }
/*
function diableQuoteBtns()
{
  document.getElementById('itembutton').disabled = false;


}*/
</script>
</head>
<style>
#myImage {
    opacity: 0.5;
    filter: alpha(opacity=40); /* msie */
}

/* or */

#wrapper {
    opacity: 0.5;
    filter: alpha(opacity=40); /* msie */
    background-color: #0000;
}
</style>
<body >
<form name="form1"  id="testForm">
<table>

	<tr>

		<td> <input type="checkbox" name="itemID[]" id="item1" value="1" onclick="countCheckboxes()" >
		<input type="checkbox" name="itemID[]"  id="item2" value="2" onclick="countCheckboxes()" >
		<input type="checkbox" name="itemID[]"  id="item3" value="3" onclick="countCheckboxes()" >
		<input type="checkbox" name="itemID[]"  id="item4" value="4" onclick="countCheckboxes()" >
		
		</td>
		<td><span class='my_class_item'>Item Name : </span></td>
	</tr>
	</table>
<table>
<tr>

     <td align="center" colspan="6">
		 <!---<a href="JavaScript:validatePage('myAction1');"><div id="wrapper"><img id="myImage" src="button_quote.gif" alt="" border="0" align="middle"></div></a>
			&nbsp;&nbsp;<span class='my_class_item'><span class='bold'>-OR-</span></span>&nbsp;&nbsp;
			<a href="JavaScript:validatePage(''myAction2');"><div id="wrapper"><img id="myImage" src="button_quote.gif" border="0" align="middle"></div></a>--->
			
				<div id = "wrapper"><input type="image" disabled name="Testing"  id="test" src="button_image1.gif" border="0" align="middle" onClick="JavaScript:validateForm('myAction1');">
				<input type="image" disabled name="Testing"  id="test" src="button_iamge2.gif" border="0" align="middle" onClick="JavaScript:validateForm('myAction2');">
				</div>
		  </td>
		 
</tr>
</table>
</form>
</body>

</html>

Open in new window




Hope this helps.
0
 

Author Comment

by:Tpaul_10
ID: 40279210
Here is the link Rob had :

http://jsbin.com/kacof/6/edit

Thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40279898
Ok I'm awake now *yawn* (excuse me)

There are still issues in your html that I didn't have. Such as your haven't closed the <head> tag

You should have this basic format

<html>
<head>
...//script and css stuff goes here
</head>
<body>
...
</body>
</html>
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40279904
You've also got cfoutput tags. This isn't going to work unless you run it on a ColdFusion server.
0
 

Author Comment

by:Tpaul_10
ID: 40280229
Good Morning Rob.

Thanks for following up and I have tried your example independently as .html and it works.
I was rushing myself and had some basic mistakes like you have mentioned. But I made sure the code was right and ran the script with no luck.
 But I have moved the following code down or bottom of the page (i.e. after my </table>).

	<script>try {function validatePage(FuseAction)
{

	valid = false;
	;window.runnerWindow.protect({ line: 5, reset: true }); for(j=0;j<frmFA.length;j++)
	{;
if (window.runnerWindow.protect({ line: 5 })) break;

		if (frmFA.elements[j].checked)
			valid = true;
	}
	if (valid)
		submitfuseAction(FuseAction);
	else
		alert('At least one item must be selected.');
}

viewModel = {
	itemID: ko.observableArray([])
};

viewModel.itemID.subscribe(function(newval){
	$('button').prop('disabled',(viewModel.itemID().length < 2));
});

ko.applyBindings(viewModel);


} catch (error) { throw error; }
</script>

Open in new window


Now I am writing/implementing in my original code to see how it works. But can you please make the buttons as clickable so that user can complete the transaction?


Since I don't want to use the following URLs, I copying these files to my local. But the second link is not working.
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>

Open in new window


I will update you how my changes are going in my original code.
Thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40280440
There is no bootstrap code so you can remove that second line.  you should only have the following and they must be in that order:
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>

Open in new window


For this to work properly you need to put the javscript in the jQuery initialisation $(function() { ... });

I've also added a viewModel.submitForm function to make the button clickable so you can do something with it.

function validatePage(FuseAction)
{

	valid = false;
	for(j=0;j<frmFA.length;j++)
	{
		if (frmFA.elements[j].checked)
			valid = true;
	}
	if (valid)
		submitfuseAction(FuseAction);
	else
		alert('At least one item must be selected.');
}
$(function() {
	viewModel = {
		itemID: ko.observableArray([])
	};

	viewModel.itemID.subscribe(function(newval){
		$('button').prop('disabled',(viewModel.itemID().length < 2));
	});

	viewModel.submitForm = function() {
		// submit your form here
	}

	ko.applyBindings(viewModel);

});

Open in new window

0
 

Author Comment

by:Tpaul_10
ID: 40280829
Thanks for the update Rob and I have added the above code and made the following change to the button code to have an onClick event, is this right as I am not able to get it right.

<button type='button' class='btn btn-default yours' disabled onClick="validatePage("test")"></button>&nbsp;
					<button type='button' class='btn btn-default yours' disabled onClick="validatePage("test")"></button>

Open in new window


Thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40280995
<button type='button' class='btn btn-default yours' disabled data-bind="click: function() { validatePage("test"); }"></button>

Open in new window

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40281000
As we're using the knockout framework it routed make sense to continue using it with the click binding add it will give you access to the view model

You can use the onclick event but it's all lowercase and you need single quotes inside the double quotes

<button type='button' class='btn btn-default yours' disabled onclick="validatePage('test')">
0
 

Author Comment

by:Tpaul_10
ID: 40281210
Thank you and let me try making the changes and let you know how it goes.
Another thing is, when I move the cursor over the images (I.e. after checking the two check boxes) I don't see the hand sign or as a link to click on it, is there any attribute to get it?

Thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40281225
in your css:

button {
    cursor: pointer;
}
0
 

Author Comment

by:Tpaul_10
ID: 40284920
Rob,

THANK YOU, THANK YOU and appreciate all your help and also patiently answering all the questions I had. I was able to get it done with your help.
0
 

Author Closing Comment

by:Tpaul_10
ID: 40284921
Excellent help by Rob
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40284930
No problem.  Thanks for the nice words :)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now