Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

LINK TO THIS FORUM!

Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

Partner With Us!

"Best Of Breed" Forums Add Stickiness To Your Site
Partner Button
(Download This Button Today!)

Feedback

"...I love the structure of the site. You start at the top, and drill down to what you want. Maybe I've been using Unix too long... :-) "

Geography

Where in the world do Tek-Tips members come from?

update value of hidden field if other values setHelpful Member! 

dkemas (Programmer)
25 Apr 12 8:40
I have a form with 10 checkboxes and hidden field. If three of the checkboxes are checked, I need to pass a value of 1 to the hidden field, otherwise leave blank.

How would I go about this?

Thanks
feherke (Programmer)
25 Apr 12 8:54
Hi

What have you tried ? Show us your code, including the related HTML form. ( With decoration elements removed. )
 

Feherke.
http://feherke.github.com/

vacunita (Programmer)
25 Apr 12 9:09
I'd start by looking into the onclick event of the checkboxes. And any of the getElement(s) functions to access the hidden field.

Then it's just a matter of cycling through the checkboxes to make sure three of them are checked.
 

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 

dkemas (Programmer)
25 Apr 12 10:25
Thanks for the replies, reading my OP it is a little sparse, sorry.

My form is essentially

CODE

<form name='myform' action='index.php'>

<input type='hidden' name='value1if3boxesticked' value='' />

<input type='checkbox' name='box1' value='1' onClick="myFunction(this)" />
<input type='checkbox' name='box2' value='1' onClick="myFunction(this) />
<input type='checkbox' name='box3' value='1' onClick="myFunction(this) />
... to 10
</form>

So I guess I need to create a counter set to 0, when a box is ticked increment the counter by 1, when the counter hits 3 update the value of the hidden field.

BUT, if someone unticks a box after ticking it and the total number of boxes goes below 3 the hidden field has to stay blank.

Does that make sense?
feherke (Programmer)
25 Apr 12 10:52
Hi

Following your theory with the counter this would be the JavaScript code :

CODE --> JavaScript

var ticked=0
function myFunction(what)
{
  if (what.checked) ticked++; else ticked--
  what.form.value1if3boxesticked.value=ticked>3?'something:''
}
But there are problems :
  • If the visitor checks 2 checkboxes then refreshes the page ( not full reload, just refresh from cache ), the checkboxes will keep their checked status, but the JavaScript counter will be reset.
  • If the visitor temporarily disables JavaScript and checks some checkboxes, even checks made after the JavaScript is enabled again will count incorrectly.
For these reasons Phil's suggestion of always loop over the checkboxes and check each is more robust. This can be accomplished with the following code :

CODE --> JavaScript

function myFunction()
{
  var ticked=0
  for (var i=0,l=document.myform.elements.length;i<l;i++)
    if (document.myform.elements[i].type=='checkbox')
      if (document.myform.elements[i].checked) ticked++
  document.myform.value1if3boxesticked.value=ticked>=3?'something':''
}
window.onload=myFunction
The HTML would be the same, just the parameter in the function calls became unused.
 

Feherke.
http://feherke.github.com/

dkemas (Programmer)
26 Apr 12 4:44
I think I am getting myself all muddled up with the logic of this, been looking at it for too long now I think.

May I start again from scratch? My form runs slightly differently than my poor explanation described and uses some scripts kindly helped on here.

There are 10 rows, each row has a dropdown (called *score where * is the number of the row) with values of 3,2,1. If 2 is selected, a checkbox called *pdp is automatically ticked. If 1 is selected, a checkbox called *redflag is automatically ticked. I have this running for all 10 rows. The checkboxes that are automatically ticked must be visible but not modified manually, but also submitted by the form.

If 3 checkboxes for *redflag is ticked, then it needs to log this in the database so I have a hidden field that needs to have a value of 1 if three *redflag boxes are ticked.

Hope that makes sense. Here's my code as it stands

Javacsript

CODE

<script>
        
//these all tick the pdp and redflag checkboxes based upon the value in the dropdown for that row
function FlagTicked1(control) {
document.myForm.1pdp.checked = (control.value=="2")? true : false;
document.myForm.1redflag.checked = (control.value=="1")? true : false;
}
function FlagTicked2(control) {
document.myForm.2pdp.checked = (control.value=="2")? true : false;
document.myForm.2redflag.checked = (control.value=="1")? true : false;
}
function FlagTicked3(control) {
document.myForm.3pdp.checked = (control.value=="2")? true : false;
document.myForm.3redflag.checked = (control.value=="1")? true : false;
}
function FlagTicked4(control) {
document.myForm.4pdp.checked = (control.value=="2")? true : false;
document.myForm.4redflag.checked = (control.value=="1")? true : false;
}
function FlagTicked5(control) {
document.myForm.5pdp.checked = (control.value=="2")? true : false;
document.myForm.5redflag.checked = (control.value=="1")? true : false;
}
function FlagTicked6(control) {
document.myForm.6pdp.checked = (control.value=="2")? true : false;
document.myForm.6redflag.checked = (control.value=="1")? true : false;
}
function FlagTicked7(control) {
document.myForm.7pdp.checked = (control.value=="2")? true : false;
document.myForm.7redflag.checked = (control.value=="1")? true : false;
}
function FlagTicked8(control) {
document.myForm.8pdp.checked = (control.value=="2")? true : false;
document.myForm.8redflag.checked = (control.value=="1")? true : false;
}
function FlagTicked9(control) {
document.myForm.9pdp.checked = (control.value=="2")? true : false;
document.myForm.9redflag.checked = (control.value=="1")? true : false;
}
function FlagTicked10(control) {
document.myForm.10pdp.checked = (control.value=="2")? true : false;
document.myForm.10redflag.checked = (control.value=="1")? true : false;
}
        
