asked on

Help with JavaScript function for activate and deactivate buttopns

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

Rob

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

Insoftservice inso

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

Tpaul_10

ASKER

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

Insoftservice inso

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;
}

Tpaul_10

ASKER

Thank You.
Do you mean like following?

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

Thanks

Open in new window

Tpaul_10

ASKER

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.

Rob

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>

Tpaul_10

ASKER

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.

Rob

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

Rob

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.

Rob

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

Tpaul_10

ASKER

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

Rob

Not at all. We all get busy with things. I'll keep monitoring.

Tpaul_10

ASKER

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

Tpaul_10

ASKER

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

Rob

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.

Rob

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

Tpaul_10

ASKER

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

Rob

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

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tpaul_10

ASKER

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

Rob

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

Tpaul_10

ASKER

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

Rob

What exactly isn't working? Is something not showing, are the buttons enabled/disabled? I need a little more to go on.

Tpaul_10

ASKER

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

Rob

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.

Rob

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

Tpaul_10

ASKER

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

Rob

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://

Rob

Vie should be run. I'm on my phone heading to bed. I'll check in the morning.

Tpaul_10

ASKER

This is the URL when I verify it.

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

Thanks

Rob

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

Tpaul_10

ASKER

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

Insoftservice inso

@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

Tpaul_10

ASKER

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.

Tpaul_10

ASKER

Here is the link Rob had :

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

Thanks

Rob

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>

Rob

You've also got cfoutput tags. This isn't going to work unless you run it on a ColdFusion server.

Tpaul_10

ASKER

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

Rob

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

Tpaul_10

ASKER

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

Rob

<button type='button' class='btn btn-default yours' disabled data-bind="click: function() { validatePage("test"); }"></button>

Open in new window

Rob

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')">

Tpaul_10

ASKER

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

Rob

in your css:

button {
cursor: pointer;
}

Tpaul_10

ASKER

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.

Tpaul_10

ASKER

Excellent help by Rob

Rob

No problem. Thanks for the nice words :)