javascript - 如何保存到服务器动态添加的行

Question

在 laravel 5.7 / jquery 3 应用程序中查看代码片段https://bootsnipp.com/snippets/ykXa

我做了类似的，但有几个输入/选择元素。我用输入/选择元素代码添加新行：

         $(document).on('click', '.todo-btn-add', function(e)
         {
             e.preventDefault();
             var todos_count= parseInt($("#todos_count").val())+1

             var controlForm = $('.controls form:first'),
                 currentEntry = $(this).parents('.entry:first'),
                 newEntry = $(currentEntry.clone()).appendTo(controlForm);


             var modifiedHidden= newEntry.find('input');
             modifiedHidden.val('1');
             modifiedHidden.attr('id','todo_modified_'+todos_count);     
             modifiedHidden.attr('name','todo_modified_'+todos_count);

             var todo_text_input= modifiedHidden.next( "input" )
             todo_text_input.val('');
             todo_text_input.attr('id','todo_text_'+todos_count);
             todo_text_input.attr('name','todo_text_'+todos_count);      

             var todo_select_priority= newEntry.find( "select" )
             todo_select_priority.val('');
             todo_select_priority.attr('id','todo_priority_'+todos_count);
             todo_select_priority.attr('name','todo_priority_'+todos_count);

             var todo_select_completed= todo_select_priority.find( "select" )
             todo_select_completed.val('');
             todo_select_completed.attr('id','todo_completed_'+todos_count);
             todo_select_completed.attr('name','todo_completed_'+todos_count);


             controlForm.find('.entry:not(:last) .todo-btn-add')
                 .removeClass('todo-btn-add').addClass('btn-remove')
                 .removeClass('btn-success').addClass('btn-danger')
                 .html('<span class="fa fa-minus"></span>');

             $("#todos_count").val(  todos_count  )
         }).on('click', '.btn-remove', function(e)
         {
             $(this).parents('.entry:first').remove();
             $("#todos_count").val(  parseInt($("#todos_count").val())-1  )
             e.preventDefault();
             return false;
         });

但是保存表单的问题是我在 1 个数组中收集所有数据以将其保存在服务器上：

 function saveTodoDialog( csrf_token ) {
     let todos_count= $("#todos_count").val()
     let todosList= [];
     for(let i= 0; i< todos_count; i++) {
         let todoItem = {
             todo_id: $("#todo_id_" + i).val(),
             todo_modified: $("#todo_modified_" + i).val(),
             todo_text: $("#todo_text_" + i).val(),
             todo_priority: $("#todo_priority_" + i).val(),
             todo_completed: $("#todo_completed_" + i).val()
         }; //Object initialiser
         alert("todos_count::"+todos_count+ "  i::"+i+"todoItem::"+var_dump(todoItem) )
         todosList.push(todoItem);
     }

 console.log("todosList::")
 console.log( todosList )

 let href =  "/admin/save-todo-page";
 $.ajax({
     type: "POST",
     dataType: "json",
     url: href,
     data: { "_token": csrf_token, "todosList" : todosList },
     success: function (response) {
         popupAlert("Todo items were saved successfully !", 'success')
     },
     error: function (error) {
         popupErrorMessage(error.responseJSON.message)
     }
 });

但是检查任何行的数据我发现新添加的行的所有数据都有未定义的值。如何解决？

谢谢！

标签： javascript

Answer 1

如果由于您的输入未定义而发生错误，我建议您调整您的saveTodoDialog()方法。

function saveTodoDialog( csrf_token ) {
     let todoList = Array.prototype.slice
     .call( document.querySelectorAll('input.form-control') )
     .map( (todo, index) => {
        // Create Individual TODO object
     });

    // Make server request

}