Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Jquery Onclick Function

This is a discussion on Jquery Onclick Function, within the Javascript section. This forum and the thread "Jquery Onclick Function" are both part of the Frameworks category.

 
 Reply to this topicStart new topic
> Jquery Onclick Function, "document.getElementById"
Monie
post Oct 28 2008, 04:47 AM
Post #1


Squeeze Machine
*****

Posts: 733
Joined: 13-February 08
From: Borneo
I have a couple of DIV elements in my form which I wanted to hide and disable all field inside the div by using a Button/Text link.
At the moment, I am using the typical old school way using the document.getElementById method.
CODE
document.getElementById('hideDIV').style.display = 'none';
document.getElementById('textField1').disabled=true;
document.getElementById('textField2').disabled=true;


Can this be done in jQuery?
If it can, I would be grateful if anyone can teach me how biggrin.gif
Cheers...


--------------------
Go to the top of the page
 
+Quote Post
Rakuli
post Oct 28 2008, 04:58 AM
Post #2


Squeeze Machine
Group Icon

Posts: 766
Joined: 13-February 08
From: Catching the squeezed drips downunder.
CODE
$('#hideDIV').click(function(){

$('#hideDIV *').attr('disabled', 'disabled').hide();

});


That should do it -- it takes all child elements of the hideDIV and applies the attribute disbaled to them before hiding them.


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
japh
post Oct 28 2008, 05:21 AM
Post #3


Squeeze Machine
Group Icon

Posts: 510
Joined: 7-October 08
From: Australia
That's assuming you want clicking the div itself to hide it.

Otherwise, you would attach the click event to the text link, for example your havascript might be like this:
CODE
$('#textLink').click(function () {
  $('#hideDIV *').attr('disabled', 'disabled').hide();
});


And your HTML something like this:
CODE
<a id="textLink" href="#">Hide div</a>
<div id="hideDIV">
<input id="textField1" type="text" />
<input id="textField2" type="text" />
</div>


Or something similar. This example leaves the text link visible, which may allow you to modify the script further, so the text link is a toggle to hide/show the hideDIV (I can provide an example of that too if you need it).


--------------------
The more you visit, the more I'll post: http://japheththomson.com/
Go to the top of the page
 
+Quote Post
Monie
post Oct 28 2008, 05:31 AM
Post #4


Squeeze Machine
*****

Posts: 733
Joined: 13-February 08
From: Borneo
That works great Rakuli.
I would be thankful if you could show me that extra example japh.

Before that here is what I have done so far:
CODE
<head>
<script type="text/javascript">
$(document).ready(function(){
     $('#open').click(function(){
         $('#open').hide();
         $('#close').show();
         $('#billing_info').show(); <!-- Will this work if I put: .attr("disabled", false); to make it not disabled again? -->
     });
     $('#close').click(function(){
         $('#close').hide();
         $('#open').show();
         $('#billing_info *').attr('disabled', 'disabled').hide();
     });
});
</script>
</head>

<div id="open">
<h1>Billing Information [+]</h1>
</div>

<div id="close" style="display: none;">
<h1>Billing Information [-]</h1>
</div>

<!-- Hide/Show Div -->
<div id="billing_info" style="display: none;">
<input type="text" id="rf_inv" name="rf_inv" size="30" disabled>
<input type="text" id="rf_inv" name="rf_inv" size="30" disabled>
</div>

But it only works one round, the next time you want to toggle the div, it wont work??

This post has been edited by Monie: Oct 28 2008, 05:35 AM


--------------------
Go to the top of the page
 
+Quote Post
Rakuli
post Oct 28 2008, 05:34 AM
Post #5


Squeeze Machine
Group Icon

Posts: 766
Joined: 13-February 08
From: Catching the squeezed drips downunder.
You need to change

CODE
    $('#open').click(function(){
        $('#open').hide();
        $('#close').show();
        $('#billing_info').show();
    });


To

CODE
    $('#open').click(function(){
        $('#open').hide();
        $('#close').show();
        $('#billing_info *').attr('disabled', '').show();
    });


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
Monie
post Oct 28 2008, 05:43 AM
Post #6


Squeeze Machine
*****

Posts: 733
Joined: 13-February 08
From: Borneo
It just toggling my #open and my #close div.
Nothing happen to my #billing_info??


--------------------
Go to the top of the page
 
+Quote Post
Rakuli
post Oct 28 2008, 06:12 AM
Post #7


Squeeze Machine
Group Icon

Posts: 766
Joined: 13-February 08
From: Catching the squeezed drips downunder.
What's supposed to happen to #billing_info? I thought your intention was to hide/show the children of that element. smile.gif


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
japh
post Oct 28 2008, 06:32 AM
Post #8


Squeeze Machine
Group Icon

