How do I get HTML button value to pass as a parameter to my javascript?

Question

I have multiple buttons corresponding to multiple text areas to clear. I need to send to have a function to handle all of these buttons and handle each seperately

    <html>
    <head>
    <script src="jquery-1.6.js"></script>
    <script type="text/javascript">

        function getUniqueButtonValue(value)
        {
            alert(value);
            $("value").hide();
        }

    </script>
    </head>
    <body>

         <button id=someUinqueId value=something>Clear Selection</button>
    </body>
    </html>

canon · Accepted Answer · 2015-01-12T19:50:10.567

5

Setting aside the fact that you're placing a unique id in the value attribute rather than the id attribute... here's a fiddle.

$(document).ready(function(){
    $("button").click(function(){
        var me = $(this);
        // do whatever with me
        alert(me.val());
        me.hide();
    }); 
});

edited Jan 12 '15 at 19:50

answered Aug 26 '11 at 13:20

canon

40,609
10
73
97

score 3 · Answer 2 · answered Aug 26 '11 at 13:21

There seem to be numerous problems with the code you've posted in your question. Firstly, (unless you're using <!DOCTYPE html> as your doctype) you can't have id values starting with a number.

Secondly, the jQuery (I'm assuming it's jQuery and not some other JS library) in your getUniqueButtonValue function is not going to work, because the selector is going to look for a value element, which is unlikely to exist.

I'm assuming that the value attribute of your button is meant to correspond to the id of another element, which you want to hide when the button is clicked.

As you have what appears to be jQuery code in your example, I will give you a jQuery solution to this, as it's far simpler:

$(document).ready(function() {
    $("button").click(function() {
        alert(this.value);
        $("#" + this.value).hide();
    });
});

Also, you don't close your body tag, but I'm guessing that's just a mistake in copying and pasting the code into the question.

score 2 · Answer 3 · answered Aug 26 '11 at 13:24

2

You can do this:

<button id=123 value=uniqueId545 onclick="javascript:getUniqueButtonValue($(this).val());">Clear Selection</button>

answered Aug 26 '11 at 13:24

MaXo

81
3

score 1 · Answer 4 · answered Aug 26 '11 at 13:15

1

try this

$("#123").click(function(){
    getUniqueButtonValue($(this).val());
});

answered Aug 26 '11 at 13:15

Pratik

30,639
18
84
159

well I need one function to handle all buttons. So if i clear clear on button id=345 it clears its section and not another section handled by button id=567 – stackoverflow Aug 26 '11 at 13:17
Give the buttons a class and use the code in this answer, but with `$(".buttonClass")` – Sam Dutton Aug 26 '11 at 13:22

score 1 · Answer 5 · answered Aug 26 '11 at 13:22

I'm not sure what you are trying to do here. If i guess correctly this is what you want (ids shouldn't begin with a number so I put an 'a' before the 123:

$("#a123").click(function(){
    getUniqueButtonValue($("#a123").getAttribute('value');
}
function getUniqueButtonValue(value)
{
        alert(value);
        $("#"+value).hide();
}

</script>
</head>
<body>

     <button id=123 value=uniqueId545>Clear Selection</button>
</html>

score 1 · Answer 6 · answered Aug 26 '11 at 13:23

You can save yourself a lot of work by trying:

<button class="clearbutton" value="#Foo">Clear Foo</button>
<input type="text" name="foo" id="foo" />

With the following JavaScript:

$('.clearbutton').click(function(e) {
    $($(this).val()).val('');
});

How do I get HTML button value to pass as a parameter to my javascript?

6 Answers6

Linked