在提交表單前顯示錶單數組的輸入值

Question

我有一個分爲兩個部分的頁面。所以首先看到第一部分，我們需要填寫輸入值，當我們點擊轉到下一頁按鈕時第一部分現在隱藏，第二部分顯示。然後我們只能提交表格。 現在我想的是，在第一部分中，我有四個輸入，比如圖所示

 <div class="room_details_first col-md-12" id="first_order"> 
     <div class="col-md-3"> 
     <input type="text" placeholder="Food items" name="others_food_items[]" data-view-id="#location"/> 
    </div> 
     <div class="col-md-3"> 
     <input type="text" placeholder="Hotel Name" name="others_hotel[]"/> 
     </div> 
     <div class="col-md-3"> 
     <input type="text" placeholder="Hotel price" name="others_hotel_price[]"/> 
     </div> 
    <div class="col-md-3"> 
     <input type="text" placeholder="Customer Price" name="others_client_price[]"/> 
     </div> 
     </div> 

現在，通過使用jQuery我有追加輸入和代碼如下所示

function add_others_order(){ 
    var output=""; 
output+= '<div class="room_details_first col-md-12" id="first_order">'; 
output+='<div class="col-md-3"><input type="text" placeholder="Food items" name="others_food_items[]" data-view-id="#location"/></div>'; 
    output+='<div class="col-md-3"> <input type="text" placeholder="Hotel Name" name="others_hotel[]"/> </div>'; 
    output+='<div class="col-md-3"><input type="text" placeholder="Hotel price" name="others_hotel_price[]"/></div>'; 
    output+='<div class="col-md-2"> <input type="text" placeholder="Customer Price" name="others_client_price[]"/></div>'; 
    output+='<div class="col-md-1" ><a href="javascript:void(0)" id="removeOtherOrder"><i class="fa fa-remove"></i></a></div>'; 
     output+='</div>'; 
    $('#first_order').after(output); 
    } 

現在該怎麼辦我需要的是我需要在提交之前保存輸入值，並將其列在頁面的第二部分。我試圖做到這一點，但我失敗了很多次。而且我還發現這是下面

Display the data entered in a form before submitting the form

傢伙，我需要幫助給出類似的答案。

Answer 1

這就是你想要的，你會得到所有的輸入值，你可以做任何你想要的東西 。

function nextStep() { 
 
    var allFields = document.getElementsByTagName("input"); 
 
    //console.log(allFields); 
 
    for (var index in allFields) { 
 
    console.log('name : '+allFields[index].name); 
 
    if (allFields[index].type == "text") { // you can change condition by name instead of type 
 
     if (allFields.hasOwnProperty(index)) { 
 
     var attr = allFields[index]; 
 
     console.log(attr.value) 
 
     } 
 
    } 
 
    } 
 
}

<div class="col-md-3"> 
 
    <input type="text" placeholder="Food items" name="others_food_items[]" data-view-id="#location" /> 
 
</div> 
 
<div class="col-md-3"> 
 
    <input type="text" placeholder="Hotel Name" name="others_hotel[]" /> 
 
</div> 
 
<div class="col-md-3"> 
 
    <input type="text" placeholder="Hotel price" name="others_hotel_price[]" /> 
 
</div> 
 
<div class="col-md-3"> 
 
    <input type="text" placeholder="Customer Price" name="others_client_price[]" /> 
 
</div> 
 
<input type="button" onclick="nextStep()" value="Next step">

Answer 2

我想這是你想要的，或者儘可能靠近你需要什麼，我添加了一個id屬性，所以你可以添加/刪除：

var stored_data = []; 
stored_data.total = 0; 

$('#dummy').on('click', function(){ 
    var obj = { 
     id: stored_data.length, 
     food: food.value, 
     hotel_name: hotel_name.value, 
     hotel_price: hotel_price.value, 
     customer_price: customer_price.value 
    }; 
    stored_data.push(obj); 
    stored_data.total += parseInt(obj.customer_price); 
    //$('#first_section').hide(); 
    var output = '<div class="room_details_first col-md-12" id="first_order">'; 
    output += '<div>Order ' + obj.id + '</div>'; 
    output += '<div class="col-md-3">Food: ' + obj.food + '</div>'; 
    output += '<div class="col-md-3">Hotel Name: ' + obj.hotel_name + '</div>'; 
    output += '<div class="col-md-3">Hotel Price' + obj.hotel_price + '</div>'; 
    output += '<div class="col-md-2">Customer Price' + obj.customer_price + '</div>'; 
    output += '<div class="col-md-1" ><a href="javascript:void(0)" id="removeOtherOrder"><i class="fa fa-remove"></i></a></div>&nbsp'; 
    $('#new_section').append(output); 
    $('#total').text(stored_data.total); 
}); 

https://jsfiddle.net/5uka65tx/2/

Answer 3

這裏是一種利用整個第一順序clone()做出來，做一些修改，添加鏈接，改變重複的ID和最後一個項目列類。

首先使用serializeArray()得到的值存儲

var values = $('#first_order :input').serializeArray();   
console.log(values); 

然後克隆，修改和插入

var link = '<div class="col-md-1" ><a href="javascript:void(0)" id="removeOtherOrder"><i class="fa fa-remove"></i>LINK</a></div>';  

// clone first order and update ID 
var $first = $('#first_order').clone().attr('id', 'first-order_2'); 
// modify column on last one and add the link 
$first.children(':last').toggleClass('col-md-2 col-md-3').after(link); 
// insert in second position 
$('#second').append($first) 

DEMO

Answer 4

通過採取Jigar7521的參考，我想要做到以下幾點

var allFields = document.getElementsByClassName("others_order"); 
var others_total_price='0'; 
var others_food_items=new Array(); 
var others_hotel_name=new Array(); 
var others_hotel_price=new Array(); 
var others_client_price=new Array(); 
//var others['food_items'] = new Array(); 
    var ficounter=0; 
    var hcounter=0; 
    var hpcounter=0; 
    var cpcounter=0; 




    Array.prototype.forEach.call(allFields, function(el) { 
    if(el.name=='others_client_price[]'){ 
    others_client_price[cpcounter]=el.value; 
    cpcounter++; 
    others_total_price=parseFloat(others_total_price)+parseFloat(el.value); 

    } 
    if(el.name=='others_food_items[]'){ 
    others_food_items[ficounter]=el.value; 
    ficounter++; 
    } 
    if(el.name=='others_hotel[]'){ 
    others_hotel_name[hcounter]=el.value; 
    hcounter++; 
    } 
    if(el.name=='others_hotel_price[]'){ 
    others_hotel_price[hpcounter]=el.value; 
    hcounter++; 
    } 

}); 
    $('#others_total_price').val(others_total_price); 
    var others_output="<h4>Others Order</h4>"; 

    for(var i=0;i<=ficounter;i++){ 
    others_output+='<div ><div class="col-md-12"><div class="col-md-3">'+others_food_items[i]+'</div><div class="col-md-3">'+others_hotel_name[i]+'</div><div class="col-md-3">'+others_hotel_price[i]+'</div><div class="col-md-3"> '+others_client_price[i]+'</div></div></div>'; 
    } 
    $('#others_id').html(others_output); 

它的工作，但我得到這樣的錯誤未定義

我試圖CONSOLE.LOG每個數組，我得到了什麼，我沒有預料