Solved

javascript/jquery block input box

Posted on 2014-02-16
9
239 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

856 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