Jump to content


Photo

Problem disabling a button


  • Please log in to reply
11 replies to this topic

#1 coldkill

coldkill
  • Members
  • PipPipPip
  • Advanced Member
  • 159 posts
  • LocationUnited Kingdom

Posted 12 June 2006 - 10:10 PM

On my new site i've added a Terms of Service agreement. I've got a checkbox below it which i want people to check if they agree to the TOS. If it is checked then the button should activate and be clickable but if it isn't it should be disabled. Only problem is when the checkbox is ticked the button doesn't activate and stays disabled.

Any ideas?

Heres the JS.
<script language="javascript" type="text/javascript">
                    function validate()
                    {
                        if( document.sign_up.tos.checked=="true" )
                        {
                            document.sign_up.signed.disabled="false"
                        }
                        else
                        {
                            document.sign_up.signed.disabled="true"
                        }
                    }
                    
                    setInterval( "validate()", 100 )
                </script>

Thanks,
Cold


You can learn alot from reading the manual

#2 azuka

azuka
  • Members
  • PipPipPip
  • Advanced Member
  • 55 posts
  • LocationNigeria

Posted 13 June 2006 - 08:35 AM

You could use

if( document.sign_up.tos.checked== true ) instead of if( document.sign_up.tos.checked=="true" )

Then, why's there a need to use setInterval?

we know tos is a checkbox

I'd suggest you don't use the name 'submit' for a button because submit() is a method of forms.

let's suppose our submit button is called x_submit

you could simply modify the html code for your checkbox to

<input type="submit" onclick="if (this.checked == true) this.form.x_submit.disabled = false; else  this.form.x_submit.disabled = true;" value="Submit" />

Given enough eyeballs all bugs are shallow. My Website

#3 coldkill

coldkill
  • Members
  • PipPipPip
  • Advanced Member
  • 159 posts
  • LocationUnited Kingdom

Posted 13 June 2006 - 10:17 AM

the setInterval is so it automatically changes the button instead of on a click. But i'l try changing the button name.


You can learn alot from reading the manual

#4 coldkill

coldkill
  • Members
  • PipPipPip
  • Advanced Member
  • 159 posts
  • LocationUnited Kingdom

Posted 13 June 2006 - 10:27 AM

It didn't work. Although i updated the JS code because i looked at it and it was actually saying "When the checkbox IS ticked disabled the button else disable the button" ¬¬.


You can learn alot from reading the manual

#5 kharbat

kharbat
  • Members
  • PipPip
  • Member
  • 28 posts

Posted 13 June 2006 - 10:39 AM

try this clue

<script language="javascript">
    function Activate()
        {
            check_box = document.getElementById('checkbox');
            button = document.getElementById('Submit'); 
             
            if ( check_box.value == '0' )
                {
                    check_box.value='1';
                    button.disabled = false;
                }
                    


        }

</script>
<form id="form1" name="form1" method="post" action="">
  <label> 
  <input type="checkbox" name="checkbox" id="checkbox" value="0" onClick="Activate()"/>
  <br />
  <input type="submit" name="Submit" id='Submit' value="Submit" disabled />
  </label>
</form>


#6 kharbat

kharbat
  • Members
  • PipPip
  • Member
  • 28 posts

Posted 13 June 2006 - 11:53 AM

i think this is exactly what you were asking for


<script language="javascript">
    function Activate()
        {
            check_box = document.getElementById('checkbox');
            button = document.getElementById('Submit'); 
             
            if ( check_box.checked == true )
                {
                    button.disabled = false;
                }
            else
                button.disabled = true;
        }

</script>


<form id="form1" name="form1" method="post" action="">
  <label> 
  <input type="checkbox" name="checkbox" id="checkbox" value="0" onClick="Activate()"/>
  <br />
  <input type="submit" name="Submit" id='Submit' value="Submit" disabled />
  </label>
</form>


try it and tell me what happens

#7 coldkill

coldkill
  • Members
  • PipPipPip
  • Advanced Member
  • 159 posts
  • LocationUnited Kingdom

Posted 13 June 2006 - 01:17 PM

Nope didn't work.

Just fyi. xHTML doesn't use capitals for onClick etc it's just onclick.


You can learn alot from reading the manual

#8 kharbat

kharbat
  • Members
  • PipPip
  • Member
  • 28 posts

Posted 13 June 2006 - 01:40 PM

my last post, is tested on IE and FireFox..

i understood that you have a checkbox and a disabled button..
when the checkbox is checked the button becomes enabled.

when the checkbox is not checked the button becomes disabled..

in case i am describing your problem correctly.. the code above does this operation..

#9 azuka

azuka
  • Members
  • PipPipPip
  • Advanced Member
  • 55 posts
  • LocationNigeria

Posted 13 June 2006 - 04:34 PM

[!--quoteo(post=383191:date=Jun 13 2006, 06:27 AM:name=coldkill)--][div class=\'quotetop\']QUOTE(coldkill @ Jun 13 2006, 06:27 AM) View Post[/div][div class=\'quotemain\'][!--quotec--] It didn't work. Although i updated the JS code because i looked at it and it was actually saying "When the checkbox IS ticked disabled the button else disable the button" ¬¬. [/quote]

I'm assuming your form code looks something like

<form name="sign_up" id="sign_up" action="#####" method="post">
<!-- Other content goes here -->
<input type="checkbox" name="tos" id="tos" onclick="validate_tos(this)" />
<input type="submit" name="x_submit" value="x_submit" disabled="disabled" />
</form>

Add this function to your script in your head tag
function validate_tos(theCheckBox){
    if (theCheckBox.checked == true) theCheckBox.form.x_submit.disabled = false;
    else theCheckBox.form.x_submit.disabled = true;
}

I tried it myself.

Given enough eyeballs all bugs are shallow. My Website

#10 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 13 June 2006 - 05:25 PM

This should be just one line of JS, and always use document.getElementById() when you accessing objects in JS.
<input type="checkbox" id="tos" name="tos" onclick="document.getElementById('signed').disabled = this.checked;" /><br />
<input type="submit" id="signed" name="signed" value="submit" />

NoGray.com


#11 Guest_Russel_*

Guest_Russel_*
  • Guests

Posted 02 July 2006 - 06:35 PM

I have the code you provided and it works perfectly in my php file except for one small thing.

i have a form that autogenerates rows as needed based on the query results.  So, if i have 3 records that pull, my table creates three rows and puts the data in it.  i added your code and now at the end of each row is a check box and a "submit" button.

the problem is when i select the checkbox for the 1st row, the cancel button becomes activated.  if i select the checkbox for the 2nd or 3rd row, the submit button does NOT become activated.

Any ideas?

#12 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 03 July 2006 - 05:12 PM

If you have more than one button, you gotta make sure they all have unique ids (like signed_1, signed_2, signed_3)

You can set a counter to assign the different ids for each button. But this is a guess since I don't have your HTML output.

If you can post the output for three rows, I can pin point the issue.


NoGray.com





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users