Transfer values ​​from js to base

there is a Form

Form Code

 <form> <input type="hidden" name="action" value="postform"/> <div class="panel panel-default"> <div class="panel-body form-horizontal payment-form"> <div class="form-group"> <label for="firstname" class="col-sm-3 control-label">Имя<a style="color: red">*</a></label> <div class="col-sm-9"> <input type="text" class="form-control" name="firstname" value= "{if isset($usrData)}{$usrData.firstname}{/if}"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-3 control-label">Фамилия<a style="color: red">*</a></label> <div class="col-sm-9"> <input type="text" class="form-control" name="lastname" value= "{if isset($usrData)}{$usrData.lastname}{/if}"> </div> </div> <div class="form-group"> <label for="middlename" class="col-sm-3 control-label">Отчество</label> <div class="col-sm-9"> <input type="text" class="form-control" name="middlename" value="{if isset($usrData)}{$usrData.middlename}{/if}"> </div> </div> <div class="form-group"> <label for="contacts" class="col-sm-3 control-label">Телефон<a style="color: red">*</a></label> <div class="col-sm-9"> <input type="text" class="form-control" name="contacts" value="{if isset($usrData)}{$usrData.contacts}{/if}"> </div> </div> <div class="form-group"> <label for="email" class="col-sm-3 control-label">Электроная почта<a style="color: red">*</a></label> <div class="col-sm-9"> <input type="text" class="form-control" name="email" value="{if isset($usrData)}{$usrData.email}{/if}"> </div> </div> <div class="form-group"> <label for="selecthotels" class="col-sm-3 control-label">Выберете место</label> <div class="col-sm-9"> <select class="form-control" id="selecthotels" name="selecthotels"> {foreach from=$hotels key=id item=val} <option value="{$val.id}">{$val.hotelname}</option> {/foreach} </select> </div> </div> <div class="form-group"> <label for="selectrooms" class="col-sm-3 control-label">Выберете комнату</label> <div class="col-sm-9"> <select class="form-control" id="selectrooms" name="selectrooms"> {foreach from=$booking key=id item=val} <option value="{$val.id}">{$val.rooms}</option> {/foreach} </select> </div> </div> <div class="form-group"> <label for="dateto" class="col-sm-3 control-label">Дата заезда</label> <div class="col-sm-9"> <input type="date" class="form-control" id="dateto" name="dateto"> </div> </div> <div class="form-group"> <label for="datefrom" class="col-sm-3 control-label">Дата выезда</label> <div class="col-sm-9"> <input type="date" class="form-control" id="datefrom" name="datefrom"> </div> </div> <div class="form-group"> <div class="col-sm-12 text-right"> <button type="button" class="btn btn-default preview-add-button"> <span class="glyphicon glyphicon-plus"></span> Добавить </button> </div> </div> </div> </div> </div> <!-- / panel preview --> <div class="col-sm-8"> <h4>Предпросмотр:</h4> <div class="row"> <div class="col-xs-12"> <div class="table-responsive"> <table class="table preview-table"> <thead> <tr> <th>Имя</th> <th>Фамилия</th> <th>Отчество</th> <th>Телефон</th> <th>Email</th> <th>Место</th> <th>Комната</th> <th>Заезд</th> <th>Выезд</th> </tr> </thead> <tbody></tbody> <!-- preview content goes here--> </table> </div> </div> </div> <div class="row text-right"> <div class="col-xs-12"> <h4>Итого: <strong><span class="preview-total"></span></strong></h4> </div> </div> <div class="row"> <div class="col-xs-12"> <hr style="border:1px dashed #dddddd;"> <button type="submit" class="btn btn-primary btn-block add_button_to_base">Подтвердить ваш выбор и перейти к оплате!</button> </div> </div> </form> 

When you click on the add button, it is transferred to javascript and displayed in the preview.

js code

 $(function(){ $('.preview-add-button').click(function(){ var form_data = {}; form_data["firstname"] = $('.payment-form input[name="firstname"]').val(); form_data["lastname"] = $('.payment-form input[name="lastname"]').val(); form_data["middlename"] = $('.payment-form input[name="middlename"]').val(); form_data["contacts"] = $('.payment-form input[name="contacts"]').val(); form_data["email"] = $('.payment-form input[name="email"]').val(); form_data["selecthotels"] = $('.payment-form #selecthotels option:selected').text(); form_data["selectrooms"] = $('.payment-form #selectrooms option:selected').text(); form_data["dateto"] = $('.payment-form input[name="dateto"]').val(); form_data["datefrom"] = $('.payment-form input[name="datefrom"]').val(); form_data["remove-row"] = '<span class="glyphicon glyphicon-remove"></span>'; var row = $('<tr></tr>'); $.each(form_data, function( type, value ) { $('<td class="input-'+type+'"></td>').html(value).appendTo(row); }); $('.preview-table > tbody:last').append(row); calc_total(); }); }); 

But it became necessary to transfer the values ​​from javascript to the database, that is, if I add 10 entries, then all 10 entries need to be put into the database, I ask for help adding to the database.

Thanks in advance.

I use FrameWork Smarty and Bootstrap