Disable one button at a time jquery

Navigation
0

Gentlemen, I have a question in this part of my code:

I need to send a request and then disable the submit button. The Jquery code that does this is already working, but when I use it a second time, even changing the ID, it disables all the buttons on the page.

Does anyone have a clue what to do? 

     <div class="col-md-6">
                                <ul class="list-group">
                    <li class="list-group-item list-group-item-success">
                        <span class="badge"><b>Qua, 09 de Dez de 2015 02H:51M</b></span>
                        Última atualização de <b>Locais</b>
                    </li>

                    <form action="http://localhost/W-OS-PRO/index.php/local/atualizar">

                        <input type="submit" id="local" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
                        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scripttype="text/javascript">
                            $(window).on('beforeunload', function () {
                                $("input[id=local]").prop("disabled", "disabled");
                            });
                        </script>
                    </form>     

                    <div></form>
                        <li class="list-group-item list-group-item-success" align="right">
                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
                    </li>


                </ul>
                        </div>

        <div class="col-md-6">
                                <ul class="list-group">
                    <li class="list-group-item list-group-item-success">
                        <span class="badge"><b>Qua, 09 de Dez de 2015 02H:52M</b></span>
                        Última atualização de <b>Itens</b>
                    </li>

                    <form action="http://localhost/W-OS-PRO/index.php/item/atualizar">

                        <input type="submit" id="itens" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
                        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scripttype="text/javascript">
                            $(window).on('beforeunload', function () {
                                $("input[id=itens]").prop("disabled", "disabled");
                            });
                        </script>
                    </form>     

                    <div></form>
                        <li class="list-group-item list-group-item-success" align="right">
                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
                    </li>


                </ul>
                        </div>

        <div class="col-md-6">
                        <ul class="list-group">
                <li class="list-group-item list-group-item-success">
                    <span class="badge"><b>Qua, 09 de Dez de 2015 02H:44M</b></span>
                    Última atualização de <b>Agentes</b>
                </li>

                <form action="http://localhost/W-OS-PRO/index.php/agente/atualizar">

                    <input type="submit" id="agentes" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
                    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scripttype="text/javascript">
                            $(window).on('beforeunload', function () {
                                $("input[id=agentes]").prop("disabled", "disabled");
                            });
                    </script>
                </form>     

                <div></form>
                    <li class="list-group-item list-group-item-success" align="right">
                        <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
                </li>


            </ul>
                </div>
    
asked by anonymous 09.12.2015 / 18:04

1 answer

0

I would recommend you do as follows:

HTML: 

 <form action="http://localhost/W-OS-PRO/index.php/local/atualizar" class="form" data-id="1">
    <input type="submit" id="local_1" class="btn btn-success btn-sm btn-block"    value="Atualizar base de dados" />
    </form>

<form action="http://localhost/W-OS-PRO/index.php/local/atualizar" class="form" data-id="2">
    <input type="submit" id="local_2" class="btn btn-success btn-sm btn-block"    value="Atualizar base de dados" />
    </form> 

<form action="http://localhost/W-OS-PRO/index.php/local/atualizar" class="form" data-id="3">
    <input type="submit" id="local_3" class="btn btn-success btn-sm btn-block"    value="Atualizar base de dados" />
    </form>

jQuery: 

$('.form').submit(function(){
   var id = $(this).data('id');
   $('#local_'+id).attr('desabled','desabled');
   return false;
});

Note that I just added class="form" data-id="1" to the form and separated the javascript from the HTML, so you would not need to keep repeating javascript in the middle of HTML 

$(window).on('beforeunload', function () {
      $(".........").prop("disabled", "disabled");
 });

And I noticed that you are loading the script <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>severaltimesinHTMLwithoutneed.Youcanloaditintotheheadorfooterofthesiteonlyonce.Thenyourhtmlcodewouldlooklikethis:

<head><scripttype="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scripttype="text/javascript" src="seu-script.js"></script>
</head>
<div class="col-md-6">
    <ul class="list-group">
        <li class="list-group-item list-group-item-success">
            <span class="badge"><b>Qua, 09 de Dez de 2015 02H:51M</b></span>
            Última atualização de <b>Locais</b>
        </li>
    <form action="http://localhost/W-OS-PRO/index.php/local/atualizar" class="form" data-id="2">

        <input type="submit" id="local_1" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
    </form>     

    <div></form>
        <li class="list-group-item list-group-item-success" align="right">
            <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
    </li>


</ul>
        </div>

<div class="col-md-6">
                <ul class="list-group">
    <li class="list-group-item list-group-item-success">
        <span class="badge"><b>Qua, 09 de Dez de 2015 02H:52M</b></span>
        Última atualização de <b>Itens</b>
    </li>

    <form action="http://localhost/W-OS-PRO/index.php/item/atualizar" class="form" data-id="2">

        <input type="submit" id="local_2" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
    </form>     

    <div></form>
        <li class="list-group-item list-group-item-success" align="right">
            <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
    </li>


</ul>
        </div>

<div class="col-md-6">
        <ul class="list-group">
<li class="list-group-item list-group-item-success">
    <span class="badge"><b>Qua, 09 de Dez de 2015 02H:44M</b></span>
    Última atualização de <b>Agentes</b>
</li>

<form action="http://localhost/W-OS-PRO/index.php/agente/atualizar" class="form" data-id="2">

    <input type="submit" id="local_3" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
</form>     

<div></form>
    <li class="list-group-item list-group-item-success" align="right">
        <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
</li>


</ul>
</div>
    
09.12.2015 / 18:23
DatePicker With Highlight Dates Problem with Masked Fields