Valor dos inputs dinâmicos dentro do modal dinâmico!!

[Hewitt 14]

Bom dia amigos. Tenho um projeto em fase final, e estou quebrando a cabeça com esse detalhe.

 

Tenho uma function que cria modal dinâmico, de acordo com o valor de itens do localStorage. Quando abre a página, já cria os modals. Estou usando Materialize CSS.

 

Código do modal:

 

var m = 0;
function cria_modal() {
    m++;
    $("#modais").append(
        "<div id='modal"+ m +"' class='modal modal-fixed-footer'>" +
            "<div class='modal-content'><p style='color: #FFF'>Programar Horário</p><br>" +
            "<input id='programaLocal"+ m +"' name='txtProgramaLocal' type='text' value='5' hidden>" +
            "<div class='input-field col s12'>" +
                "<i class='material-icons prefix'>alarm_on</i>" +
                "<input id='programa_on"+ m +"' name='txtPrograma_on' type='text'>" +
                "<label for='txtPrograma_on'>Horário - Ligar</label>" +
            "</div>" +
            "<div class='input-field col s12'>" +
                "<i class='material-icons prefix'>alarm_off</i>" +
                "<input id='programa_off"+ m +"' name='txtPrograma_off' type='text'>" +
                "<label for='txtPrograma_off'>Horário - Desligar</label>" +
            "</div>" +
        "</div>" +
        "<div class='modal-footer'>" +
            "<button id='btn_programar"+ m +"' value='http://"+ localStorage.getItem('ip_cliente'+m) +"/programar' type='button' class='btn modal-action waves-effect waves-green blue btn_programar'><i class='material-icons icone_branco'>check</i> Programar</button>" +
        "</div>" +
    "</div>");
    $('#programa_on'+ m +', #programa_off'+ m +'').mask('99:99:99');
}

Cria certinho, e abro cada um de acordo como preciso!

(Só para vocês entenderem, ele programa um horário para a minha automação residencial ligar/desligar o relê)

 

Pois bém, a função do clique do meu botão, não está funcionando como queria: salvar os dados do input DAQUELE MODAL que abri, mas está pegando os dados do PRIMEIRO MODAL criado.

 

Deu pra entender?? kkkkk

 

Código do botão (que está na própria página dos modals):

 

var t = 0;
$(document).on('click', '.btn_programar', function(){ //Quando clicar em qualquer botão com a classe .btn_programar
    t++;
    var cmd = $(this).val(); //Pegará o valor dele no campo value
    var gpio = 5;
    var on = $('input[id^="programa_on'+t+'"]').val();
    var off = $('input[id^="programa_off'+t+'"]').val();
    $.post(cmd, {'txtProgramaLocal':gpio, 'txtPrograma_on':on, 'txtPrograma_off':off});
});

Se eu abrir o #MODAL3, e clicar no botão, ele pega o input do #MODAL1, depois do #MODAL2, e por último, do #MODAL3.

 

A pergunta é: como faço para pegar o valor do input correto?

 

 

[Pita 53]

Somente informando, o que o JQuery faz neste seu caso é atribuir a função para todos os botões em uma unica execução, por isso que o "t++" não funciona para a sua lógica.

 

Na sua função você precisa atribuir para a variável "t" o numero do modal clicado, talvez usando o $this.id e removendo as partes que não são o número, com um replace por exemplo, possa resolver

 

[Hewitt 14]

@Pita, acho que isso vai resolver! Vou tentar aqui! =)

[Hewitt 14]

Consegui resolver!! Obrigado @Pita pelo auxílio!!

 

Código Final (comentado):

 

$(document).on('click', '.btn_programar', function(){ //Quando clicar em qualquer botão com a classe .btn_programar
    var cmd = $(this).val(); //Pegará o valor dele no campo value
    var gpio = 5;
    var t; //Variável que definará o valor do modal 
    $('div[class="modal modal-fixed-footer open"]').each(function(){ //Irá pegar o modal que está aberto
        var id = $(this).attr('id'); //Pega o ID do Modal Aberto
        t = id.replace(/[^\d]+/g,''); //Retira as letras e deixa somente o número.
    })
    var on = $("#programa_on"+t).val();
    var off = $("#programa_off"+t).val();
    $.post(cmd, {'txtProgramaLocal':gpio, 'txtPrograma_on':on, 'txtPrograma_off':off});
});