While with PHP and Datapicker

Asked

Viewed 17 times

0

I have a page that is fed with Mysql Database information. This page also contains an Input Text with dataPicker calendar. The problem is that only the first line of looping works with Datapicker, the rest not.

Form:

    while($fetch = mysql_fetch_assoc($xxx)){ 

     <input  name="protocolo" id="protocolo" type="text" 
     placeholder="00/00/0000" 
     style="width:100px;font-size: 13px" class="form-control input-md">

Datapicker

<script type="text/javascript">
$(document).ready(function(e) {
    $("#protocolo").datepicker({
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        dateFormat: 'yy-mm-dd',
        nextText: 'Próximo',
        prevText: 'Anterior'
    });
});
</script>
     } ?>

Both are inside While, tested by putting the Datapicker out of the white, but the problem remains, only the first line of While opens the calendar, the others do not.

1 answer

0


The attribute ID should be unique. When you have more than two elements with the same attribute ID. The Javascript will consider only the first.

Instead of using ID, use other attributes like class, data-* etc..

Ex:

while($fetch = mysql_fetch_assoc($xxx)){ 
    <input name="protocolo[]" type="text" 
            placeholder="00/00/0000" 
            style="width:100px;font-size: 13px" class="form-control protocolo input-md"/>
}

Javascript:

<script type="text/javascript">
$(document).ready(function(e) {
    $(".protocolo").datepicker({
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        dateFormat: 'yy-mm-dd',
        nextText: 'Próximo',
        prevText: 'Anterior'
    });
});
</script>

The same goes for the attribute name. When you submit the form, only one of the values will be sent the repeated ones will be discarded, so you should use name="protocolo[]"

  • in this case I add only the [] in input id="protocol[]" and change # by . in datapicker? Yeah, I made this change and the datapicker stopped responding, now not even the first line raises the calendar.

  • @user54154 No! The [] can only be used in attribute name. You must add the class protocolo in the input (Ex: class="protocolo form-control...") and use javascript $(".protocolo"). If possible copy and paste the code I posted in the reply and check.

  • Boaaa, that’s right. Thank you so much for your help and I learned one more :)

  • Can you tell me why he only feeds the first Input date? If I feed any input other than the first one, it will anyway, add the date in the first Input.

  • It only feeds the first one (when you have the ID) because it is an HTML rule. Here is a more complete answer about this "problem": https://answall.com/questions/57582/pega-html-de-v%C3%A1rias-Divs-com-o-mesmo-id

Browser other questions tagged

You are not signed in. Login or sign up in order to post.