JavaScript click function null value in text box

Question

I need to null the value in text box on click, currently I have written a code as such:

<div class="keyword_non">
                    <h1>Keywords : <a class="someClass question_off" title="Keywords "></a></h1>
                    <h2><input type="text" name="kw1" value="one" /></h2>
                    <h2><input type="text" name="kw2" value="two" /></h2>
                    <h2><input type="text" name="kw3" value="three" /></h2>
                    <h2><input type="text" name="kw4" value="four" /></h2>
                      
                </div>
<script type="text/javascript" src="/functions/javascript/custom/non_profit_edit.js"></script>
<script type="text/javascript" src="/functions/javascript/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/functions/javascript/custom/jquery-ui-1.8.7.custom.min.js"></script>

Inside non_profit_edit.js i have written as such

$(document).ready(function(){
                           
        $(".kw1").click(function() { 
        $(".kw1").val(" ");          
        });
        
        $(".kw2").click(function() { 
        $(".kw2").val(" ");          
        });
        
        $(".kw3").click(function() { 
        $(".kw3").val(" ");          
        });
        
        $(".kw4").click(function() { 
        $(".kw4").val(" ");          
        });
        
});

But write now its not working properly. Is this any browser issues or error in code?

James L. · Accepted Answer · 2012-04-12 05:27:01Z

1

In the selector the '.' indicates a class. For names use

$('[name="kw1"]'). //

answered Apr 12, 2012 at 5:27

James L.

4,0871 gold badge17 silver badges15 bronze badges

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

Comments

kmiyashiro · Accepted Answer · 2012-04-12 06:12:53Z

1

Error in code.

Your selector ".kw1" selects an element with kw1 as the class attribute. None of your inputs have a class, they just have names. Add classes to them or replace the selector in your jQuery to this format: $('[name="kw1"]')

You can also simplify your function by doing this:

$('.keyword_non')
    .on('click', 'input[type="text"]', function(e) {
        this.value = ''; // input that was clicked on
    }

edited Apr 12, 2012 at 6:12

answered Apr 12, 2012 at 5:26

kmiyashiro

2,25914 silver badges15 bronze badges

3 Comments

RobG Over a year ago

$(e.target).val(''); is convoluted and will fail in a good number of browsers. Just use this.value = '';. Or if you really must use jQuery, then $(this).val('');, but it seems like using a sledgehammer to crack a nut.

kmiyashiro Over a year ago

Edited. Not sure which browsers that would fail in though.

RobG Over a year ago

It will fail in any browser that doesn't support event.target (such as IE 8 and lower and those using the same event model).

Hkachhia · Accepted Answer · 2012-04-12 05:28:04Z

0

This is a syntax error in your code.you does not use dot(.) in click function.Dot(.) will use for class. when kw1 is name in your input

answered Apr 12, 2012 at 5:28

Hkachhia

4,5458 gold badges44 silver badges79 bronze badges

Collectives™ on Stack Overflow

JavaScript click function null value in text box

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related