jQuery for displaying a textbox

Question

I'm trying to change the style of a textbox which has the attribute display:none;

I have another textbox and when I click inside the textbox, I should have the other one's css to be changed to display:inline-block!important;

<input type="text" id="linkField" class="form-control " placeholder="Enter the link to track">
<input type="text" id="emailField" class="form-control " placeholder="Enter the Email" style="display:none!important">
<input type="button" class="btn-success btn lightGreen" value="SHORTEN & TRACK">

I tried something like this but it is not working:

$(document).ready(function() {
    $('#linkField').click(function() {
        $("#emailField").css({"display": "inline-block!important"});
    }); 
});

Can anyone help me? Please let me know if you need additional details.

score 3 · Accepted Answer · answered Feb 04 '14 at 16:02

3

You can use .show() instead of fiddling with inline css

$(document).ready(function() {
    $('#linkField').click(function() {
        $("#emailField").show();
    }); 
});

DEMO

answered Feb 04 '14 at 16:02

Anton

32,245
5
44
54

score 1 · Answer 2 · answered Feb 04 '14 at 16:07

1

Demo : http://jsfiddle.net/awladnas/a6NJk/614/

You were really close to your solution. Try like this:

$(document).ready(function() {
    $('#linkField').click(function() {

        $("#emailField").css('display','block');
    }); 
});

answered Feb 04 '14 at 16:07

Awlad Liton

9,366
2
27
53

score 1 · Answer 3 · edited May 23 '17 at 12:21

1

You can use the code below to set the display attribute:

$("#emailField").css("cssText", "display: inline-block !important");

I found this in the following post: How to apply !important using .css()?

edited May 23 '17 at 12:21

Community

1
1

answered Feb 04 '14 at 16:10

malkassem

1,937
1
20
39

jQuery for displaying a textbox

3 Answers3