Передать html из js в php с помощью ajax

Передать таблицу в формате html с помощью ajax в php-обработчик. 

К примеру, у нас есть таблица следующего вида:

<div class="compare-block">
<table>
<tr>
<th style="width: 250px;">
Характеристики
</th>
<th>
<input type="text" placeholder="Фирма №1" value="">
<span></span>
</th>
<th>
<input type="text" placeholder="Фирма №2" value="">
<span></span>
</th>
<th>
<input type="text" placeholder="Фирма №3" value="">
<span></span>
</th>
</tr>
</table>

<table class="compare-table" style="display: none">
<tr>
<th colspan="4" style="text-align: center">
Столб
</th>
</tr>
<tr>
<td style="width: 250px;">
Количество, шт.
</td>
<td>
<input type="text" placeholder="Впишите кол-во" value="">
<span></span>
</td>
<td>
<input type="text" placeholder="Впишите кол-во" value="">
<span></span>
</td>
<td>
<input type="text" placeholder="Впишите кол-во" value="">
<span></span>
</td>
</tr>

<tr>
<td style="width: 250px;">
Размер, мм
</td>
<td>
<select name="" id="">
<option value="">50х50</option>
<option value="">60х60</option>
<option value="">80х80</option>
</select>
<span></span>
</td>
<td>
<select name="" id="">
<option value="">50х50</option>
<option value="">60х60</option>
<option value="">80х80</option>
</select>
<span></span>
</td>
<td>
<select name="" id="">
<option value="">50х50</option>
<option value="">60х60</option>
<option value="">80х80</option>
</select>
<span></span>
</td>
</tr>

<tr>
<td style="width: 250px;">
Толщина металла, мм
</td>
<td>
<select name="" id="">
<option value="">1,5</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<span></span>
</td>
<td>
<select name="" id="">
<option value="">1,5</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<span></span>
</td>
<td>
<select name="" id="">
<option value="">1,5</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<span></span>
</td>
</tr>
<tr>
<td>
Длина, мм
</td>
<td>
<select name="" id="">
<option value="">1800</option>
<option value="">2000</option>
<option value="">2500</option>
<option value="">3000</option>
<option value="">3500</option>
<option value="">4000</option>
</select>
<span></span>
</td>
<td>
<select name="" id="">
<option value="">1800</option>
<option value="">2000</option>
<option value="">2500</option>
<option value="">3000</option>
<option value="">3500</option>
<option value="">4000</option>
</select>
<span></span>
</td>
<td>
<select name="" id="">
<option value="">1800</option>
<option value="">2000</option>
<option value="">2500</option>
<option value="">3000</option>
<option value="">3500</option>
<option value="">4000</option>
</select>
<span></span>
</td>
</tr>
<tr>
<td>Покраска (покрытие)</td>
<td>
<select name="" id="">
<option value="">Нет</option>
<option value="">Грунт</option>
<option value="">Грунт-эмаль 3 в 1</option>
<option value="">ППК</option>
</select>
<span></span>
</td>
<td>
<select name="" id="">
<option value="">Нет</option>
<option value="">Грунт</option>
<option value="">Грунт-эмаль 3 в 1</option>
<option value="">ППК</option>
</select>
<span></span>
</td>
<td>
<select name="" id="">
<option value="">Нет</option>
<option value="">Грунт</option>
<option value="">Грунт-эмаль 3 в 1</option>
<option value="">ППК</option>
</select>
<span></span>
</td>
</tr>
<tr>
<td>
Способ установки столбов
</td>
<td>
<select name="" id="">
<option value="">Забивание</option>
<option value="">Бутование</option>
<option value="">Точечное бетонирование</option>
<option value="">Свайный фундамент</option>
</select>
<span></span>
</td>
<td>
<select name="" id="">
<option value="">Забивание</option>
<option value="">Бутование</option>
<option value="">Точечное бетонирование</option>
<option value="">Свайный фундамент</option>
</select>
<span></span>
</td>
<td>
<select name="" id="">
<option value="">Забивание</option>
<option value="">Бутование</option>
<option value="">Точечное бетонирование</option>
<option value="">Свайный фундамент</option>
</select>
<span></span>
</td>
</tr>
<tr>
<td>
Щебень
</td>
<td>
<select name="" id="">
<option value="">Входит в стоимость</option>
<option value="">Заказывать самому</option>
</select>
<span></span>
</td>
<td>
<select name="" id="">
<option value="">Входит в стоимость</option>
<option value="">Заказывать самому</option>
</select>
<span></span>
</td>
<td>
<select name="" id="">
<option value="">Входит в стоимость</option>
<option value="">Заказывать самому</option>
</select>
<span></span>
</td>
</tr>
<tr>
<td>
Глубина установки столба
</td>
<td>
<select name="" id="">
<option value="">800</option>
<option value="">1000</option>
<option value="">1200</option>
<option value="">1500</option>
<option value="">1800</option>
<option value="">2000</option>
</select>
<span></span>
</td>
<td>
<select name="" id="">
<option value="">800</option>
<option value="">1000</option>
<option value="">1200</option>
<option value="">1500</option>
<option value="">1800</option>
<option value="">2000</option>
</select>
<span></span>
</td>
<td>
<select name="" id="">
<option value="">800</option>
<option value="">1000</option>
<option value="">1200</option>
<option value="">1500</option>
<option value="">1800</option>
<option value="">2000</option>
</select>
<span></span>
</td>
</tr>
    </table> <div class="compare-table-download"> <div class="btn btn-default">
Скачать pdf
</div>
</div> </div>

Скрипт ниже обрабатывает поля ввода, занося их значения в span, клонирует таблицу, скрывает/удаляет ненужные поля и отправляет получившуюся таблицу к php-обрабочику:

$('.compare-block').on('click', '.compare-table-download', function(){
$('.compare-block').find("select option:selected").each(function () {
$(this).parent().next('span').text($(this).text());
});

var data = "";
var $pdfCont = $('.compare-block').clone();

$pdfCont.find('input').each(function() {
if($(this).val().length != 0) {
$(this).next('span').text($(this).val());
}
})

$pdfCont.find('table').each(function() {
if($(this).css("display") == "none") {
$(this).remove();
}
})

$pdfCont.find('input').remove();
$pdfCont.find('select').remove();
$pdfCont.find('.compare-table-download').remove();
$pdfCont.find('span').show();


data = "pdfcont="+encodeURIComponent($pdfCont.prop("outerHTML"));
$.ajax({
url: '/pdf/save-request/index.php',
type : 'POST',
data: data,
success: function(data){
window.location.href = '/pdf/download-pdf/';
},
error: function(e){
console.log(e);
},
});
})

Copyright ©2022