Laravel ajax отобразить все входы - PullRequest
Новая
       0

Laravel ajax отобразить все входы

0 голосов
/ 10 января 2020

У меня есть многошаговая форма с другим типом данных, например multiple checkbox, radio button and input (text), так как мои шаги формы являются динамическими c (зависит от данных из базы данных) Я не могу предоставить данные c для отправки в бэкэнд, например data: {1: one, 2:two, etc.} I Мне нужен способ сделать это data:{} Dynami c, я имею в виду, если у меня есть 5 входов в моей форме, отправьте 5 данных на сервер, если у меня 12 входов, то отправьте 12 данных.

Код 

success:function(data){ // getting my form inputs from backend
    $('.projectName').append('of ', data.project.name);

    //return existed data to quizzes
    var index = 0;
    var countdownTimer = null;
    var count = 0;
    $("#clicks").click(function(e){
        e.preventDefault();

        // timer function
        function timer(seconds, countdownTimer, callback) {
            var days = Math.floor(seconds / 24 / 60 / 60);
            var hoursLeft = Math.floor((seconds) - (days * 86400));
            var hours = Math.floor(hoursLeft / 3600);
            var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
            var minutes = Math.floor(minutesLeft / 60);
            var remainingSeconds = seconds % 60;
            if (remainingSeconds < 10) {
                remainingSeconds = "0" + remainingSeconds;
            }
            document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
            if (seconds == 0) {
                clearInterval(countdownTimer);
                document.getElementById('countdown').innerHTML = "Times Up!";
                $("#clicks").attr("disabled", true);
                $("#clicks").hide();
                $('.answerPanel').html('<div class="text-center text-danger">OH NO! <br> Times Up!</div>');
            } else {
                seconds--;
            }
            //Pass seconds param back to the caller.
            callback(seconds);
        }
        //We pass the countdownTimer param into the timer function as well.
        if (countdownTimer != null) {
            clearInterval(countdownTimer);
        }
        if(typeof data.quizzes[index] !== 'undefined'){
            seconds = data.quizzes[index].quiz_time;
        }
        countdownTimer = setInterval(function() {
            timer(seconds, countdownTimer, function(_seconds){
                seconds = _seconds;
            })
        }, 1000);



        // printing function (this is my form inputs "3 types")
        if(typeof data.quizzes[index] !== 'undefined'){
            var html = '<div class="row"><div class="col-md-12"><div class="pull-left questionTitle">'+data.quizzes[index].question+'</div><div class="pull-right" id="countdown"></div></div></div>';
            if(data.quizzes[index].choices.length > 0){
                html+='<div class="col-md-12">';
                if(data.quizzes[index].question_type == 'multiple'){
                    data.quizzes[index].choices.forEach((element, index, array) => {
                        html+='<div class="checkbox checkbox-primary">';
                        html+='<input id="choice" name="choice" type="checkbox" value="'+element.choice+'">';
                        html+='<label for="checkbox2">'+element.choice+'</label>';
                        html+='</div>';
                    });
                } else if (data.quizzes[index].question_type == 'single') {
                    data.quizzes[index].choices.forEach((element, index, array) => {
                        html+='<div class="radio radio-primary">';
                        html+='<input id="choice" name="choice" type="radio" value="'+element.choice+'">';
                        html+='<label>'+element.choice+'</label>';
                        html+='</div>';
                    });
                } else {
                    data.quizzes[index].choices.forEach((element, index, array) => {
                        html+='<div class="radio radio-primary">';
                        html+='<input id="choice" name="choice" type="text" value="'+element.choice+'">';
                        html+='<label>'+element.choice+'</label>';
                        html+='</div>';
                    });
                }
                html+='</div>';
            }
            $(".answerPanel").html(html);
            index++;
        }

        if(data.quizzes.length > index+1) {
            $("#clicks").html("Next");
        }
        if(data.quizzes.length === index) {
            $("#clicks").html("Send");
            $('#clicks').removeClass('btn-primary').addClass('btn-success saveAnswers');
        }
        //end of printing function

        //send form data
        $('.saveAnswers').unbind().bind('click', function(e){
            e.preventDefault();

            // var formData = new FormData();
            // formData.append('radio buttons', $(this).closest("form").find("input[name=choice]").is(':checked'));
            // formData.append('select options', $(this).closest("form").find("input[name=choice]").is(':selected'));
            // formData.append('text inputs', $(this).closest("form").find("input[name=choice]").is(':selected'));
            $.post({
                type: 'POST',
                url: '{{route('quizzes.store')}}',
                dataType: "json",
                processData: false,
                contentType: false,
                data: formData,
                success:function(data){
                    console.log(data);
                }
            });
        });
        //send form data
    });
}

