Solved

javascript/jquery block input box

Posted on 2014-02-16
9
236 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
 

Author Comment

by:CoolDev2014
ID: 39866020
I still want the textbox visible no matter what condition.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
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…

867 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now