-1

我正在为一个项目创建一个注册页面。用户可以有两种类型的地址：邮寄地址和物理地址。在某些情况下，这些地址将相同。我正在尝试创建一个复选框，该复选框调用 java 脚本将邮寄地址字段复制到物理地址字段中。我使用这个参考来创建下面的 html 代码。该代码不起作用，我无法确定原因。任何帮助将不胜感激。

<!--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>

我应该提到我也尝试了这个版本的脚本：

<!--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>

对第一个答案的回应：感谢建议的修复。这是我编辑的代码。不幸的是，它仍然不起作用。还有其他建议吗？

<!--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>
4

1 回答 1

-1

谢谢您的帮助！该代码现在正在运行。我做了一个新的“答案”来包含工作代码，如下：

<!--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 = f.elements['M_name'].value;
    f.elements['P_street_address'].value = f.elements['M_street_address'].value;
    f.elements['P_suite_number'].value = f.elements['M_suite_number'].value;
    f.elements['P_city'].value = f.elements['M_city'].value;
    f.elements['P_state'].value = f.elements['M_state'].value;
    f.elements['P_zip'].value = f.elements['M_zip'].value;

}
</script>
于 2014-12-02T19:25:18.523 回答