Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 246
  • Last Modified:

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.
0
spiderman19
Asked:
spiderman19
  • 11
  • 8
  • 3
  • +2
2 Solutions
 
NushiCommented:
few comments:

1. all have same ID
0
 
Michel PlungjanIT ExpertCommented:
something like this:
nofChecked = 0;
function countThem(theCheck) {
  var count;
  for (i=0;i<theCheck.length ; i++) {
    count += (theCheck[i].checked)?1:0;
  }
  return count;

}
function checkThem(theCheck) {
  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])
  if (res > 1) {
    text = '<img src="disabled.gif">'
  }
  document.getElementById('addProfile').innerHTML = text
}
function validation(theForm) { // assuming there will be more than one apollo
 
  if (countThem(theForm.apollo_name)==0) {
    alert("please select at least one apollo");
    return false;
  }
}

<form name="new_profile" method="POST" action="profile" onsubmit="return validation(this);"  >

 <tr>
    <td bgcolor="#FFFFFF">
         <table width="127"  border="0" 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">
                  <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() %> onClick="checkThem(this)"></span></td>

0
 
arunrsCommented:
For Question 1:
try using the code below.

function validation() {
     for (i = 0; i < document.new_profile.apollo_name.length; i++)
     {
      if (document.new_profile.apollo_name[i].checked)
      {
            alert("Item " + i + " is checked");
      }
      else
      {
            alert("Item " + i + " is not checked");
      }
     }
}
 

Hope this is useful.

arunrs
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
arunrsCommented:
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
0
 
Michel PlungjanIT ExpertCommented:
@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="http://www.experts-exchange.com/images/expertAwards2006Button.gif">
</form>
0
 
arunrsCommented:
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
0
 
Michel PlungjanIT ExpertCommented:
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
0
 
RainMan82Commented:
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;
}

}
0
 
Michel PlungjanIT ExpertCommented:
@Rainman: Can I delete your comment? It does not address the problem and is wrong.
0
 
spiderman19Author Commented:
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.


0
 
Michel PlungjanIT ExpertCommented:

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
}
0
 
spiderman19Author Commented:
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

0
 
Michel PlungjanIT ExpertCommented:
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.

0
 
spiderman19Author Commented:
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!
0
 
Michel PlungjanIT ExpertCommented:
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?
0
 
spiderman19Author Commented:
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?

0
 
spiderman19Author Commented:
 <td width="31" id="addProfile">

ok ok

got you. i am trying your code.. thanks
0
 
spiderman19Author Commented:
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?
0
 
Michel PlungjanIT ExpertCommented:
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();">';
  }
}

0
 
Michel PlungjanIT ExpertCommented:
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
}

0
 
spiderman19Author Commented:
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...
0
 
Michel PlungjanIT ExpertCommented:
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>
0
 
spiderman19Author Commented:
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??
http://www.experts-exchange.com/Web/Web_Languages/JSP/Q_21847984.html
0
 
Michel PlungjanIT ExpertCommented:
Please show me the html of the page you have problem with. Preferrably a website
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 11
  • 8
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now