• Registered: 2009-10-06
  • Posts: 78

Topic: disabling and enabling text fields using javascript

Hi all,

A query connecting with java script here.

Firstly here is the code.


   <label for="">Transaction</label>
   <%= select_tag("userform[transaction]",options_for_select([['select','select'],['Withdrawal','Withdrawal'],['Deposit','Deposit'],['Transfer','Transfer']])) %>     
   
   <label for="">Account Heads</label>
  <%= select_tag("userform[head]", "<option>Select</option>"+ options_from_collection_for_select(@account, "id", "name")) %>
   
   <label for="">Category</label>
   <%= select_tag("userform[category]", "<option>Select</option>" + options_from_collection_for_select(@category, "id", "Cname")) %>

   <div id="transfer">
    <label for="">From Accounts</label>
    <%= select_tag("userform[head]", "<option>Select</option>"+     options_from_collection_for_select(@account, "id", "name")) %>
   
    <label for="">To Accounts</label>
    <%= select_tag("userform[head]""<option>Select</option>"+
options_from_collection_for_select(@account, "id","name")) %>
</div>   

Here what I needed is that when 'withdrawal 'and 'deposit' is selected from the drop down transaction the fields 'from accounts' and 'to accounts' should be in hidden style ie (these two fields have to be in hidden style when the page is being loaded) and these two fields have to be displayed only when 'transfer' is being selected and simultaneously the fields 'account heads' and 'category' should be disabled.

Do anyone have any idea how to do this?Thanks in advance.

  • From: Glasgow, Scotland
  • Registered: 2008-08-22
  • Posts: 114

Re: disabling and enabling text fields using javascript

If you wrapped the from/to accounts each in a div with an id of 'from_acc/to_acc' respectively and give the select box an id of 'transaction_type' then in jQuery you would do

jQuery(document).ready(function()   <-- Wait till document is loaded 
{
  jQuery('#transaction_type").change(function()  <-- add an event handler to select input 
  {
    var type = jQuery(this).val();  <--   Store the transaction type in a variable
    jQuery('#from_acc, #to_acc').each(function()  <-- for each matched element do the following (jQuery uses selectors similar to css)
    {
       var jthis = jQuery(this)  <-- Create a jQuery object from the current element and store it
       if(jthis.attr('id') == 'from_acc')   <-- if we are dealing with the from_acc element then...
       {
          type=='Withdrawl' || 'Transfer' ? jthis.show() : jthis.hide();  <-- hide or show it as required
       }
       else
       {
          type=='Deposit' || 'Transfer' ? jthis.show() : jthis.hide();
       }
    });
  });
}

Last edited by happs74 (2010-04-12 08:41:52)

happs74's Website

  • Registered: 2009-10-06
  • Posts: 78

Re: disabling and enabling text fields using javascript

Hi,

                       I am working on the basis of your suggestions over the last few days.I think you have concieved my query in a diffrent manner.when the 'transfer' is being selected from the drop down the fields such as 'from accounts' and 'to accounts' should be displayed and the fields such as 'head' and 'category' should be in hidden form simultaneously.so i have confusion regarding this part of your suggestion because these all items come under the same drop down menu.


{
          type=='Withdrawl' || 'Transfer' ? jthis.show() : jthis.hide();  <-- hide or show it as required
       }
       else
       {
          type=='Deposit' || 'Transfer' ? jthis.show() : jthis.hide();
       }

       I would like to hear your say on this?I am an absolute beginner to jquery so if it is a mistake from my side please forgive me.

                                                                                                                   Thank You.

  • From: Glasgow, Scotland
  • Registered: 2008-08-22
  • Posts: 114

Re: disabling and enabling text fields using javascript

Hi,

Did you change your html to wrap a div round the to and from sections like this

<div id="from_acc">
    <label for="">From Accounts</label>
    <%= select_tag("userform[head]", "<option>Select</option>"+     options_from_collection_for_select(@account, "id", "name")) %>
</div>
<div id="to_acc">   
    <label for="">To Accounts</label>
    <%= select_tag("userform[head]""<option>Select</option>"+
options_from_collection_for_select(@account, "id","name")) %>
</div>

This bit of code will grab each of those divs and switch them on/off as required

jQuery('#from_acc, #to_acc').each(function()  <-- for each matched element do the following (jQuery uses selectors similar to css)
    {
       var jthis = jQuery(this)  <-- Create a jQuery object from the current element and store it
       if(jthis.attr('id') == 'from_acc')
       ........

I might have misunderstood what you meant though. If that is not doing what you want can you explain what should be happening

happs74's Website

  • Registered: 2009-10-06
  • Posts: 78

Re: disabling and enabling text fields using javascript

Hi happs,

Well I have decided to change the entire outlook of what I am intended for  doing.I have changed the way of taking the items from a drop down style to a radio_button manner.The new code is like this.

<div id="trans_type">
<p>
<label for="">Select Type Of Transaction</label>
</p>
Withdrawal
<%= radio_button("userform", "posting", "Withdrawal") %>
Deposit
<%= radio_button("userform", "posting", "Deposit") %>
Transfer
<%= radio_button("userform", "posting", "Transfer") %>
</div>

I changed the drop down  menu,s in a disabled mode as well.so when the page is loaded these four drop down will be in disabled mode.the new code is like this.

<label for="">Account Heads</label>
<%= select_tag("userform[head]","<option>------</option>",:disabled => "true"+options_from_collection_for_select(@account,"name","name")) %>
 
<label for="">Category</label>
<%= select_tag("userform[category]", "<option>------</option>",:disabled => "true" +options_from_collection_for_select(@category,"Cname","Cname")) %>

<div id="from_acc">
<label for="">From Accounts</label>
<%= select_tag("userform[faccounts]","<option>Select</option>",:disabled => "true"+options_from_collection_for_select(@account,"name","name"))  %>

<label for="">To Accounts</label>
<%= select_tag("userform[toaccounts]",
"<option>Select</option>",:disabled => "true"+ options_from_collection_for_select(@account,"name","name")) %>
</div> 

If you connect this with earlier code you can understand.
so what  my new way is that the drop down menus will be
enabled according to the selection of these radio_buttons.for eg:if
transfer is selected the fields such as 'faccounts' and 'toaccounts' will be enabled and all other menus will be in disabled mode.(well,i have a doubt that for these purpose radio_button will do the job or we want to use radio_button_tag?).I like to do this
with on-click event of javascript.

Any suggestions on this basis are welcome .


                                                                                         thank you