asked on

checkbox validation--doesn't work

hi, i have this program:

1.
..
function validation() {

alert(document.new_profile.apollo_name.checked);
if (document.new_profile.apollo_name.checked) {
alert("please select atleast one apollo");
return false;
}

}

<form name="new_profile" method="POST" action="profile" onsubmit="return validation();" >
..
..
<input type="checkbox" name="apollo_name" id="apollo_id" value="1" >
<input type="checkbox" name="apollo_name" id="apollo_id" value="2" >
<input type="checkbox" name="apollo_name" id="apollo_id" value="3" >
<input type="checkbox" name="apollo_name" id="apollo_id" value="4" >
..
..
<input type="submit">

*****

But with this code, it's totally can not work. the alert() message only showing me "undifine".

2. i have this program,

<tr>
<td bgcolor="#FFFFFF">
       <table width="127" border="0" cellspacing="2" cellpadding="2">
       <tr align="center" valign="middle">
       <td width="31">
            <input type="image" src="images/icons_add.gif" value="Submit" alt="Add Profile" onClick="AddProfile();">
       </td>
       <td width="31">
            <input type="image" src="images/icons_edit.jpg" value="Submit" alt="Edit Profile" onClick="EditProfile();" >
       </td>
       <td width="31">
            <input type="image" src="images/icons_view.jpg" value="Submit" alt="View Profile" onClick="viewProfile();">
       </td>
       <td width="31">
            <input type="image" src="images/icons_search.jpg" value="Submit" alt="Seach Profile" onClick="searchProfile();">
       </td>
       </tr>
       </table>
      </td>
</tr>
...
..
..
      <td><span class="contents4"><input type="checkbox" name="pid" value=<%= po.getPid() %> ></span></td>

****
this time i am totally lost, i need to achieve, when the user check on checkbox, nothing will happen, but if they checked more than one checkbox, i need to disable the "<input type="image" src="images/icons_add.gif" value="Submit" alt="Add Profile" onClick="AddProfile();">"

how can i do that? what checkbox event i should use.

please help.

Nushi

few comments:

1. all have same ID

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

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

Start Free Trial

SOLUTION

arunrs

membership

This solution is only available to members.

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

Start Free Trial

arunrs

Similarly, for question 2, try using the "onClick" event of the checkbox.

The onclick function will look something like this.

function Check4Multiple()
{
var count = 0;
for (i = 0; i < document.formName.checkboxName.length; i ++)
{
if (document.formName.checkboxName[i].checked)
{
count ++;
if (count > 1)
{
document.formName.imageName.disabled = false;
return;
}
}
}
}

Replace
the formName -->value of name attribute of the form
the checkboxName -->value of name attribute of the checkbox
the imageName -->value of name attribute of the imageName

Hope this is useful.

arunrs

Michel Plungjan

@Arunrs 1. What is the difference between yours an mine (except I posted a complete example), and
2. you cannot disable an image:

<body onLoad="document.x.y.disabled=true">
<form name="x" onSubmit="alert('Hello')">
<input name="y" type="image" src="https://www.experts-exchange.com/images/expertAwards2006Button.gif">
</form>

arunrs

Sorry mplungjan,

I found that on first look your code was a little bit confusing to me. Sorry, that was my mistake that I could not make it out clearly. So, I just wrote down mine.

As far as the image not being able to disable, I posted the wrong one. What I wanted to post was

document.formName.imageName.onclick= "";

I copied from the wrong file and pasted the code. Again, sorry for the same. Just a little bit curious I suppose. :)

arunrs

Michel Plungjan

Again. You cannot access the image by name
Also there is no valid onClick handler of input type=image in several browsers.
Also even if you COULD access the image's onClick handler, what would happen when you unCheck one of the checkboxes - then your onClick event was dead.

Michel

RainMan82

function validation() {

alert(document.new_profile.apollo_name.checked);
if (document.new_profile.apollo_name.checked == true) {
alert("please select atleast one apollo");
return false;
}

}

Michel Plungjan

@Rainman: Can I delete your comment? It does not address the problem and is wrong.

spiderman19

ASKER

mplungjan, arguns, thanks for your times.

still having my problems on Q2.

this the code i have used. it's still prompt me error. Mplugnjan, you are right, i can't call the image with this. How can i do instead?

..
..
function Check4Multiple()
{
var count = 0;
for (i = 0; i < document.profile_table.pid.length; i++)
{
if (document.profile_table.pid[i].checked)
{
count ++;
if (count > 1)
{
document.profile_table.edit.disabled = true;
return;
}
}
}
}
..
..
<input type="image" name="edit" src="images/icons_edit.jpg" value="Submit" alt="Edit Profile">
..
..
<input type="checkbox" name="pid" value=<%= po.getPid() %> onClick="Check4Multiple();">
..
..

