How to preview values of dynamically generated fields with jquery - php

Question

I have a form on my website where users fill an input field and selects from a drop down. For more options, a button is provided to generate more fields dynamically for users. That works fine.
Now, I’m trying to implement a functionality that previews the orders made by users (in a table format) immediately the user finish filling the orders field and the name field receives focus but I can’t seems to get it done. Any assistance will be appreciated please.
Here is what I’ve tried so far:
<form class="form-horizontal" method="post" action="" id="order_form">
<fieldset class="orders_det">
<div class="form-group">
<label for="prod_type">Type</label>
<select name="prod_type[]" class="form-control prod">
<option value="">-- Select Products --</option>
<option value="prod1">Prod1</option>
<option value="prod2">Prod2</option>
<option value="prod3">Prod3</option>
</select>
</div>
<div class="form-group">
<label for="quant" >
<input type="text" class="form-control quant" name="quant[]">
</label>
<div>
<button type="button" class="btn btn-success" id="more_btn">Add More Orders + </button>
</div>
</fieldset>
<div class="form-group">
<label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-8">
<input type="text" class="form-control name" name="name">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" name="order_submit" id="order_submit">Submit Order</button>
</div>
</form>
<div class="orders_preview"></div>
My jquery:
$("form input.name").on("focus", function(e){
var prod = $("form select[name='prod_type[]']").map(function(){
return $(this).val();
}).get();
var quant = $("form input[name='quant[]']").map(function(){
return ($(this).val());
}).get();
var table = '';
table = '<table>';
table = '<thead>';
table = '<tr>';
table = '<th>Product</th>';
table = '<th>Quantity</th>';
table = '</tr>';
table = '</thead>';
table = '<tbody>';
table = '<tr>';
table = '<td>'+prod+'</td>';
table = '<td>'+quant+'</td>';
table = '</tr>';
table = '</tbody>';
table = '</table>';
$(".orders_preview").append(table);
});

Answer 1

I will modify your jquery slightly, changing the event handler to 'on change' instead of 'on focus'. Also, just before the opening tr tag, i will loop through your var prod values, like so;
$("form").on("change", function(e) { //to generate a preview table
var prod = $("form select[name='prod_type[]']")
var quant = $("form input[name='quant[]']")
var table = '';
table += '<table>';
table += '<thead>';
table += '<tr>';
table += '<th>Product</th>';
table += '<th>Quantity</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
prod.each(function(i) {
table += '<tr>';
table += '<td>' + $(this).val() + '</td>';
table += '<td>' + quant.eq(i).val() + '</td>';
table += '</tr>';
})
table += '</tbody>';
table += '</table>';
$(".orders_preview").html(table);
});

Answer 2

You need to use += (concatenate each data to the variable)like below:-
table += '<table>';
table += '<thead>';...... so on for others
Working example:-
$(document).ready(function() {
$('form button#more_btn').on("click", function(e) {//to generate dynamic fields
e.preventDefault();
var moreOrders = '';
moreOrders += '<div class="new_order">';
moreOrders += '<div class="form-group">';
moreOrders += '<label for="prod_type">Type</label>';
moreOrders += '<select name="prod_type[]" class="form-control prod">';
moreOrders += '<option value="">-- Select Products --</option>';
moreOrders += '<option value="prod1">Prod1</option>';
moreOrders += '<option value="prod2">Prod2</option>';
moreOrders += '<option value="prod3">Prod3</option>';
moreOrders += '</select>';
moreOrders += '</div> ';
moreOrders += '<div class="form-group">';
moreOrders += '<label for="quant" class="control-label col-md-2" >Quantity</label>';
moreOrders += '<div class="form-control col-md-6">';
moreOrders += '<input type="text" class="form-control quant" name="quant[]">';
moreOrders += '</div>';
moreOrders += '<div>';
moreOrders += '</div><br />';
$('.more_orders').append(moreOrders);
});
$("form input.name").on("focus", function(e) {//to generate a preview table
var prododuct = $("form select[name='prod_type[]']");
var quantity = $("form input[name='quant[]']");
var table = '';
table += '<table>';
table += '<thead>';
table += '<tr>';
table += '<th>Product</th>';
table += '<th>Quantity</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
table += '<tr>';
prododuct.each(function(i) {
table += '<tr>';
table += '<td>' + $(this).val() + '</td>';
table += '<td>' + quantity.eq(i).val() + '</td>';
table += '</tr>';
})
table += '</tr>';
table += '</tbody>';
table += '</table>';
$(".orders_preview").append(table);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" method="post" action="" id="order_form">
<fieldset class="orders_det">
<div class="form-group">
<label for="prod_type">Type</label>
<select name="prod_type[]" class="form-control prod">
<option value="">-- Select Products --</option>
<option value="prod1">Prod1</option>
<option value="prod2">Prod2</option>
<option value="prod3">Prod3</option>
</select>
</div>
<div class="form-group">
<label for="quant" class="control-label col-md-2" >Quantity</label>
<div class="form-control col-md-6">
<input type="text" class="form-control quant" name="quant[]">
</div>
<div>
<button type="button" class="btn btn-success" id="more_btn">Add More Orders + </button>
</div>
</div>
<div class="more_orders">
</div>
</fieldset>
<div class="form-group">
<label for="name" class="col-md-2 control-label">Name</label>
<div class="col-md-8">
<input type="text" class="form-control name" name="name">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" name="order_submit" id="order_submit">Submit Order</button>
</div>
</form>
<div class="orders_preview"></div>
jsFiddle working link:- https://jsfiddle.net/8jmz4w14/

Answer 3

By itself = does not concatenate, so you need to use += to realize the full table:
var table = '';
table += '<table>';
table += '<thead>';
table += '<tr>';
table += '<th>Product</th>';
table += '<th>Quantity</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
table += '<tr>';
table += '<td>'+prod+'</td>';
table += '<td>'+quant+'</td>';
table += '</tr>';
table += '</tbody>';
table += '</table>';