copy the shipping address to billing address using mvc

Question

I have the following code to duplicate the entered Billing Address into the Shipping Address form:

When i click the checkbox the value not passed to the Temporary Address textbox

<form id="form" action="">
                            <section>
                                <div id="row">


                                    <h5 class="with-border">Permanent Address </h5>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <fieldset class="form-group">
                                                <label class="form-label semibold control-label">Address line 1</label>
                                                @Html.TextBoxFor(model => model.pharmaCompanyDivision.PAddress1, new { @class = "form-control", @id = "txtPAddress1", placeholder = "Address Line1" })
                                            </fieldset>
                                        </div>
                                        <div class="col-lg-4">
                                            <fieldset class="form-group">
                                                <label class="form-label semibold control-label">Address Line2</label>
                                                @Html.TextBoxFor(model => model.pharmaCompanyDivision.PAddress2, new { @class = "form-control", @id = "txtPAddress2", placeholder = "Address Line2" })
                                            </fieldset>

                                    </div><!--.row-->




                                    <div class="checkbox">
                                        <input type="checkbox" id="check-1">
                                        <label for="check-1">Billing Address is same as Shipping Address.</label>
                                    </div>

                                    <h5 class="with-border">Temporary Address </h5>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <fieldset class="form-group">
                                                <label class="form-label semibold control-label">Address line 1</label>
                                                @Html.TextBoxFor(model => model.pharmaCompanyDivision.TAddress1, new { @class = "form-control", @id = "txtTAddress1", placeholder = "Address Line1" })
                                            </fieldset>
                                        </div>
                                        <div class="col-lg-4">
                                            <fieldset class="form-group">
                                                <label class="form-label semibold control-label">Address Line2</label>
                                                @Html.TextBoxFor(model => model.pharmaCompanyDivision.TAddress2, new { @class = "form-control", @id = "txtTAddress2", placeholder = "Address Line2" })
                                            </fieldset>
                                        </div>

                                    </div><!--.row-->

                            </section>
                        </form>

Scripts:

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('input:checkbox[id*=check-1]').change(function () {
            if ($(this).is(':checked')) {
                $('input:text[id*=txtTAddress1]').val($('input:text[id*=txtPAddress1]').val());
                $('input:text[id*=txtTAddress2]').val($('input:text[id*=txtPAddress2]').val());
            }
            else {
                $('input:text[id*=txtTAddress1]').val('');
                $('input:text[id*=txtTAddress2]').val('');
            }
        });
    });


</script>

First image checkbox checked true the value not passed to the textbox

I really appreciate any helps.

Answer 1

I tested this using a simplified version and it works so I would guess that there is something with your environment that this is running in. Perhaps the HTML for the inputs are not being rendered as expected such as the ids not being applied, or perhaps some other JS is removing these inputs from the DOM and replacing them. If that is happening then the jquery would be working with an element that no longer exists on the DOM. This can happen with DOM rendering JavaScript frame works such as Angular, React, Vue and so on... I hope this helps

Below is my simplified version used for testing:

 <!DOCTYPE html> <html> <body> <div> <lable for="txtPAddress1">Address 1</lable> <input id="txtPAddress1" type="text"> </div> <input id="check-1" type="checkbox"> <div> <lable for="txtTAddress1">Address 1</lable> <input id="txtTAddress1" type="text"> </div> <script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('input:checkbox[id*=check-1]').change(function () { if ($(this).is(':checked')) { $('input:text[id*=txtTAddress1]').val($('input:text[id*=txtPAddress1]').val()); $('input:text[id*=txtTAddress2]').val($('input:text[id*=txtPAddress2]').val()); } else { $('input:text[id*=txtTAddress1]').val(''); $('input:text[id*=txtTAddress2]').val(''); } }); }); </script> </body> </html>