mplungjan, with your first code,
var text = '<input type="image" src="images/icons_add.gif" value="Submit" alt="Add Profile" onClick="AddProfile();">'

it's seems you are trying to cover my icon with disable.gif. Please clarify further on your code as it's difficult to understand your code. Sorry to say that. no means to offense.

to Recap, i wish to disable the icons_edit.gif when user check more than one checkbox. i am having the problems on disable (or grey off) the icon and make the icon unclickable.

Michel Plungjan

function checkThem(theCheck) {
// make a variable that contains the form element we want to toggle
var text = '<input type="image" src="images/icons_add.gif" value="Submit" alt="Add Profile" onClick="AddProfile();">'
var res = countThem(theCheck.form.elements[theCheck.name]); // count the checked boxes
if (res > 1) { // more than one checked
text = '<img src="disabled.gif">'; // replace the image submit with an inactive gif
}
document.getElementById('addProfile').innerHTML = text; // fill the cell with the result
}

spiderman19

ASKER

how does this work?

text = '<img src="disabled.gif">'; // replace the image submit with an inactive gif

where am i suppose to get this disable.gif from? even after i put this disabled.gif in, it's doesnt mean the icon will be disable, right? it's just the name of the file called, disable.gif

Michel Plungjan

You need of course to create a disabled gif. Is that a problem? Just take the submit you have and make it greyscale or something

I simply replace the image button with another image - a lot simpler and more effective than trying to disable the image you have.

spiderman19

ASKER

mplugin,. my main objective is to make the button or the image in here as non-clickable. If replace the image with other image, named disabled.gif donest mean that it's not clickable...

if it possible to "disable" the image instead? if you know the way, can share with me how am i suppose to do that?

pleaseeeeeeeee thanks!

Michel Plungjan

I replace the <input type="image"> tag with a simple <img src=".."> tag.
When you click on the replaced image, nothing will happen

Why do you not try my code?

spiderman19

ASKER

not to say i dont want to try your code. At first look, it's seems your code is very complicated and diffifcult to understand comparing with argun version...

And furthermore, i also dont understand a lot of approach that you are using : For example, this

1. document.getElementById('addProfile').innerHTML = text; // fill the cell with the result
where is the 'addProfiile' come from?

spiderman19

ASKER

<td width="31" id="addProfile">

ok ok

got you. i am trying your code.. thanks

spiderman19

ASKER

friend, i have this: Combination of both code:

function Check4Multiple()
{
var count = 0;
var text = '<input type="image" src="images/icons_add.gif" value="Submit" alt="Add Profile" onClick="AddProfile();">';

for (i = 0; i < document.profile_table.pid.length; i++)
{
if (document.profile_table.pid[i].checked)
{
count ++;
if (count > 1)
{
                        text = '<img src="images/icons_add_disable.gif">';
                   document.getElementById('addProfile').innerHTML = text;
                        return;
} else {
     text='<input type="image" src="images/icons_add.gif" value="Submit" alt="Add Profile" onClick="AddProfile();">';
}
}
}
}

And it's working when i click more than 1 checkbox, the icon will be automaticall change to icons_add_disable.gif

But if i uncheck the checkbox, it's wouldn't go back to icons_add.gif

what shall i do?

Michel Plungjan

What you should do is to tell me you did not understand my code.
You now only change the innerHTML of the cell in one of the cases...

I will simplify:

function Check4Multiple() {
var count = 0;
for (i = 0; i < document.profile_table.pid.length; i++) {
if (document.profile_table.pid[i].checked) {
count ++;
if (count > 1) {
break; // no need to count more. Leave the loop
}
}
}
if (count>1) {
document.getElementById('addProfile').innerHTML = '<img src="images/icons_add_disable.gif">';
}
else {
document.getElementById('addProfile').innerHTML = '<input type="image" src="images/icons_add.gif" value="Submit" alt="Add Profile" onClick="AddProfile();">';
}
}

Michel Plungjan

Here is how I would probably code it:

disabledImg = '<img src="images/icons_add_disable.gif">';
enabledImg = '<input type="image" src="images/icons_add.gif" value="Submit" alt="Add Profile" onClick="AddProfile();">';
function Check4Multiple() {
var count = 0;
for (i = 0; i < document.profile_table.pid.length; i++) {
if (document.profile_table.pid[i].checked) {
count ++;
if (count > 1) {
break;
}
}
}
document.getElementById('addProfile').innerHTML = (count > 1)?disabledImg:enabledImg; // ternary operator
}

spiderman19

ASKER

