Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

javascript/jquery block input box

Posted on 2014-02-16
9
Medium Priority
?
260 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 44

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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

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

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 44

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 44

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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

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…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…

618 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