Ad

How To Use A 'checkbox' To Update Present Address To Same As Permanent Address

- 1 answer

Often when creating a form on a web page, I need our customers to fill out a field such as a permanent address, as well as a present address( when checked check box then present address fill automatically). Instead of having our customers fill out the form twice,I can use JavaScript to copy the form's data from one field to another.

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()  

<div>


<div class="well">
                    <b>Parmanent Address </b>
                </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-lg-12">
                                    @Html.LabelFor(model => model.ParFirstAddr, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.ParFirstAddr, new { htmlAttributes = new {@class = "form-control", autocomplete = "off", @placeholder = "Enter Address" } })
                                </div>
                            </div>
                        </div>                
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-md-12">
                                    @Html.LabelFor(model => model.ParFirstPO, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.ParFirstPO, new { htmlAttributes = new { @class = "form-control", autocomplete = "off", @placeholder = "Enter P.O." } })
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-md-12">
                                    @Html.LabelFor(model => model.ParFirstPS, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.ParFirstPS, new { htmlAttributes = new { @class = "form-control", autocomplete = "off", @placeholder = "Enter P.S." } })
                                </div>
                            </div>
                        </div>
                    </div>

    <br />
                    <div class="well">
                        <b>Present Address </b>
                    </div>

                    <input type="checkbox" name="filladdress" onclick="fillAddress()" /> Present address same as parmanent address.<br />

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-lg-12">
                                    @Html.LabelFor(model => model.PreFirstAddr, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.PreFirstAddr, new { htmlAttributes = new {@id= "PreFirstAddr", @class = "form-control", autocomplete = "off", @placeholder = "Enter Address", style = "width: 5000px" } })
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-md-12">
                                    @Html.LabelFor(model => model.PreFirstPO, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.PreFirstPO, new { htmlAttributes = new { @class = "form-control", autocomplete = "off", @placeholder = "Enter P.O." } })
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-md-12">
                                    @Html.LabelFor(model => model.PreFirstPS, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.PreFirstPS, new { htmlAttributes = new { @class = "form-control", autocomplete = "off", @placeholder = "Enter P.S." } })
                                </div>
                            </div>
                        </div>
                    </div>
            <div class="form-group">
                        <div class="col-md-offset-5 col-md-12">
                            <input type="submit" value="Submit" class="btn btn-success" />
                        </div>
                    </div>
     </div>

}

<script>
function fillAddress()
    {
        if (filladdress.checked == true)
        {
            var addr = document.getElementById("ParFirstAddr").value;
            var addrpo = document.getElementById("ParFirstPO").value;
            var addrps = document.getElementById("ParFirstPS").value;       

           
            var copyaddr = addr;
            var copyaddrpo = addrpo;
            var copyaddrps = addrps;
            
            document.getElementById("PreFirstAddr").value = copyaddr;
            document.getElementById("PreFirstPO").value = copyaddrpo;
            document.getElementById("PreFirstPS").value = copyaddrps;
        }
        else if (filladdress.checked == false)
        {
            document.getElementById("PreFirstAddr").value = '';
            document.getElementById("PreFirstPO").value = '';
            document.getElementById("PreFirstPS").value = '';
        }
    }
</script>

Ad

Answer

You can try this,

function fillAddress(){
    if ($(this).attr('checked')) { 
                $("#PreFirstAddr").val($("#ParFirstAddr").val());
                $("#PreFirstPO").val($("#ParFirstPO").val());
                $("#PreFirstPS").val($("#ParFirstPS").val());                         
    }
    else {
        $("#PreFirstAddr").val('');
        $("#PreFirstPO").val('');
        $("#PreFirstPS").val('');           
    }
}

It's not working then you can use setTimeout(function (){ },100)

Ad
source: stackoverflow.com
Ad