Заполнение таблицы HTML на основе флажков

Question

У меня есть несколько флажков на странице HTML, и я хотел бы иметь возможность заполнять таблицу на второй странице HTML в зависимости от того, какие флажки были нажаты.

В качестве основы c пример, здесь div, содержащий 2 из флажков. Мне бы хотелось, чтобы, если, скажем, awareness_checkbox был отмечен, слово «Осведомленность» и его значение (0,01 CP C) были бы добавлены в таблицу на моей второй странице HTML.

Как будет лучшим способом go об этом? Мое намерение состоит в том, чтобы иметь кнопку HTML, которая ссылается на вторую страницу (назовем ее 'page2. html'), чтобы при ее нажатии каждый флажок, отмеченный на странице, имел свой ярлык и соответствующее значение. добавлен в таблицу, которая появится на второй странице.

Любая помощь будет принята с благодарностью.

<div class="campaignstrategy">
    <h1>1. Campaign Strategy</h1>
        <input type="checkbox" name="awareness" id="awareness_checkbox" value="0.01">Awareness<br>
        <input type="checkbox" name="directresponse" id="directresponse_checkbox" value="0.01">Direct Response<br>
</div>

Answer 1

Примечание

хорошо, поэтому я заново сделал весь код и протестировал локально на chrome, просто сохраните оба файла в одной директории и затем откройте страницу 1.. html в chrome.

Извлечения кода - Страница 1

Назначьте пользовательское действие кнопке ввода, при этом будут проверены все флажки типа ввода,

, затем будет видно, действительно ли проверяется, если проверено, то он добавит запись в переменную table_info, после проверки всех входных данных

затем преобразует объект javascript в строку json, затем мы преобразуем это json в строку в кодировке base64.

затем мы просматриваем файл page2. html и в URL передаем ключ с именем "table_data", а его значением является строка в кодировке base64.

$('#next_page_button').click(function(){
    let table_info = [];
    $('.campaignstrategy input[type=checkbox]').each(
        function(index, value){
        if($(this).is(':checked')){
            table_info.push(
                {
                    name: $(this).attr('name'),
                    value: $(this).attr('value'),
                }
            );
        }
    });
    let base64str=btoa(JSON.stringify(table_info));

    window.location = "page2.html?table_data=" + base64str;
});

Извлечения кода - Страница 2

Когда эта страница загружается в браузер, следующий скрипт будет проверять ключи запроса, в этом случае мы ищем 'table_data' ключ.

это будет выполнено вспомогательной функцией Ion (подробности см. в разделе «Pastbin», опущен для краткости ответа)

как только мы получим данные, мы расшифруем их с base64 до json, затем с помощью функции json .parse мы воссоздадим javascript объект.

после создания объекта мы будем l oop через массив, помните, что объект javascript, который мы декодируем, является массивом словарей,

[{'name':'awareness','value':'0.01'}] как видите, у него есть имя флажка и его связанное значение.

затем мы создаем строку таблицы и добавляем имя и значение в строку таблицы внутри элемента данных таблицы, по одному для каждого имени и значения .

// actual code
let table_data = getUrlParameter('table_data');
let data_from_page_1 = JSON.parse(atob(table_data));

for(let i=0;i<data_from_page_1.length;i++){
    let row = $("<tr></tr>");
    let recordName = $("<td></td>").text(data_from_page_1[i].name);
    let recordValue = $("<td></td>").text(data_from_page_1[i].value);
    row.append(recordName, recordValue);
    $('#output_table').append(row);
}

Примеры

Страница 1

Страница 2

Инструкции

сохранить содержимое этого файла в файл с именем page1. html Кодовая ссылка для страницы 1

сохранить содержимое этого файла в файл с именем page2. html Code Link For Page 2