Changing input from checkbox to button

Question

I have a jsp file which results in this HTML:

<form id="paymentForm" action="submit_payment.form" method="post">
    <div class="notvalid">
    </div>
    <p>To pay , select the policy from the list and click Proceed.</p>

    <div id="errContract"></div>

    <table id="tblPayment" class="payment-tbl">
        <thead>
            <tr>
                <th class="col-1 ppl-head"></th>
                <th id="txtPolicy_Number" class="col-2 ppl-head lft-bd-all">
                    Policy Number
                </th>
                <th id="txtDescription" class="col-3 ppl-head lft-bd-all">
                    Description
                </th>
                <th id="txtStatus" class="col-4 ppl-head lft-bd-all hide-mob">
                    Status
                </th>
                <th id="txtCurrent_Premium" class="col-5 ppl-head lft-bd-all hide-mob">
                    Current Premium
                </th>
                <th id="txtTotal_Outstanding" class="col-6 ppl-head lft-bd-all">
                    Amount Outstanding
                </th>
                <th id="txtCollection_Day" class="col-7 ppl-head lft-bd-all hide-mob">
                    Collection Day
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="row-odd-bg-col row-border">
                
                <td class="table-pad">
                    <div class="check-box">
                        <input value="Proceed" id="chkPayment_12345678" type="button" name="paymentList[0].selectedForPayment" )="">
                        <label for="chkPayment_12345678"><span></span>
                            <div></div>
                        </label>
                    </div>
                </td>

                <td id="txtContract_Number_12345678" class="lft-bd-all table-pad">
                    <p class="">12345678</p>
                    <input id="txtPolicy_0" name="paymentList[0].contractNumber" type="hidden" value="12345678">
                </td>

                <td id="txtDescription_12345678" class="lft-bd-all table-pad">
                    <p class="">Income Protection Plan</p>
                </td>

                <td id="txtStatus_12345678" class="lft-bd-all table-pad hide-mob">
                    <p class="">In Force</p>
                </td>

                <td id="txtCurrent_Premium_12345678" class="lft-bd-all table-pad hide-mob">
                    <p class="">
                        <span id="Current_Premium_12345678">
                            €1,574.40
                        </span>
                        <span id="Current_Frequency_12345678">
                            Annual
                        </span>
                    </p>
                </td>

                <td id="txtOutstanding_12345678" class="lft-bd-all table-pad">
                    <p class="">
                        €1,574.40
                    </p>
                </td>

                <td id="txtCollection_Day_12345678" class="lft-bd-all table-pad hide-mob">
                    <p class="">
                        15</p>
                </td>
            </tr>
            
            <tr class="row-even-bg-col row-border">

                <td class="table-pad">
                    <div class="check-box">
                        <input value="Proceed" id="chkPayment_98765432" type="button" name="paymentList[1].selectedForPayment" )="">
                        <label for="chkPayment_98765432"><span></span>
                            <div></div>
                        </label>
                    </div>
                </td>

                <td id="txtContract_Number_98765432" class="lft-bd-all table-pad">
                    <p class="">98765432</p>
                    <input id="txtPolicy_1" name="paymentsList[1].contractNumber" type="hidden" value="98765432">
                </td>

                <td id="txtDescription_98765432" class="lft-bd-all table-pad">
                    <p class="">Income Protection Plan</p>
                </td>

                <td id="txtStatus_98765432" class="lft-bd-all table-pad hide-mob">
                    <p class="">In Force</p>
                </td>

                <td id="txtCurrent_Premium_98765432" class="lft-bd-all table-pad hide-mob">
                    <p class="">
                            <span id="Current_Premium_98765432">
                                €841.01
                            </span>
                            <span id="Current_Frequency_98765432">
                                Annual
                            </span>
                    </p>
                </td>

                <td id="txtOutstanding_98765432" class="lft-bd-all table-pad">
                    <p class="">
                        €841.01
                    </p>
                </td>

                <td id="txtCollection_Day_98765432" class="lft-bd-all table-pad hide-mob">
                    <p class="">
                        23</p>
                </td>

            </tr>
        </tbody>
    </table>
</form>

This is from my payment.js:

