?
Solved

javascript/jquery block input box

Posted on 2014-02-16
9
Medium Priority
?
267 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 45

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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

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

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 45

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 45

Accepted Solution

by:
Chris Stanyon earned 2000 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
Suggested Courses

862 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