Примечание: я поделился полным кодом на тот случай, если вам нужно выяснить логи c, но для ясности моя проблема в сохранении, которое я прокомментировал с //send form data

PS: некоторые из моих данных формы имеют множественный выбор (флажок)

Пример:

Допустим, одна из моих форм имеет 3 шаги с 3 различными типами, вот как мне нужны данные, 

{
"step 1" : {good, bad} // checkbox
"step 2" : {no} // radio button
"step 3": {this is my testing input} // text input
}

Эти данные будут сохранены в столбце json, поэтому его нужно отправить как json я думаю.

Вопрос

Как мне обернуть свои динамические c входы и отправить данные в бэкэнд?

Обновление

Ну, как я был потерян После того, как я нажал кнопку «Далее», после каждого следующего шага я решил сохранить данные каждого шага в localStorage, а затем отправить их сразу на последнем шаге.

с моим отредактированным кодом я столкнулся с 3 проблемами:

  1. Остальная часть не будет работать
  2. Данные второго шага будут сохранены в localStorage, когда я нажму на первом шаге! также в разных строках вместо их как json {} two
  3. Следующие шаги удаляют данные предыдущего шага в localStorage.

code 

// printing function
if(typeof data.quizzes[index] !== 'undefined'){
    var html = '<div class="row"><div class="col-md-12"><div class="pull-left questionTitle">'+data.quizzes[index].question+'</div><div class="pull-right" id="countdown"></div></div></div>';
    if(data.quizzes[index].choices.length > 0){
        html+='<div class="col-md-12">';
        if(data.quizzes[index].question_type == 'multiple'){
            data.quizzes[index].choices.forEach((element, index, array) => {
                html+='<div class="checkbox checkbox-primary">';
                html+='<input class="styled form-check-input" id="choice" name="'+data.quizzes[index].question+'[]" type="checkbox" value="'+element.choice+'">';
                html+='<label class="control-label">'+element.choice+'</label>';
                html+='</div>';
                // added part
                $('#clicks').on('click', function(e) {
                    e.preventDefault();
                    var checkboxes = [];
                    $("input[name='"+data.quizzes[index].question+"']").each(function(){
                        checkboxes.push(this.value);
                    });
                    console.log(checkboxes);
                    localStorage.setItem(data.quizzes[index].question, JSON.stringify(checkboxes));
                });
            });
        } else if (data.quizzes[index].question_type == 'single') {
            data.quizzes[index].choices.forEach((element, index, array) => {
                html+='<div class="radio radio-primary">';
                html+='<input class="styled form-check-input" id="radio" name="'+data.quizzes[index].question+'" type="radio" value="'+element.choice+'">';
                html+='<label class="control-label">'+element.choice+'</label>';
                html+='</div>';
                // added part
                $('#clicks').on('click', function(e) {
                    e.preventDefault();
                    var radios = [];
                    $("input[name='"+data.quizzes[index].question+"']").each(function(){
                        radios.push(this.value);
                    });
                    console.log(radios);
                    localStorage.setItem(data.quizzes[index].question, JSON.stringify(radios));
                });
            });
        } else { // added part
            alert('hi');
            data.quizzes[index].choices.forEach((element, index, array) => {
                html+='<div class="row">hi';
                html+='<input id="input" name="'+data.quizzes[index].question+'" type="text">';
                html+='<label>'+element.choice+'</label>';
                html+='</div>';
                // added part
                $('#clicks').on('click', function(e) {
                    e.preventDefault();
                    var inputss = [];
                    $("input[name='"+data.quizzes[index].question+"']").each(function(){
                        inputss.push(this.value);
                    });
                    console.log(inputss);
                    localStorage.setItem(data.quizzes[index].question, JSON.stringify(inputss));
                });
            });
        }
        html+='</div>';
    }
    $(".answerPanel").html(html);
    index++;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...