Zeigen Sie die Formular-Array-Eingänge Wert vor dem Senden des Formulars

Question

Ich habe eine einzelne Seite, die in zwei Abschnitte unterteilt ist.So am ersten ersten Abschnitt ist zu sehen, und wir müssen die Eingaben füllen und wenn wir klicken Sie auf die Schaltfläche nächste Seite dann Der erste Abschnitt ist nun ausgeblendet und der zweite Abschnitt wird angezeigt. Dann können wir nur das Formular abschicken. Nun, was ich will, ist, dass im ersten Abschnitt, i vier Eingänge haben wie unter

 <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> 

von jquery i die Eingänge anhängen haben mit nun gezeigt, und der Code wird unter

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

jetzt gezeigt, was Ich brauche, muss ich den Input-Wert vor dem Einreichen speichern und listet es im zweiten Abschnitt der Seite auf. Ich habe versucht, es zu tun, aber ich bin viele Male fehlgeschlagen. Und ich habe auch ähnliche Antworten gefunden, die unter

Display the data entered in a form before submitting the form

Jungs Ich brauche Hilfe gegeben wird.

Answer 1

Hier ist, was Sie wollen, erhalten Sie den Wert aller Eingaben und Sie können tun, was auch immer Sie damit wollen.

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

Ich denke, das ist das, was Sie wollen, oder so nah an, was Sie brauchen, füge ich ein id-Attribut, so dass Sie fügen Sie können/entfernen:

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

Hier ist ein Weg, es zu tun, indem clone() im Großen und Ganzen erster Ordnung und haben einige Änderungen über den Link und ändern doppelte ID und letzte Element Spalte Klasse hinzuzufügen.

Erster Einsatz serializeArray() die Werte erhalten

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

dann Klon zu speichern, verändern und

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

einfügen Referenz von Jigar7521 Indem, habe ich versucht, den folgenden Weg zu tun

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

es funktionierte, aber ich bekomme Fehler wie undefined

Ich habe versucht, jedes Array console.log und ich bekam, was ich erwartet habe nicht