CODEWITHSUNDEEP
javascriptjquerycss
TheFallenOne
TheFallenOne

Reputation: 1686

Display inline throwing an error

I have a textbox which is hidden using display = none. I am trying to change it to visible on some condition, however it does not seem to work. I have checked that the control is going to the change event. I have tried various ways to get it to work, the 3 ways that I have tried are within the $('body')

colValue = "<input id ='val' class='value' value ='" + field.Value + "'style = 'display: none'/>";

I have tried these different things to get it to show the control. None of these work.

    $('#val').css("display", "block");
    $('#val').css('display', 'inline');
    $('#val').css({ "display": "inline" });

Am I missing something?

Upvotes: 0

Views: 422

Answers (1)

nbrooks
nbrooks

Reputation: 18233

Edit
So your issue appears to be that the box isn't appearing after a change event. Ensure that your HTML IDs are unique, and that your change handler is getting wired up after the DOM is ready. If those are all true the issue likely exists outside of the code fragment you've shown, since the code you've provided should work. One thing to note is that the change event doesn't get fired until the control being changed loses focus. If it's another textbox, you have to click out of the box before the event gets fired. See the example below (note: I'm using show to update the element's visibility since that's more idiomatic, but it should be functionally equivalent to what you attempted.)

$(function() {
    $('body').on('change', '.condition', function () {    
        $('#val').show();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Text Box 1 <input id ='val' class='value' value='test' style='display: none' type='text'/> <br />
Text Box 2 <input class='condition' type='text'/>

There's no variable named inline in your application. Wrap it in quotes and make it a string. Additionally, you're trying to change the style, so you have to call the appropriate method (See docs for css method):

$("#val").css("display", "inline");

Upvotes: 2

Related Questions