2017-10-13 13 views
0

I配送先住所のフォームに入力された請求先住所を複製するために、次のコードを持っている:は、MVC使用して請求先住所に配送先住所をコピー

私は値が一時アドレスのテキストボックスに渡されていないチェックボックスをクリックすると

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

スクリプト:

<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 は、最初のイメージのチェックボックスは、値がTEXに渡されていない真の確認しましたTBOX

Empty ## Heading ##

私は本当にすべてが助けに感謝します。

+0

あなたのコード:これは、リアクトVueののように...私はこれが私の簡易版は、テストのために使用されている

以下

を役に立てば幸い、DOMは、角などのJavaScriptフレームワークをレンダリングで発生することができます –

+0

私の側にある@CarstenLøvboAndersenは空のテキストボックスだけで動作していません –

+0

それはなぜか分かりませんが、mvcから自動生成されたhtmlと何か関係があります。 @ Html.TextBoxFor(model =>)を使用している場合、テキストボックスに渡されない値@Merb()を使用している場合、自動生成されたhtml –

答えて

0

私はこれを単純化されたバージョンを使ってテストしました。これはあなたの環境にこれが実行されていると推測しています。おそらく入力のHTMLがidsが適用されない他のJSがこれらの入力をDOMから取り除いて置き換えているかもしれません。それが起こっている場合、jqueryはもはやDOMに存在しない要素で動作します。

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<div> 
 
\t <lable for="txtPAddress1">Address 1</lable> 
 
\t <input id="txtPAddress1" type="text"> 
 
</div> 
 

 
<input id="check-1" type="checkbox"> 
 

 
<div> 
 
\t <lable for="txtTAddress1">Address 1</lable> 
 
\t <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>

+0

を表示します。 –

関連する問題