</script>

Form

CODE

<form method='post' action='form.php' id='myForm' name='myForm'>
        
<input type='hidden' name='redflagnotify' value='' /> <!-- this needs to be value='1' if there are 3 redflags checked -->

<table>
<tr>
<th>Code</th>
<th>Question</th>
<th>Score</th>
<th>Witnessed</th>
<th>PDP</th>
<th>Red Flag</th>
</tr>

<tr>    
<td>111</td>    
<td>Question 1</td>
<td>
<select name='1score' onchange="FlagTicked1(this)">
<option  value=''>- Please select -</option>
<option selected="selected" value='3'>3</option>
<option  value='2'>2</option>
<option  value='1'>1</option>
</select>    
</td>    
<td><input type='checkbox' name='1witnessed' value='1' /></td>        
<td><input type='checkbox' name='1pdp' value='1' onclick="return false" onkeydown="return false" class='disabled'  /></td>    
<td><input type='checkbox' name='1redflag' value='1' onclick="return false" onkeydown="return false" class='disabled'  /></td>
</tr>

<tr>    
<td>222</td>    
<td>Question 2</td>
<td>
<select name='2score' onchange="FlagTicked2(this)">
<option  value=''>- Please select -</option>
<option selected="selected" value='3'>3</option>
<option  value='2'>2</option>
<option  value='1'>1</option>
</select>    
</td>    
<td><input type='checkbox' name='2witnessed' value='1' /></td>        
<td><input type='checkbox' name='2pdp' value='1' onclick="return false" onkeydown="return false" class='disabled'  /></td>    
<td><input type='checkbox' name='2redflag' value='1' onclick="return false" onkeydown="return false" class='disabled'  /></td>
</tr>

<tr>    
<td>333</td>    
<td>Question 3</td>
<td>
<select name='3score' onchange="FlagTicked3(this)">
<option  value=''>- Please select -</option>
<option selected="selected" value='3'>3</option>
<option  value='2'>2</option>
<option  value='1'>1</option>
</select>    
</td>    
<td><input type='checkbox' name='3witnessed' value='1' /></td>        
<td><input type='checkbox' name='3pdp' value='1' onclick="return false" onkeydown="return false" class='disabled'  /></td>    
<td><input type='checkbox' name='3redflag' value='1' onclick="return false" onkeydown="return false" class='disabled'  /></td>
</tr>

<!-- etc etc up to 10 -->

</table>
Helpful Member!  feherke (Programmer)
26 Apr 12 5:36
Hi

Ouch. ( Sorry, I just had a "home alone moment". )
  • Functions have parameters with a good reason : to alter their behavior according to external circumstances. For example to pass the order number of the controls to operate upon. In this case the order number can be extracted from the element's name, which was already passed as parameter.
  • Comparison operators' result is a boolean value. No need to use a ternary operator to pick true where the condition evaluates to true and false when the condition evaluates to false. Just use whatever the condition evaluated to.
  • Regardless what are you doing, the visitors can alter your form as they want. Do not base your database operations on the presumption that the relation between the selected options, the checked checkoxes and the hidden field's value will be always correct.
Anyway, my previous JavaScript function can be integrated into your FlagTicked() function, needs only an additional condition to check the checkboxs' names :

CODE --> JavaScript

function FlagTicked(control)
{
  var nr=parseInt(control.name,10)
  document.myForm.elements[nr+'pdp'].checked = control.value=="2";
  document.myForm.elements[nr+'redflag'].checked = control.value=="1";

  var ticked=0
  for (var i=0,l=document.myForm.elements.length;i<l;i++)
    if (document.myForm.elements[i].type=='checkbox'
    && document.myForm.elements[i].name.match(/^\d+redflag$/)
    && document.myForm.elements[i].checked)
      ticked++
  document.myForm.redflagnotify.value=ticked>=3?'1':''
}
Of course, you will have to change all those FlagTicked1(this) .. FlagTicked10(this) calls in the onchange attributes to FlagTicked(this).
 

Feherke.
http://feherke.github.com/

dkemas (Programmer)
26 Apr 12 8:53
Thank you feherke, I am trying to work out what each bit does but wooaaa...

var nr=parseInt(control.name,10)  
document.myForm.elements[nr+'pdp'].checked = control.value=="2";
document.myForm.elements[nr+'redflag'].checked = control.value=="1";
------------
Grabs the integer in the name and runs the script, replacing all the repetition I had before. Got it smile

var ticked=0 - starts the counter

for (var i=0,l=document.reviewForm.elements.length;i<l;i++)  
starts a loop, finds out how many fields there are then loops through them. If they are a checkbox with the name redflag and it's checked then increment the counter.

Is that right? What is /^\d+redflag$/, I guess it is like %redflag% in SQL?
feherke (Programmer)
26 Apr 12 9:30
Hi

You got it right.

Quote (dkemas):

What is /^\d+redflag$/, I guess it is like %redflag% in SQL?
SQL like uses patterns, which are as complex as the old DOS wildcards were. Regular expressions are much more powerful.

,-------------- anchor to the beginning
| ,------------ a digit character ( [0-9] )
| |,----------- previous entity repeated 1 or more times
| ||   ,------- literal string
| || __|__ ,--- anchor to the end
|/\|/     \|
^\d+redflag$

( The regular expression which does the same as the %redflag% pattern would be just /redflag/ . )

Feherke.
http://feherke.github.com/

dkemas (Programmer)
26 Apr 12 9:46
Thanks and drat, you have now given me something else on my 'to read and digest' list :-\

Love the method of explanation by the way, very creative and very very useful to have it explained like that. Many thanks again

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Back To Forum

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close