jQuery(document).ready(function () {
    'use strict';

    jQuery('input:radio[name="agreeToMandate"]').prop('checked', false);

    jQuery('input:checkbox[name^="paymentList"]').on('change', function () {

        var selected = [];
        jQuery.each(jQuery('input[name^="paymentList"]:checked'), function(){
            selected.push(jQuery(this).attr('id'));
        });

        if(selected.length>0) {
            var total = getTotalAmount(selected);
            jQuery('#fldTotal_Amount').text(total);
            jQuery('#divSubmit').css('display', 'block');
        }else {
            jQuery('#divSubmit').css('display', 'none');
        }
    });

    jQuery('#paymentForm').submit(function (event) {
        if (!jQuery('input:checkbox[name^="paymentList"]:checked').val()) {
            showValidationError('Contract','Please select a contract');
            return false;
        }
        return true;
    });

    jQuery('#btnCancel').click(function () {
        window.location.href = 'list_payment.form';
        return false;
    });

});

function getTotalAmount(selected) {
    var total = 0;
    for (var index = 0; index < selected.length; index++) {
        var contractNumber = selected[index].substr(11);
        var selId = '#txtAmount' + contractNumber;
        var currency = jQuery(selId).text().trim();
        var value = Number(currency.replace(/[^0-9\.]+/g,""));
        total += parseFloat(value);
    }
    return total.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
}

function toggleField(field){

    if (jQuery(field).prop('checked')){
        jQuery(field).prop('unchecked');
    }else{
        jQuery(field).prop('checked');
    }

}

Currently the Proceed button is hidden until at least one checkbox is checked. It then appears at the bottom. This is the checkbox code:

<div class="check-box">
    <input id="chkPayment_<c:out value="${entry.contractNumber}"/>" type="checkbox"
           name="paymentList<c:out value="[${pStatus.index}]"/>.selectedForPayment"
           onclick(togglefield);)/>
    <label for="chkPayment_<c:out value="${entry.contractNumber}"/>"><span></span>

        <div></div>
    </label>
</div>

When a box is checked, the outstanding payment for that row is selected for payment by setting selectedForPayment on the Payment Java object. If proceed is clicked, that abmount is sent to submit_payment.form. I want to change the checkbox to a button. One should appear on each row and if a button is clicked, the outstanding amount corresponding to that row should be selected and sent for payment.

If I changethe input to <input value="Proceed" id="chkPayment_<c:out value="${entry.contractNumber}"/>" type="button" name="paymentList<c:out value="[${pStatus.index}]"/>.selectedForPayment")/> and this section of payment.js as follows:

jQuery('input:button[name^="paymentList"]').click(function () {

        var selected = [];

        selected.push(jQuery(this).attr('id'));

        if(selected.length>0) {
            var total = getTotalAmount(selected);
            jQuery('#fldTotal_Amount').text(total);
            jQuery('#divSubmit').css('display', 'block');
        }else {
            jQuery('#divSubmit').css('display', 'none');
        }
    });

    jQuery('#paymentForm').submit(function (event) {
        return true;
    });

the Total Payment label updates to show the correct amount but the outstanding payment isn't selected and the button doesn't attempt to submit the payment. What am I doing wrong?

Please provide a proper minimal reproducible example. Show us the resulting HTML code, not JSP code the outcome of which we can't easily reproduce. — C3roe
– C3roe, Commented Nov 13 at 8:53

Thakor Premila · Accepted Answer · 2025-11-13 09:08:58Z

-2

function changeInput() {
    var checkbox = document.getElementById('myCheckbox');
    
    // Check if checkbox is checked, replace with a button
    if (checkbox.checked) {
        var button = document.createElement('button');
        button.innerHTML = "Click Me";
        button.type = "button";  // To ensure it's a button element
        button.onclick = function() {
            alert('Button clicked!');
        };
        
        // Replace the checkbox with the button
        checkbox.parentNode.replaceChild(button, checkbox);
    }
}

answered Nov 13 at 9:08

Thakor Premila

1

New contributor

Sign up to request clarification or add additional context in comments.

3 Comments

Community Nov 13 at 9:35

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

mplungjan Nov 13 at 10:09

Also this code will replace the checkbox only when it is checked. OP wants all checkboxes to be buttons retaining the checked action when clicked

tacoshy Nov 13 at 16:23

This looks like an AI-generated code by it quality. It would work somehow but not cleanly or to modern standards

Collectives™ on Stack Overflow

Changing input from checkbox to button

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related