Posts: 510
Joined: 7-October 08
From: Australia
Try something like this (your example modified):
CODE
<head>
<script type="text/javascript">
$(document).ready(function(){
    $('#billing_info h1').bind('click', showBI);
});
function showBI() {
    $('#billing_info h1').html('Billing Information [-]');
    $('#billing_info_fields').css('display', '');
    $('#billing_info_fields *').attr('disabled', false);
    $('#billing_info h1').unbind();
    $('#billing_info h1').bind('click', hideBI);
}
function hideBI() {
    $('#billing_info h1').html('Billing Information [+]');
    $('#billing_info_fields').css('display', 'none');
    $('#billing_info_fields *').attr('disabled', true);
    $('#billing_info h1').unbind();
    $('#billing_info h1').bind('click', showBI);
}
</script>
</head>

<div id="billing_info">
    <h1>Billing Information [+]</h1>
    <div id="billing_info_fields" style="display: none;">
        <input type="text" id="rf_inv" name="rf_inv" size="30" disabled>
        <input type="text" id="rf_inv" name="rf_inv" size="30" disabled>
    </div>
</div>


It could possibly be optimised a bit... but it should work for you smile.gif


--------------------
The more you visit, the more I'll post: http://japheththomson.com/
Go to the top of the page
 
+Quote Post
Monie
post Oct 28 2008, 07:42 PM
Post #9


Squeeze Machine
*****

Posts: 733
Joined: 13-February 08
From: Borneo
QUOTE (Rakuli @ Oct 28 2008, 07:12 PM) *
What's supposed to happen to #billing_info? I thought your intention was to hide/show the children of that element. smile.gif


#billing_info should be toggle show/hide when I click the #open and #close div.
#close will disable all text field inside the #billing_info and hide the #billing_info div.
#open will enable all text field inside the #billing_info div and show the #billing_info div.

I tried your code japh but there is nothing happen when I click the <h1>Billing Information [+]</h1>
Maybe some onclick event problem biggrin.gif


--------------------
Go to the top of the page
 
+Quote Post
japh
post Oct 28 2008, 07:55 PM
Post #10


Squeeze Machine
Group Icon

Posts: 510
Joined: 7-October 08
From: Australia
That's odd Monie... I tested in Firefox, IE6 & 7, and Google Chrome... all working for me. Perhaps something else in your code is breaking it?


--------------------
The more you visit, the more I'll post: http://japheththomson.com/
Go to the top of the page
 
+Quote Post
Rakuli
post Oct 28 2008, 07:55 PM
Post #11


Squeeze Machine
Group Icon

Posts: 766
Joined: 13-February 08
From: Catching the squeezed drips downunder.
CODE
$(document).ready(function(){
     $('#open').click(function(){
         $('#open').hide();
         $('#close').show();
         $('#billing_info').show();
         $('#billing_info *').attr('disabled', '').show();
     });
     $('#close').click(function(){
         $('#close').hide();
         $('#open').show();
         $('#billing_info').hide();
         $('#billing_info *').attr('disabled', 'disabled').hide();
     });
});


That should do what you're after.


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
Monie
post Oct 29 2008, 12:08 AM
Post #12


Squeeze Machine
*****

Posts: 733
Joined: 13-February 08
From: Borneo
That works perfectly mate!!!
For my form validation purposes, I would like to add a class name to all the text field when the text field is not disabled!
CODE
$('#open').click(function(){
     $('#open').hide();
     $('#close').show();
     $('#billing_info').show();
     $('#billing_info *').attr('disabled', '').show();
     $('#billing_info *')<!-- Set all field class="mandatory" here but I dont know how?;
  });


EDIT

I found a way...
Just add .addClass("mandatory") to make all fiels have the same class name biggrin.gif
CODE
$('#open').click(function(){
     $('#open').hide();
     $('#close').show();
     $('#billing_info').show();
     $('#billing_info *').attr('disabled', '').addClass("mandatory").show();
});


This post has been edited by Monie: Oct 29 2008, 12:28 AM


--------------------
Go to the top of the page
 
+Quote Post
japh
post Oct 29 2008, 12:20 AM
Post #13


Squeeze Machine
Group Icon

Posts: 510
Joined: 7-October 08
From: Australia
When enabled:
CODE
$('#billing_info *').addClass('mandatory');


When disabled:
CODE
$('#billing_info *').removeClass('mandatory');


The jQuery Docs here should help you too smile.gif


--------------------
The more you visit, the more I'll post: http://japheththomson.com/
Go to the top of the page
 
+Quote Post
Monie
post Oct 29 2008, 12:31 AM
Post #14


Squeeze Machine
*****

Posts: 733
Joined: 13-February 08
From: Borneo
Ooopsss...!! You are fast japh. I was editing my post when you reply to me biggrin.gif
I am going to use the removeClass() as well, thanks.

This post has been edited by Monie: Oct 29 2008, 12:31 AM


--------------------
Go to the top of the page
 
+Quote Post
« Next Oldest · Javascript · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   2 902 210 12th April 2008 - 08:47 AM
Last post by: 902
No New Posts   2 Jason 382 6th May 2008 - 07:33 AM
Last post by: Rakuli
No New Posts   8 unitedcraig 575 9th September 2008 - 10:03 PM
Last post by: Monie
No New Posts   10 MikeHopley 1,273 21st June 2008 - 07:40 PM
Last post by: karinne
No new   19 jackfranklin 609 21st June 2008 - 07:39 PM
Last post by: karinne