I am creating a registration page for a project. The users can have two types of addresses: mailing and physical. There are instances when these addresses will be the same. I am trying to create a checkbox that calls a java script to copy the mailing address fields into the physical address fields. I used this reference to create the html code below. The code is not working and I cannot determine why. Any help will be appreciated.
<!--Mailing Address-->
<div class="form-group">
<br/><h3>@Html.LabelFor(m => m.Mailing_Address)</h3>
</div>
<div class="form-group">
<!--Mailing location name-->
@Html.LabelFor(m => m.Mailing_Address.name, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Mailing_Address.name, new { @name = "M_name", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Mailing street address-->
@Html.LabelFor(m => m.Mailing_Address.street_address, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Mailing_Address.street_address, new { @name = "M_street_address", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Mailing Suite-->
@Html.LabelFor(m => m.Mailing_Address.suite_number, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Mailing_Address.suite_number, new { @name = "M_suite_number", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Mailing City-->
@Html.LabelFor(m => m.Mailing_Address.city, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Mailing_Address.city, new { @name = "M_city", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Mailing State-->
@Html.LabelFor(m => m.Mailing_Address.state, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Mailing_Address.state, new { @name = "M_state", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Mailing Zip-->
@Html.LabelFor(m => m.Mailing_Address.zip_code, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Mailing_Address.zip_code, new { @name = "M_zip", @class = "form-control" })
</div>
</div>
<!--Script to copy mailing address into physical address-->
<script type="text/javascript">
function copyMailing(f)
f.elements['P_name'].value = document.getElementById['M_name'].value;
f.elements['P_street_address'].value = document.getElementById['M_street_address'].value;
f.elements['P_suite_number'].value = document.getElementById['M_suite_number'].value;
f.elements['P_city'].value = document.getElementById['M_city'].value;
f.elements['P_state'].value = document.getElementById['M_state'].value;
f.elements['P_zip'].value = document.getElementById['M_zip'].value;
}
</script>
<!--Physical Address-->
<div class="form-group">
<br/><h3>@Html.LabelFor(m => m.Physical_Address)</h3>
</div>
<div class="form-group">
<label>
Same as Mailing @Html.CheckBox("Same as Mailing Address", new { @onclick = "if (this.checked) copyMailing(this.form)", @class = "checkbox" }) <!--String passed in is used for both value and id of checkbox-->
</label>
</div>
<div class="form-group">
<!--Physical location name-->
@Html.LabelFor(m => m.Physical_Address.name, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Physical_Address.name, new { @name = "P_name", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Physical street address-->
@Html.LabelFor(m => m.Physical_Address.street_address, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Physical_Address.street_address, new { @name = "P_street_address", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Physical Suite-->
@Html.LabelFor(m => m.Physical_Address.suite_number, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Physical_Address.suite_number, new { @name = "P_suite_number", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Physical City-->
@Html.LabelFor(m => m.Physical_Address.city, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Physical_Address.city, new { @name = "P_city", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Physical State-->
@Html.LabelFor(m => m.Physical_Address.state, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Physical_Address.state, new { @name = "P_state", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Physical Zip-->
@Html.LabelFor(m => m.Physical_Address.zip_code, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Physical_Address.zip_code, new { @name = "P_zip", @class = "form-control" })
</div>
</div>
I should mention that I also tried this version of the script:
<!--Script to copy mailing address into physical address-->
<script type="text/javascript">
function copyMailing() {
document.getElementById("P_name").innerHTML = document.getElementById("M_name").innerHTML;
document.getElementById("P_street_address").innerHTML = document.getElementById("M_street_address").innerHTML;
document.getElementById("P_suite_number").innerHTML = document.getElementById("M_suite_number").innerHTML;
document.getElementById("P_city").innerHTML = document.getElementById("M_city").innerHTML;
document.getElementById("P_state").innerHTML = document.getElementById("M_state").innerHTML;
document.getElementById("P_zip").innerHTML = document.getElementById("M_zip").innerHTML;
}
</script>
Response to first answer: Thanks for the suggested fix. Here is my edited code. Unfortunately, it still does not work. Any other suggestions?
<!--Mailing Address-->
<div class="form-group">
<br/><h3>@Html.LabelFor(m => m.Mailing_Address)</h3>
</div>
<div class="form-group">
<!--Mailing location name-->
@Html.LabelFor(m => m.Mailing_Address.name, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Mailing_Address.name, new { @id = "M_name", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Mailing street address-->
@Html.LabelFor(m => m.Mailing_Address.street_address, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Mailing_Address.street_address, new { @id = "M_street_address", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Mailing Suite-->
@Html.LabelFor(m => m.Mailing_Address.suite_number, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Mailing_Address.suite_number, new { @id = "M_suite_number", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Mailing City-->
@Html.LabelFor(m => m.Mailing_Address.city, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Mailing_Address.city, new { @id = "M_city", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Mailing State-->
@Html.LabelFor(m => m.Mailing_Address.state, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Mailing_Address.state, new { @id = "M_state", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Mailing Zip-->
@Html.LabelFor(m => m.Mailing_Address.zip_code, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Mailing_Address.zip_code, new { @id = "M_zip", @class = "form-control" })
</div>
</div>
<!--Physical Address-->
<div class="form-group">
<br/><h3>@Html.LabelFor(m => m.Physical_Address)</h3>
</div>
<div class="form-group">
<label>
Same as Mailing @Html.CheckBox("Same as Mailing Address", new { @onclick = "if (this.checked) copyMailing(this.form)", @class = "checkbox" }) <!--String passed in is used for both value and id of checkbox-->
</label>
</div>
<div class="form-group">
<!--Physical location name-->
@Html.LabelFor(m => m.Physical_Address.name, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Physical_Address.name, new { @id = "P_name", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Physical street address-->
@Html.LabelFor(m => m.Physical_Address.street_address, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Physical_Address.street_address, new { @id = "P_street_address", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Physical Suite-->
@Html.LabelFor(m => m.Physical_Address.suite_number, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Physical_Address.suite_number, new { @id = "P_suite_number", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Physical City-->
@Html.LabelFor(m => m.Physical_Address.city, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Physical_Address.city, new { @id = "P_city", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Physical State-->
@Html.LabelFor(m => m.Physical_Address.state, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Physical_Address.state, new { @id = "P_state", @class = "form-control" })
</div>
</div>
<div class="form-group">
<!--Physical Zip-->
@Html.LabelFor(m => m.Physical_Address.zip_code, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Physical_Address.zip_code, new { @id = "P_zip", @class = "form-control" })
</div>
</div>
<!--Script to copy mailing address into physical address-->
<script type="text/javascript">
function copyMailing(f) {
f.elements['P_name'].value = document.getElementById['M_name'].value;
f.elements['P_street_address'].value = document.getElementById['M_street_address'].value;
f.elements['P_suite_number'].value = document.getElementById['M_suite_number'].value;
f.elements['P_city'].value = document.getElementById['M_city'].value;
f.elements['P_state'].value = document.getElementById['M_state'].value;
f.elements['P_zip'].value = document.getElementById['M_zip'].value;
}
</script>
