Input value is the same throughout foreach

Asked

Viewed 110 times

0

I’m trying to build a satisfaction survey where a list of questions appears for the customer to inform the note and by clicking include to save.

I managed to ask for a question, but when there is more than one the note is saved with the value of the first question in all other.

What I’m not getting is: Save the note value of each question, with the code below the notes are saved with the value given in the first question.

View Index.html

    <!DOCTYPE html>
<html lang="pt" xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" type="text/css" th:href="@{/layoutPesquisa/bootstrap/css/bootstrap.min.css}"/>
    <title>Pesquisa</title>
</head>
<body>
    <div th:replace="PesquisaSatisfacao/Questionario :: questionario">...</div>

    <div class="table-responsive  bw-tabela-simples">
        <table class="table  table-hover">
        <thead>
            <tr>
                <th class="table-col-minima">Pergunta</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="questionario: ${questionarios}" class="tabela">
                <td>
                    <h2>[[${questionario.pergunta.nome}]]</h2>
                    <input id="dv" type="text" class="form-control  js-nota" maxlength="2"/>                            
                    <a class="btn  btn-success  js-incluir" data:pergunta="${questionario.pergunta.id}">Incluir</a>                                 </td>
            </tr>
        </tbody>
        </table>
    </div>  

    <div class="container-fluid">
        <div class="table-responsive  bw-tabela-simples">
            <form method="POST" th:object="${pesquisaSatisfacao}" class="form-vertical  js-form-loading" th:action="@{/pesquisaSatisfacao/novo}">           
                <input type="hidden" th:field="*{id}"/>
                <input type="hidden" id="uuid" th:field="*{uuid}"/>

                <div class="col-md-2">
                    <button class="btn  btn-success" type="submit">Salvar</button>
                </div>
            </form>
        </div>  
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script th:src="@{/layoutPesquisa/pesquisa.TabelaQuestionario.js}"></script>

</body>
</html>

Javascript

    var Sinte = Sinte || {};

Sinte.TabelaQuestionario = (function() {

    function TabelaQuestionario() {
        this.inputPergunta = $('.js-pergunta');
        this.inputNota = $('.js-nota');
        this.Uuid = $('#uuid');
        this.btnIncluir = $('.js-incluir');
    }

    TabelaQuestionario.prototype.iniciar = function() {
        this.btnIncluir.on('click', onBotaoClicado.bind(this));
    }


    function onBotaoClicado(event){
        var botaoClicado = $(event.currentTarget);
        var nota = this.inputNota.val().trim();
        var uuid = this.Uuid.val().trim();
        var idPergunta = botaoClicado.data('pergunta');

        var resposta = $.ajax({
            url: 'questao',
            method: 'POST',
            data: {
                idPergunta: idPergunta, nota: nota, uuid: uuid
            }
        });

        console.log("pergunta>>>>>", idPergunta);
        console.log("nota>>>>>", nota);

        resposta.done(function(data){
            console.log('retorno ', data);
        });

    }   

    return TabelaQuestionario

}());

$(function() {

    var tabelaQuestionario = new Sinte.TabelaQuestionario();
    tabelaQuestionario.iniciar();

});
java jquery spring

1 answer

0


From what I understand, you have a problem with the bind of events. When you click the include button it takes the value of the class(html) js-note, but this class is defined in all the items of its iteration a "gambiarra" to be able to solve this problem would, create a class(html), for each question for example:

SE6

var perguntas = ["qual seu nome", "qual sua idade"] perguntas.foreach((pergunta, index){ var classHtml = 'js-nota-'+index var input = '<label>'+pergunta+'</label><input class="'+classHtml+'"> $('body').append(input)
})

In this case we are creating an iteration for your questions and each of them will have a single "key" (js-note-0, js-note-1) as the class to be referenced for Jquery.

  • That’s right Claudio. It worked perfectly. Thank you very much!

Browser other questions tagged java jquery spring

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