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

我认为这是你想要的，或者尽可能接近你所需要的，我添加一个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 2

这是你想要的，你将获得所有输入的价值，你可以做到什么你想要它。

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

它工作但我得到像undefined一样的错误

我尝试了每个阵列的console.log，我得到了我没想到的东西

在提交表单之前显示表单数组输入值

4 个答案: