Home » Jquery » javascript – Adding textbox value to HTML table on another page

javascript – Adding textbox value to HTML table on another page

Posted by: admin February 22, 2020 Leave a comment

Questions:

The code below checks if a checkbox is selected, and if so stores its name and value, so that it can be added to a table on the next page. How would I add to this code only to store the names and values if a textbox (numberofclickstextbox) contains a number above 1, and also to output this number to the table too (I have included a screenshot of where I would like this value to be output in the table as a red rectangle).

Any help would really be appreciated.

JQuery for collecting data (page 1):

$('#sales_order_form_button').click(function(){
        let table_info = [];
        $('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;
        });

JQuery for adding data to table (page 2):

function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\[').replace(/[\]]/, '\]');
            var regex = new RegExp('[\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.href);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, '    '));
        };

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

HTML of table on page 2:

<table id="output_table">
        <tr>
            <th>Name</th>
            <th>Value</th>
            <th>Number of Clicks</th>
        </tr>
        <tfoot>
            <tr>
                <th id="total" colspan="1">Total CPC:</th>
                <td id="sum1"></td>
            </tr>
    </tfoot>
    </table>

Screenshot of table producted on page 2

How to&Answer: