javascript - asp.net mvc 4でJavaスクリプトを使用して、郵送先住所を物理住所にコピーします

Question

プロジェクトの登録ページを作成しています。ユーザーは、郵送先住所と物理住所の 2 種類の住所を持つことができます。これらのアドレスが同じになる場合があります。郵送先住所フィールドを実際の住所フィールドにコピーするために 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>

javascript - asp.net mvc 4でJavaスクリプトを使用して、郵送先住所を物理住所にコピーします

1 に答える 1

Related

Reference