call the same jQuery function in multiple buttons

Question

I am not really familiar with jQuery. I have this code that I downloaded to create a fade in/fade out popup form. Here\'s the code:

Answer 1

To use the easier simple ways as following code :

Method 1:

<script>
    $(document).ready(function () {
        $('input:button[name="button1"],[name="button2"]').click(
            function () {
                alert('test')
            });
    });
</script>
<input type="button" id="button1" name="button1" value="Filter" />
<input type="button" id="button2" name="button2" value="Filter" />

Method 2:

<script>
    $(document).ready(function () {
        $('button[id="button1"],[id="button2"]').click(
            function () {
                alert('te2222st')
            });
    });
</script>
<button id="button1" >bbbbb</button>
<button id="button2" >bbbbb</button>

Answer 2

Use different ids for buttons and change your function as below.

$('#button1, #button2, #button3').click(function(e) {
.....

Answer 3

<script type='text/javascript'>
$(document).ready(function() {
$('#button1,#button2,#button3').click(function(e) { 
$('#modal').reveal({ 
animation: 'fade',
animationspeed: 150,
closeonbackgroundclick: true, 
dismissmodalclass: 'close'
});
return false;
});
});
</script>

or else use class as mentioned bt dystroy

Answer 4

IDs should be unique. Try using something like

$('input[type="button"]')

Answer 5

I have solution for this problem

      $(document).ready(function () {
                    $("#btnSubmit,#btnSubmitbuttom").click(function () {
                        var rfp = true;
                        var count = 0;
                        var lbxBD_Role = $("#lbxBD_Role option:selected").val();
                        if (lbxBD_Role == "" || lbxBD_Role == undefined) {
                            $("#lblBD_Role").attr("style", "visibility: visible");
                            $("#lblBD_Role").attr("style", "color: red");
                            $("#lblBD_Role").html('* Required');
                            count++;
                        }
                      });
                   });
            </script>

Answer 6

You can use css class name instead of id to achieve it like below

<script type='text/javascript'>
$(document).ready(function() {
    $('.fade').click(function(e) { 
        $('#modal').reveal({ 
            animation: 'fade',
            animationspeed: 150,
            closeonbackgroundclick: true, 
            dismissmodalclass: 'close'
        });
        return false;
    });
});
</script>

and your html of the buttons

<button class="fade">Button1</button>
<button class="fade">Button2</button>
<button class="fade">Button3</button>