Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

update value of hidden field if other values set 1

Status
Not open for further replies.
dkemas

dkemas

Programmer
Mar 22, 2012
70
GB
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
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
Hi

Following your theory with the counter this would be the JavaScript code :
JavaScript: 
[b]var[/b] ticked[teal]=[/teal][purple]0[/purple]
[b]function[/b] [COLOR=darkgoldenrod]myFunction[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  [b]if[/b] [teal]([/teal]what[teal].[/teal]checked[teal])[/teal] ticked[teal]++;[/teal] [b]else[/b] ticked[teal]--[/teal]
  what[teal].[/teal]form[teal].[/teal]value1if3boxesticked[teal].[/teal]value[teal]=[/teal]ticked[teal]>[/teal][purple]3[/purple][teal]?[/teal][green][i]'something:''[/i][/green]
[green][i]}[/i][/green]
But there are problems :
[ul]
[li]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.[/li]
[li]If the visitor temporarily disables JavaScript and checks some checkboxes, even checks made after the JavaScript is enabled again will count incorrectly.[/li]
[/ul]
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 :
JavaScript: 
[b]function[/b] [COLOR=darkgoldenrod]myFunction[/color][teal]()[/teal]
[teal]{[/teal]
  [b]var[/b] ticked[teal]=[/teal][purple]0[/purple]
  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]document[teal].[/teal]myform[teal].[/teal]elements[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal]
    [b]if[/b] [teal]([/teal]document[teal].[/teal]myform[teal].[/teal]elements[teal][[/teal]i[teal]].[/teal]type[teal]==[/teal][green][i]'checkbox'[/i][/green][teal])[/teal]
      [b]if[/b] [teal]([/teal]document[teal].[/teal]myform[teal].[/teal]elements[teal][[/teal]i[teal]].[/teal]checked[teal])[/teal] ticked[teal]++[/teal]
  document[teal].[/teal]myform[teal].[/teal]value1if3boxesticked[teal].[/teal]value[teal]=[/teal]ticked[teal]>=[/teal][purple]3[/purple][teal]?[/teal][green][i]'something'[/i][/green][teal]:[/teal][green][i]''[/i][/green]
[teal]}[/teal]
window[teal].[/teal]onload[teal]=[/teal]myFunction
The HTML would be the same, just the parameter in the function calls became unused.


Feherke.
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
Hi

Ouch. ( Sorry, I just had a "home alone moment". )
[ul]
[li]Functions have parameters with a good reason : to alter their behavior according to external circumstances. For example to pass the [highlight #fcc]order number of the controls to operate upon[/highlight]. In this case the [highlight #cfc]order number can be extracted from the element's [tt]name[/tt][/highlight], which was already passed as parameter.[/li]
[li]Comparison operators' result is a boolean value. No need to use a ternary operator to pick [tt]true[/tt] where the condition evaluates to [tt]true[/tt] and [tt]false[/tt] when the condition evaluates to [tt]false[/tt]. [highlight #ccf]Just use whatever the condition evaluated to.[/highlight][/li]
[li]Regardless what are you doing, the visitors can alter your [tt]form[/tt] as they want. Do not base your database operations on the presumption that the relation between the [tt]select[/tt]ed [tt]option[/tt]s, the checked [tt]checkox[/tt]es and the [tt]hidden[/tt] field's [tt]value[/tt] will be always correct.[/li]
[/ul]
Anyway, my previous JavaScript function can be integrated into your FlagTicked() function, needs only [highlight #ccf]an additional condition to check the [tt]checkbox[/tt]s' [tt]name[/tt]s[/highlight] :
JavaScript: 
[b]function[/b] [COLOR=darkgoldenrod]FlagTicked[/color][teal]([/teal]control[teal])[/teal]
[teal]{[/teal]
  [highlight #cfc][b]var[/b] nr[teal]=[/teal][COLOR=darkgoldenrod]parseInt[/color][teal]([/teal]control[teal].[/teal]name[teal],[/teal][purple]10[/purple][teal])[/teal][/highlight]
  document[teal].[/teal]myForm[teal].[/teal]elements[teal][[/teal][highlight #fcc]nr[teal]+[/teal][green][i]'pdp'[/i][/green][/highlight][teal]].[/teal]checked [teal]=[/teal] [highlight #ccf]control[teal].[/teal]value[teal]==[/teal][green][i]"2"[/i][/green][/highlight][teal];[/teal]
  document[teal].[/teal]myForm[teal].[/teal]elements[teal][[/teal][highlight #fcc]nr[teal]+[/teal][green][i]'redflag'[/i][/green][/highlight][teal]].[/teal]checked [teal]=[/teal] [highlight #ccf]control[teal].[/teal]value[teal]==[/teal][green][i]"1"[/i][/green][/highlight][teal];[/teal]

  [b]var[/b] ticked[teal]=[/teal][purple]0[/purple]
  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]document[teal].[/teal]myForm[teal].[/teal]elements[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal]
    [b]if[/b] [teal]([/teal]document[teal].[/teal]myForm[teal].[/teal]elements[teal][[/teal]i[teal]].[/teal]type[teal]==[/teal][green][i]'checkbox'[/i][/green]
    [teal]&&[/teal] [highlight #ccf]document[teal].[/teal]myForm[teal].[/teal]elements[teal][[/teal]i[teal]].[/teal]name[teal].[/teal][COLOR=darkgoldenrod]match[/color][teal]([/teal][fuchsia]/^\d+redflag$/[/fuchsia][/highlight][teal])[/teal]
    [teal]&&[/teal] document[teal].[/teal]myForm[teal].[/teal]elements[teal][[/teal]i[teal]].[/teal]checked[teal])[/teal]
      ticked[teal]++[/teal]
  document[teal].[/teal]myForm[teal].[/teal]redflagnotify[teal].[/teal]value[teal]=[/teal]ticked[teal]>=[/teal][purple]3[/purple][teal]?[/teal][green][i]'1'[/i][/green][teal]:[/teal][green][i]''[/i][/green]
[teal]}[/teal]
Of course, you will have to change all those FlagTicked[red]1[/red](this) .. FlagTicked[red]10[/red](this) calls in the [tt]onchange[/tt] attributes to FlagTicked(this).


Feherke.
 
Upvote 0 Downvote
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 :)

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?
 
Upvote 0 Downvote
Hi

You got it right.
dkemas said:
What is /^\d+redflag$/, I guess it is like %redflag% in SQL?
Click to expand...
SQL [tt]like[/tt] uses patterns, which are as complex as the old DOS wildcards were. Regular expressions are much more powerful.
[tt]
[red],-------------- anchor to the beginning[/red]
[red]|[/red] [green],------------ a digit character ( [0-9] )[/green]
[red]|[/red] [green]|[/green][blue],----------- previous entity repeated 1 or more times[/blue]
[red]|[/red] [green]|[/green][blue]|[/blue] ,------- literal string
[red]|[/red] [green]|[/green][blue]|[/blue] __|__ [purple],--- anchor to the end[/purple]
[red]|[/red][green]/\[/green][blue]|[/blue]/ \[purple]|[/purple]
[red]^[/red][green]\d[/green][blue]+[/blue]redflag[purple]$[/purple]
[/tt]
( The regular expression which does the same as the %redflag% pattern would be just /redflag/ . )

Feherke.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
699
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
344
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
314
malpa
malpa
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
256
198709km
198709km
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
305
lexer
lexer

Part and Inventory Search

Sponsor

Back
Top