Я пытался добавить свои данные в отправленную форму через ajax, но отправка не проходит

Question

Я динамически создал форму опроса, используя jquery, и я хочу отправить форму через ajax и добавить к ней свои собственные данные.Я делаю это потому, что в созданном опросе есть вопросы, и на каждый вопрос есть определенное количество ответов.Но если вы просто отправляете форму, вы получаете массив вопросов и массив ответов, но невозможно определить, какой ответ принадлежит какому вопросу.Чтобы справиться с этой проблемой, я попытался создать свой собственный массив, или, скорее, карту, где вопросы являются ключами, и каждый вопрос имеет свои собственные ответы в качестве значений.Я не нашел лучшего способа сделать это - просто использовать ajax для изменения отправки.Как видно из заголовка, это не сработало, просто не проходит, нет сообщений об ошибках.

$('.survey').submit(function(event){
    event.preventDefault();
    var map = new Array();
    var q;
    var form = $(this);
    $('div[name="question"]').each(function(){
        q = $(this).find('.question')[0].value;
        map["q"] = new Array();
        $(this).find('.answer').each(function(){
            map["q"].push($(this).val()+"");
        });
    });
    var data = form.serializeArray();
    data["questions"] = JSON.stringify(map);
    $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: data
        });
});

Вот код, о котором идет речь, который не работает, и вот jsfiddle дляВся программа: https://jsfiddle.net/e9tbcwdj

Все отлично работает, кроме отправки.Когда я не читаю свою карту, я вижу по предупреждению, что карта была успешно добавлена ​​к данным, и что data ["questions"] ["q"] [0], например, показывает ожидаемый результат.Вот почему я почти уверен, что проблема заключается в сериализации, но я не совсем уверен, как сериализовать мою «карту», ​​так как stringify не справился с этой задачей.Я всегда немного беспомощен, когда дело доходит до сериализации.Должен ли я использовать функцию карты?

Answer 1

Спасибо, sayalok, за все проблемы, которые вы пережили из-за меня, но теперь у меня есть проблема: мой код работает нормально.Я поместил var_dump на страницу php, на которую я публиковал сообщения, но поскольку я использовал ajax и никогда не менял страницы, просто разместил на странице php, я никогда не видел var_dump и поэтому подумал, что отправка не прошла.Тем не менее, спасибо за вашу помощь.

Answer 2

кроме использования идентификатора класса в форме ur

      var form = $('#surveyForm');

в форме html ur добавить этот идентификатор

      <form method="POST" action="<?=base_url()?>start" class="survey" id="surveyForm">
        <input type="hidden" name="action" value="add">
        <input type="button" class="addQst" value="Add question">
        <input type="submit" class="submitForm" value="Generate">
      </form>

и дать имя для ввода вашего вопроса и ответа

      var question = $('<input type="text" class="question" name="quest">');
      var answer = $('<input type="text" class="answer" name="answr">');

Полный код

    $(document).ready(function () {
        $('.survey').submit(function(event){
            event.preventDefault();
            var map = new Array();
            var q;
            var form = $('#surveyForm');
            $('div[name="question"]').each(function(){
                q = $(this).find('.question')[0].value;
                map["q"] = new Array();
                $(this).find('.answer').each(function(){
                    map["q"].push($(this).val()+"");
                });
            });
            var data = form.serializeArray();
            console.log(data)
            data["questions"] = JSON.stringify(map);
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: data
            });
        });
        $('.addQst').click(function () {
            var wrapperQuestion = $('<div name="question">');
            var removeQuestion = $('<input type="button" class="rmvQst" value="Delete">');
            var question = $('<input type="text" class="question" name="quest">');
            var addAnswer =$('<input type="button" class="addAsw" value="Add answer">');
            addAnswer.click(function() {
                var wrapperAnswer = $('<div>');
                var answer = $('<input type="text" class="answer" name="answr">');
                var removeAnswer = $('<input type="button" class="rmvAsw" value="Delete">');
                removeAnswer.click(function() {
                    $(this).parent().remove();
                });
                wrapperAnswer.append(answer);
                wrapperAnswer.append(removeAnswer);
                $(this).before(wrapperAnswer);
            });
            removeQuestion.click(function() {
                $(this).parent().remove();
            });
            wrapperQuestion.append(question);
            wrapperQuestion.append(removeQuestion);
            wrapperQuestion.append($('<div>').append(addAnswer));
            $(this).before(wrapperQuestion);
        });
    });

Надеюсь, это поможет

Новый обновленный ответ

        $('.survey').submit(function(event){
            event.preventDefault();
            var map = new Array();
            var q;
            var form = $('#surveyForm');
            $('div[name="question"]').each(function(){
                q = $(this).find('.question')[0].value;
                q = [];
                $(this).find('.answer').each(function(){
                    q.push($(this).val()+"");
                });
                map.push(q)
            });
            var data = form.serializeArray();
            data["questions"] = JSON.stringify(map);
            console.log(data["questions"])
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: data
            });
        });