yeah, it's working nw.. but then my icon got move abit.. i means after i click more than 1 checbox, my icon move down as .5mm down. any ideas? this is the whole code
function Check4Multiple()
{
var count = 0;
var add_enable = ' <td width="31" id="addProfile"> <input type="image" src="images/icons_add.gif" value="Submit" alt="Add Profile" onClick="AddProfile();"> </td>';
       var edit_enable = ' <td width="31" id="editProfile"> <input type="image" name="edit" src="images/icons_edit.jpg" value="Submit" alt="Edit Profile" onClick="EditProfile();" ></td>';
       var view_enable = ' <td width="31" id="viewProfile"> <input type="image" src="images/icons_view.jpg" value="Submit" alt="View Profile" onClick="viewProfile();"></td>';

       var add_disable =       '<td width="31" id="addProfile"> <img src="images/icons_add_disable.gif"></td>';
       var edit_disable = '<td width="31" id="editProfile"> <img src="images/icons_edit_disable.gif"></td>';
       var view_disable = '<td width="31" id="viewProfile"> <img src="images/icons_view_disable.gif"></td>';
for (i = 0; i < document.profile_table.pid.length; i++)
{
if (document.profile_table.pid[i].checked)
{
count ++;
if (count > 1)
{
     break;
       }
       }
      }
      document.getElementById('addProfile').innerHTML = (count > 1)?add_disable:add_enable; // ternary operator
      document.getElementById('editProfile').innerHTML = (count > 1)?edit_disable:edit_enable; // ternary operator
      document.getElementById('viewProfile').innerHTML = (count > 1)?view_disable:view_enable; // ternary operator

}

..
..
.
..
       <table width="127" border="1" cellspacing="2" cellpadding="2">
       <tr align="center" valign="middle">
       <td width="31" id="addProfile">
            <input type="image" src="images/icons_add.gif" value="Submit" alt="Add Profile" onClick="AddProfile();">
       </td>
       <td width="31" id="editProfile">
            <input type="image" name="edit" src="images/icons_edit.jpg" value="Submit" alt="Edit Profile" onClick="EditProfile();" >
       </td>
       <td width="31" id="viewProfile">
            <input type="image" src="images/icons_view.jpg" value="Submit" alt="View Profile" onClick="viewProfile();">
       </td>
       <td width="31">
            <input type="image" src="images/icons_search.jpg" value="Submit" alt="Seach Profile" onClick="searchProfile();">
       </td>
       </tr>
       </table>

********
Sorry for didnt trust you at the first time. apologize for that. try to copy and paste and see the "tiny" diffirent in term of positioning...

Michel Plungjan

you are changing the inside of a tablecell with a tablecell
ALso remove all whitespace before and after images:
and move the vars outside the function. No need to create them each time...

add_enable = '<input type="image" src="images/icons_add.gif" value="Submit" alt="Add Profile" onClick="AddProfile();">';
edit_enable = '<input type="image" name="edit" src="images/icons_edit.jpg" value="Submit" alt="Edit Profile" onClick="EditProfile();" >';
view_enable = '<input type="image" src="images/icons_view.jpg" value="Submit" alt="View Profile" onClick="viewProfile();">';
add_disable = '<img src="images/icons_add_disable.gif">';
edit_disable = '<img src="images/icons_edit_disable.gif">';
view_disable = '<img src="images/icons_view_disable.gif">';
function Check4Multiple()
{
var count = 0;
for (i = 0; i < document.profile_table.pid.length; i++)
{
if (document.profile_table.pid[i].checked)
{
count ++;
if (count > 1)
{
break;
}
}
}
document.getElementById('addProfile').innerHTML = (count > 1)?add_disable:add_enable; // ternary operator
document.getElementById('editProfile').innerHTML = (count > 1)?edit_disable:edit_enable; // ternary operator
document.getElementById('viewProfile').innerHTML = (count > 1)?view_disable:view_enable; // ternary operator

}

..
..
.
..
<table width="127" border="1" cellspacing="2" cellpadding="2">
<tr align="center" valign="middle">
<td width="31" id="addProfile"><input type="image" src="images/icons_add.gif" value="Submit" alt="Add Profile" onClick="AddProfile();"></td>
<td width="31" id="editProfile"><input type="image" name="edit" src="images/icons_edit.jpg" value="Submit" alt="Edit Profile" onClick="EditProfile();" ></td>
<td width="31" id="viewProfile"><input type="image" src="images/icons_view.jpg" value="Submit" alt="View Profile" onClick="viewProfile();"></td>
<td width="31"><input type="image" src="images/icons_search.jpg" value="Submit" alt="Seach Profile" onClick="searchProfile();"></td>
</tr>
</table>

spiderman19

ASKER

i did... anyway, it's not working.. i means the display of the entire icon..

some how the position will run away, after ihave slected one checkbox.

you try and see.

oh yeah, can you help on this Q??
https://www.experts-exchange.com/questions/21847984/HttpSession-related.html

Michel Plungjan

Please show me the html of the page you have problem with. Preferrably a website