Issue with CSS implemented using jquery

Question

I have create a jquery to convert title attribute of input to span with class "field_title". when I click on input though span class hide but input field remains disabled. Issue is I can't enable the input field.

<div class="field">
  <input type="text" name="email" class="w_def_text" title="Email*" />
  <img class="error" width="27" height="27" src="images/error.jpg" alt="Error"> 
</div>

<script>
function init_fields() {    
    $('.w_def_text').each(function() {
        var text = $(this).attr('title');
        var html = '<span class="field_title">' + text + '</span>';
        $(this).parent().append(html);

        if($(this).val() == '') {
            $(this).hide();
            $(this).next().show();
        }
        else {
            $(this).css({'display' : 'block'});
            $(this).next().hide();
        }
    });

    $('.w_def_text').live('blur', function() {
        if($(this).val() == '') {
            $(this).hide();
            $(this).next().show();
        }
    });

    $('.w_def_text ~ span').live('click', function() {
        $(this).hide();
        $(this).prev().css({'display' : 'block'}).focus();
    });
}
</script>

I'm not sure what exactly the issue is, but I think it might be solved to an extent by using label tags instead of spans for the title. More semantic as well, makes sense without a style. Also have the added benefit of setting focus on the associated input field when clicked. — name
– name, Commented Oct 27, 2011 at 18:54
Too difficult to decipher what you are wanting. Can you give us more to work with or use this fiddle (jsfiddle.net/VwPM2) to help us a bit more. — swatkins
– swatkins, Commented Oct 27, 2011 at 19:02
@ swatkins : Exactly when I click on Email* that is span I want input field here... — Rahul Singh
– Rahul Singh, Commented Oct 27, 2011 at 19:10

freakish · Accepted Answer · 2011-10-27 20:49:02Z

1

$('.w_def_text ~ span').live('click', function() {
    $(this).hide();
    $(this).prev().prev().css({
        'display': 'block'
    }).focus();
});

You need .prev().prev() because that's the input. And in second function

$('.w_def_text').live('blur', function() {
    if($(this).val() == '') {
        $(this).hide();
        $(this).next().next().show();
    }
});

you need .next().next() or something like that depending on what you want. You should understand what is wrong now. :)

edited Oct 27, 2011 at 20:49

answered Oct 27, 2011 at 20:41

freakish

57k12 gold badges141 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rahul Singh Over a year ago

I want bit modification. on blur if input is empty than class="error" should be visible. otherwise on load it should be hidden.

Rahul Singh Over a year ago

I did it. Thanks mate. I can't make your reputation +100 otherwise I did it for sure.... :)

freakish Over a year ago

No problem. By the way: have you considered using placeholder attribute in input? Note that this is HTML5.

Duncan Smart · Accepted Answer · 2011-10-27 20:57:30Z

1

I think instead of:

$(this).parent().append(html);

you want to do:

$(this).after(html);

And perhaps be more explicit, instead of just .next().show() - specify the sibling class you want to target:

$(this).next('.error').show()
...
$(this).next('.error').hide()

edited Oct 27, 2011 at 20:57

answered Oct 27, 2011 at 20:34

Duncan Smart

32.3k11 gold badges71 silver badges74 bronze badges

2 Comments

Rahul Singh Over a year ago

Great I got result wat I want but still on blur my error class is not shown if field is null.

Duncan Smart Over a year ago

It's quite difficult to understand the requirement, but perhaps using $(this).next('.error').show() and $(this).next('.error').hide() will get the result you want?

Collectives™ on Stack Overflow

Issue with CSS implemented using jquery

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related