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

时间:2019-03-22 12:26:43

标签: javascript

在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)
     }
 });

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

谢谢!

1 个答案:

答案 0 :(得分:2)

如果由于输入不确定而发生错误,建议您调整<input id="textfield" type="text" pattern=".{3,}" required/> <div class="status"> <span class="invalid">input is invalid</span> <span class="valid">input is valid</span> </div> <input type=button onclick="document.getElementById('js-result').innerHTML = 'Input is valid: '+ document.getElementById('textfield').validity.valid;" value="Check with JS" /> <fieldset> <legend>JS Result</legend> <div id="js-result"></div> </fieldset>方法。

clf.predict(onehotencoder.transform([['Hyderabad / Secunderabad','0 Year(s) 8 Month(s)','android,J2Ee','Nagpur','Male']])