Loop repeat jquery

Question

Guys, I’m having a problem and I still can’t find a solution, I’m still new to jquery, I’d like a little help, please. In the code below I have a procedure to call a dialog, which will be loaded with a table filled with php. This table has an input text field for search and all the lines have a checkbox, for when selected and the button pressed, the name is sent to the previous page. Everything is working perfectly, but I have to repeat the code 3 times, if you want to use in 3 different fields. I wonder how I can pass the id of the clicked button and from it do an if and execute the procedure. It should be something simple, but I haven’t yet. Thank you

                <script>
            $(document).ready(function(){   
                $("#buttonP1").click(function() {getValueUsingClass1();});
                $("#buttonP2").click(function() {getValueUsingClass2();});
                $("#buttonP3").click(function() {getValueUsingClass3();});
                function getValueUsingClass1(){
                /* declare an checkbox array */
                var chkArray = [];
                /* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
                $(".chk:checked").each(function() {
                    chkArray.push($(this).val());
                });
                var teste = $(this).id;
                alert(teste);
                /* we join the array separated by the comma */
                var selected;
                selected = chkArray.join('') + "";

                /* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
                if(selected.length > 1){
                    if(chkArray.length > 1){
                    alert("Selecione um campo");
                    $('input[id=TP_ACO_P]').val("");
                    }else{  
                    $('input[id=TP_ACO_P]').val(selected);}
                }else{
                    alert("Nenhuma dado selecionado");  
                }
                $('input[id=buscar]').val("");
            }
                function getValueUsingClass2(){
                /* declare an checkbox array */
                var chkArray = [];

                /* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
                $(".chk:checked").each(function() {
                    chkArray.push($(this).val());
                });

                /* we join the array separated by the comma */
                var selected;
                selected = chkArray.join('') + "";

                /* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
                if(selected.length > 1){
                    if(chkArray.length > 1){
                    alert("Selecione um campo");
                    $('input[id=ACAB_P]').val("");
                    }else{  
                    $('input[id=ACAB_P]').val(selected);}
                }else{
                    alert("Nenhuma dado selecionado");  
                }
            }
                function getValueUsingClass3(){
                /* declare an checkbox array */
                var chkArray = [];

                /* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
                $(".chk:checked").each(function() {
                    chkArray.push($(this).val());
                });

                /* we join the array separated by the comma */
                var selected;
                selected = chkArray.join('') + "";

                /* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
                if(selected.length > 1){
                    if(chkArray.length > 1){
                    alert("Selecione um campo");
                    $('input[id=TT_P]').val("");
                    }else{  
                    $('input[id=TT_P]').val(selected);}
                }else{
                    alert("Nenhuma dado selecionado");  
                }
                $('input[id=buscar]').val("");
            }
            $(function() {
                $( "#dialogP1" ).dialog({
                resizable: false,
                  height:400,
                  width:500,
                  modal: true,
                  autoOpen: false,
                  open: function(event, ui) {  
                    $('.ui-dialog-titlebar').display("none");  

                }

                });
                $( "#openerP1" ).click(function() {
                $('input:checkbox').attr('checked',false);
                  $( "#dialogP1" ).dialog( "open" );

                });
                $( "#buttonP1" ).click(function() {
                  $( "#dialogP1" ).dialog( "close" );
                });
              });
            $(function(){$("#dialogP1").dialog().parents(".ui-dialog").find(".ui-dialog-titlebar").remove();});

            $(function() {
                $( "#dialogP2" ).dialog({
                resizable: false,
                  height:400,
                  width:500,
                  modal: true,
                  autoOpen: false,
                  open: function(event, ui) {  
                    $('.ui-dialog-titlebar').display("none");  

                }
                });

                $( "#openerP2" ).click(function() {
                $('input:checkbox').attr('checked',false);
                  $( "#dialogP2" ).dialog( "open" );
                });
                $( "#buttonP2" ).click(function() {
                  $( "#dialogP2" ).dialog( "close" );
                });
              });
            $(function(){$("#dialogP2").dialog().parents(".ui-dialog").find(".ui-dialog-titlebar").remove();});

            $(function() {
                $( "#dialogP3" ).dialog({
                resizable: false,
                  height:400,
                  width:500,
                  modal: true,
                  autoOpen: false,
                  open: function(event, ui) {  
                    $('.ui-dialog-titlebar').display("none");  

                }
                });

                $( "#openerP3" ).click(function() {
                $('input:checkbox').attr('checked',false);
                  $( "#dialogP3" ).dialog( "open" );
                });
                $( "#buttonP3" ).click(function() {
                  $( "#dialogP3" ).dialog( "close" );
                });
              });
            $(function(){$("#dialogP3").dialog().parents(".ui-dialog").find(".ui-dialog-titlebar").remove();});
            });
            </script>

Answer 1

Have you ever tested the jQuery selector by class? You can define specific names of the classes you want to have the functions attached and use them as selector, see:

<script>
$(document).ready(function () {
    $("#buttonP1").click(function () { getValueUsingClass("TP_ACO_P"); });
    $("#buttonP2").click(function () { getValueUsingClass("ACAB_P"); });
    $("#buttonP3").click(function () { getValueUsingClass("TT_P"); });

    function getValueUsingClass(id) {
        /* declare an checkbox array */
        var chkArray = [];
        /* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
        $(".chk:checked").each(function () {
            chkArray.push($(this).val());
        });
        var teste = $(this).id;
        alert(teste);
        /* we join the array separated by the comma */
        var selected;
        selected = chkArray.join('') + "";

        /* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
        if (selected.length > 1) {
            if (chkArray.length > 1) {
                alert("Selecione um campo");
                $('input[id=' + id + ']').val("");
            } else {
                $('input[id=' + id + ']').val(selected);
            }
        } else {
            alert("Nenhuma dado selecionado");
        }
        $('input[id=buscar]').val("");
    }

    $(function () {
        $(".dialog").dialog({
            resizable: false,
            height: 400,
            width: 500,
            modal: true,
            autoOpen: false,
            open: function (event, ui) {
                $('.ui-dialog-titlebar').display("none");

            }
        });
        $(".opener").click(function () {
            $('input:checkbox').attr('checked', false);
            $(".dialog").dialog("open");

        });
        $(".button").click(function () {
            $(".dialog").dialog("close");
        });
    });
});
</script>

Maybe this isn’t the answer, but it can lead you to her.

Answer 2

I wonder how I can pass the id of the button clicked and from it make an if and execute the procedure.

Use a class on your buttons. Example: class buttons. You will only need to call him once and will pass his id to the function (a function only).

<script>
$(document).ready(function(){   
    $(".botao").click(function() {
        getValueUsingClass($(this).attr("id"));
    });

    function getValueUsingClass(idBotao){
        var chkArray = [];

        $(".chk:checked").each(function() {
            chkArray.push($(this).val());
        });                 

        alert(idBotao);

        var selected;
        selected = chkArray.join('') + "";

        if(selected.length > 1){
            if(chkArray.length > 1){
            alert("Selecione um campo");
            $('input[id=TP_ACO_P]').val("");
            }else{  
            $('input[id=TP_ACO_P]').val(selected);}
        }else{
            alert("Nenhuma dado selecionado");  
        }
        $('input[id=buscar]').val("");
    }

    $(function() {
        $( "#dialogP1" ).dialog({
            resizable: false,
            height:400,
            width:500,
            modal: true,
            autoOpen: false,
            open: function(event, ui) {  
                $('.ui-dialog-titlebar').display("none"); 
            }
        });

        $( "#openerP1" ).click(function() {
            $('input:checkbox').attr('checked',false);
            $( "#dialogP1" ).dialog( "open" );
        });

        $( "#buttonP1" ).click(function() {
            $( "#dialogP1" ).dialog( "close" );
        });
    });

    $(function(){
        $("#dialogP1").dialog().parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
    });

    $(function() {
        $( "#dialogP2" ).dialog({
            resizable: false,
            height:400,
            width:500,
            modal: true,
            autoOpen: false,
            open: function(event, ui) {  
                $('.ui-dialog-titlebar').display("none"); 
            }
        });

        $( "#openerP2" ).click(function() {
        $('input:checkbox').attr('checked',false);
            $( "#dialogP2" ).dialog( "open" );
        });
        $( "#buttonP2" ).click(function() {
            $( "#dialogP2" ).dialog( "close" );
        });
    });

    $(function(){
        $("#dialogP2").dialog().parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
    });

    $(function() {
        $( "#dialogP3" ).dialog({
            resizable: false,
            height:400,
            width:500,
            modal: true,
            autoOpen: false,
            open: function(event, ui) {  
                $('.ui-dialog-titlebar').display("none"); 
            }
        });

        $( "#openerP3" ).click(function() {
            $('input:checkbox').attr('checked',false);
            $( "#dialogP3" ).dialog( "open" );
        });

        $( "#buttonP3" ).click(function() {
            $( "#dialogP3" ).dialog( "close" );
        });
    });

    $(function(){
        $("#dialogP3").dialog().parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
    });
});
</script>