Display the form array inputs value before submitting the form

Question

i have a single page which is divided into two sections.So at first first section is seen and we need to fill the inputs value and when we click go to next page button then the first section is now hidden and second section is shown.Then only we can submit the form. Now what i want is that in the first section, i have four inputs like shown below

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

Now by using jquery i have append the inputs and the code is shown below

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

now what i need is i need to save the inputs value before submitting and list it in second section of the page.i have tried to do it but i am failed many times. And i have also found similar answers which is given below

Display the data entered in a form before submitting the form

Guys i need help.

actually i am still confuse about flow, as my understanding when user click on next button from first section, the first section html should be copied to the next section, is that what you want? — Jigar7521, Jan 03 '17 at 04:46
sorry i couldn't properly clarify my question. Yes, i need to display the inputs value in second section but i have one input field which is customer price . I need to display all the inputs list and at last sum the value of customer price too and so total client price — Lal Kumar Rai, Jan 03 '17 at 04:53

kevguy · Answer 1 · 2017-01-03T05:24:21.497

I think this is what you want, or as close to what you need, I add an Id attribute so you can do add/remove:

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/

yes i want like this but here you have just show single value. How can i list all the food,hotel_name, hotel_price.wait i wil make some changes in the question. — Lal Kumar Rai, Jan 03 '17 at 05:05
You are talking about having showing all the food, hotel_name, hotel_prices inputted, aren't you?? @LalKumarRai — kevguy, Jan 03 '17 at 05:15
this works but as i have shown in the picture, this image field can be array like in the picture with the same name — Lal Kumar Rai, Jan 03 '17 at 05:48

Jigar7521 · Accepted Answer · 2017-01-03T07:38:07.960

1

Here is what you want, you will get all input's value and you can do what ever you want with it.

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

edited Jan 03 '17 at 07:38

answered Jan 03 '17 at 05:09

Jigar7521

1,549
14
27

thanks for you great answer . Can you please teach me how can i save the value of input of only four given above and add the client_price and display again in the list? – Lal Kumar Rai Jan 03 '17 at 05:58
yes of course i have updated my answer from which now you only get input type text fields value and then you need to just make html from it and append it to your next section. – Jigar7521 Jan 03 '17 at 06:07
yes but i want the value of input name of others_food_items,others_hotel,others_hotel_price,others_client_price because there will be other input fileds too – Lal Kumar Rai Jan 03 '17 at 06:09
this will work for all input type text fields and you can push all value inside new array where i have console log it near `console.log(attr.value)` – Jigar7521 Jan 03 '17 at 06:11
can we list the specific input names in the array list and check the name of input like you did (but you checked the type) and save the value in array? – Lal Kumar Rai Jan 03 '17 at 06:13
yes you can, you even can access all html attributes of it like : name,type,class,id,click,etc just try it. – Jigar7521 Jan 03 '17 at 06:18
i could not do it ...please help me..i am not pro in js – Lal Kumar Rai Jan 03 '17 at 06:40
why there is undefined in the console? – Lal Kumar Rai Jan 03 '17 at 08:17
put `console.log('name : '+allFields[index].name); ` inside if condition – Jigar7521 Jan 03 '17 at 08:23
ok thats done adn now can you teach me how to create two dimensional array and save the client price like array['client_price'][i] – Lal Kumar Rai Jan 03 '17 at 09:00
refer this link for that : http://stackoverflow.com/questions/966225/how-can-i-create-a-two-dimensional-array-in-javascript/966938#966938 – Jigar7521 Jan 03 '17 at 09:16

charlietfl · Answer 3 · 2017-01-03T05:34:48.613

Here's a way to do it by using clone() on the whole first order and do some modifications to add the link and change duplicate ID and last item column class.

First use serializeArray() to get the values to store

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

then clone , modify and insert

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

Lal Kumar Rai · Answer 4 · 2017-01-03T09:52:25.227

By taking reference of Jigar7521, i tried to do the following way

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

it worked but i get errors like undefined

i tried to console.log every array and i got what i did not have expected

Display the form array inputs value before submitting the form

4 Answers4