How can I prevent a user from unchecking a box. [Archive]

Click to See Complete Forum and Search --> : How can I prevent a user from unchecking a box.

d.brandusa

09-10-2004, 12:04 AM

How can I prevent a user from unchecking this box, this is required on the quote.

How can I show it checked like a normal form but disable it from being unchecked?

<input type="checkbox" name="General_Liability" value="Yes" tabindex="37" checked>

pinkpanter

09-10-2004, 12:38 AM

Helo!

<input type="checkbox" name="General_Liability" value="Yes" tabindex="37" checked disabled>

If you want to make it disabled on some event is another story - then you have to write javaScript function... :)

javaNoobie

09-10-2004, 01:05 AM

however if you disable the checkbox, when the form is submitted the checkbox value will not be included. hence you might want to use the onclick event to re-check the checkbox upon uncheck.
<input type="checkbox" name="General_Liability" value="Yes" tabindex="37" checked onclick="this.checked=true;">

d.brandusa

09-10-2004, 01:41 AM

Thanks so much that worked, I have another weird question, its kinda related to the checkbox.

I have:

<input type="checkbox" name="Property_Damage" value="Yes" tabindex="39">

Is there a way, if they click this, to add 3 more form field that they have to fill out. This form is for an insurance quote form, if they select this, they HAVE to include further info, is this possible.

Say these are my three additional form fields, is this possible?

<input name="Coverage" size="10">
<input name="Value" size="10">
<input name="Effective_Date" size="10">

javaNoobie

09-10-2004, 01:47 AM

put those 3 additional input fields in a <div>. onload hide those fields. when checkbox is checked, show the additional fields. if not checked, hide the fields.

d.brandusa

09-10-2004, 01:49 AM

And this this the only way? I can't do javascript much, can you write me a simple example, thanx SO MUCH regardless, you've been a great help!

javaNoobie

09-10-2004, 01:55 AM

<html>
<head>
<title>Example</title>
<style type="text/css">
.inv{display:none;}
</style>
<script type="text/javascript">
window.onload = function(){document.getElementById('divHide').className = 'inv';}
</script>
</head>
<body>
<form>
<input type="checkbox" name="Property_Damage" value="Yes" tabindex="39" onclick="document.getElementById('divHide').className = (this.checked)?'':'inv'">
<div id="divHide">
<input name="Coverage" size="10">
<input name="Value" size="10">
<input name="Effective_Date" size="10">
</div>
</form>
</body>
</html>

d.brandusa

09-10-2004, 01:59 AM

Now my last question, I promise, say I have:

<select name="Number_Of_Carts" tabindex="16">
<option selected></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>

How would I do the same, for example, if they click on one, how does those three appear, BUT, say they click on 2, can 2 sets of the same thing appear. Of course they each have to have a different name, but here is what I mean:

<div id="divHide1">
<input name="Coverage1" size="10">
<input name="Value1" size="10">
<input name="Effective_Date1" size="10">
</div>
<div id="divHide2">
<input name="Coverage2" size="10">
<input name="Value2" size="10">
<input name="Effective_Date2" size="10">
</div>
<div id="divHide3">
<input name="Coverage3" size="10">
<input name="Value3" size="10">
<input name="Effective_Date3" size="10">
</div>

How would it work if they click on one, only display one set, if they click on 2, then display 2 sets, 3 and so on? Is this possible with the div?

javaNoobie

09-10-2004, 02:17 AM

assuming u have <div> from 1 to 9..

<script type="text/javascript">
var prevId = 0;

window.onload = function(){
for(var i=0; i<document.forms[0].elements['Number_Of_Carts'].length; i++){
document.getElementById('divHide' + (i+1)).className = 'inv';
}
}

function showHideDiv(ID){
if(prevId == 0) prevId = ID;

document.getElementById('divHide' + prevId).className = 'inv';

if(ID != 0){
document.getElementById('divHide' + ID).className = '';
}
prevId = ID;
}
</script>
your select tag should contain: <select name="Number_Of_Carts" tabindex="16" onchange="showHideDiv(this.value);">

d.brandusa

09-10-2004, 02:20 AM

I can't seem to get the select button to work, what is wrong with my code, it must be something I'm overlooking. I've attached the .txt file. I did an example field called "File". But it won't hide it.
If you write click and save the .txt you can see I have .php code inside as well, maybe something is blocking it.

javaNoobie

09-10-2004, 02:42 AM

looks like you hav to find the <tr> element that is containing the objects you wish to hide/show. in this case i tried naming the <tr> which contains your to the id 'divHide'. It works..
<tr id="divHide">
<td width="200" height="25"><font size="2">File:</font></td>
<td width="402" height="25"><input type="File" name="File" size="30" style="color: #5E5E5E; font-family: Arial; font-size: 10pt; border: 1px solid #808080; padding: 0; background-color: #FFFFFF" tabindex="3"></td>
</tr>

d.brandusa

09-10-2004, 02:44 AM

i'm lost, could you post that code where I am trying to hide the file, or can you save the .txt file and edit it and reupload it?

javaNoobie

09-10-2004, 02:51 AM

the row is located at line 535. delete the div and name the row to "divHide"

d.brandusa

09-10-2004, 02:59 AM

Like this, but it doesn't work for me, it only pushes down one small cell, it doesn't hide anything:

<tr id="divHide">

Do I end it like this?

</tr>
</div>

javaNoobie

09-10-2004, 03:02 AM

remove the </div> too. See attached

d.brandusa

09-10-2004, 03:13 AM

Okay, here is my final form fields I need displayed, i still can't get it to work:



<tr id="divHide">
<td width="200" height="15"></td>
<td width="402" height="15"></td>
</tr>
<tr>
<td width="200" height="25>Image(s):</td>
<td width="402" height="25"><input id="FileToUpload" name="superdat1" type="file" size="30"></td>
</tr>
<td width="200" height="15"></td>
<td width="402" height="15"></td>
</tr>
<tr>
<td width="200" height="25"></td>
<td width="402" height="25"><input id="FileToUpload" name="superdat2" type="file" size="30"></td>
</tr>
<tr>
<td width="200" height="15"></td>
<td width="402" height="15"></td>
</tr>
<tr>
<td width="200" height="25"></td>
<td width="402" height="25"><input id="FileToUpload" name="superdat3" type="file" size="30"></td>
</tr>



All that hides is the first <td width="200" height="15"></td>, how I can tell it to hide all the code above till clicked?

javaNoobie

09-10-2004, 03:36 AM

put all of them inside a table and hide the table. Look at line 532 of attached