Solved

javascript/jquery block input box

Posted on 2014-02-16
9
238 Views
Last Modified: 2014-03-04
i have asp.net/c# dropdown with like Yes No option. and a textbox called information.

If the dropdown is selected to yes, make the textbox read only = false, other make it true.

how can i do that in javascript or jquery? the current website does not have jquery enabled so please reference to external url jquery.
0
Comment
Question by:CoolDev2014
  • 4
  • 3
  • 2
9 Comments
 
LVL 4

Expert Comment

by:ravikantninave
ID: 39863186
<asp:DropDownList ID="txt_days" CssClass="txt_drpbx" runat="server"  siz="10" onchange="ShowHideTextBox(this);" 

<asp:TextBox ID="txt_todate" runat="server" ReadOnly="true" Visible="false" CssClass="txt_bx"></asp:TextBox> 

Open in new window


function Validate()
{
     var dropdown = document.getElementById('ID of the dropdown');

     if(Condition which you want) 
     {
         document.getElementById('txt_todate').style.visibility= true;
      }
     else
     {
         document.getElementById('txt_todate').style.visibility= false;

     }
} 

Open in new window

0
 
LVL 4

Expert Comment

by:ravikantninave
ID: 39863208
Complete Code:

<script type="text/javascript">
     function ShowHide(){
    var value = document.getElementById('txt_days').value;
    var theControl = document.getElementById("txt_todate");
    
    if(value != 'Yes'){  // only when value is 1 it must show
       theControl.style.display='none';       
     }
    else{
       theControl.style.display='block';
       
    }
   }    
    </script>



<asp:DropDownList ID="txt_days" CssClass="txt_drpbx" runat="server"  siz="10" onchange="ShowHide();" >
    <asp:ListItem>Yes</asp:ListItem>
    <asp:ListItem>No</asp:ListItem>
    </asp:DropDownList>

<asp:TextBox ID="txt_todate" runat="server" ReadOnly="true" CssClass="txt_bx"></asp:TextBox> 

Open in new window

0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39864658
jQuery solution if you want it :

$('#myOption').change(function() {
    readonly = ( $(this).val() == 'Yes' ) ? false : true;
    $('#information').prop('readonly',readonly);
});

Open in new window

0
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 

Author Comment

by:CoolDev2014
ID: 39866020
I still want the textbox visible no matter what condition.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39866049
You obviously haven't tried my solution :) That will leave the textbox visible and just change the readonly attribute, exactly as you requested.
0
 

Author Comment

by:CoolDev2014
ID: 39868992
Chris, yes, i have not tried your solution because I don't use jquery. Or you have to add the link to call jquery in your codes.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39869162
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('#myOption').change(function() {
      readonly = ( $(this).val() == 'Yes' ) ? false : true;
      $('#information').prop('readonly',readonly);
   });
});
</script>

Open in new window

0
 

Author Comment

by:CoolDev2014
ID: 39871725
not working.

You can show me your html code and I use the following asp.net code


  <asp:DropDownList runat="server" Width="372px" ID="ddlAutoPolicyProvider">
                        </asp:DropDownList>

  <asp:TextBox ReadOnly="true"  CssClass="span4" runat="server" ID="otherInsuranceCompany"></asp:TextBox>
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39872915
There is a distinction between ASP and Javascript. ASP is server side code and runs on the server to generate HTML. Javascript is client-side code and runs in the browser to manipulate the HTML - the 2 aren't aware of each other, so javascript can't work on ASP code.

I would need to see the rendered HTML so I can show you the jQuery - you'll need to load up your page in a browser and then view the source, so you can get to the rendered HTML.

In your opening question you said you had a text box called information but the code you jut posted tells a different story!

Have at look at this code and see if you understand it. You should be able to adapt it to your own needs:

//HTML
<select id="myOption">
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>

<input type="text" id="information" />

Open in new window

//Script (to go in the HEAD of your page)
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('#myOption').change(function() {
      readonly = ( $(this).val() == 'Yes' ) ? false : true;
      $('#information').prop('readonly',readonly);
   });
});
</script>

Open in new window

If you still can't get it to work, then post your HTML code for the dropdown and textbox, along with your script and I'll have a look
0

Featured Post

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question