2016-09-15 7 views
0

のチェックボックスの選択に基づいてテキストボックスを移入しますは私が次のチェックボックスを持っているhtmlファイルを設定しようとしていますHTML

ウェブサイトには大きなテキストボックスがあります。このテキストボックスに請求先住所をチェックすると、テキストボックスにテキスト "請求先住所:"が表示されます。口座番号を確認した場合、テキストボックスの「請求先住所」の下の行に「口座番号:」と表示されます。

私はこのウェブサイト上の別のスタックオーバーフローの問い合わせに基づいて私のコードを書いた:

Checkbox Populate Form Fields

を私は上記で説明し、望ましい結果を得るために、このコードを取るにはどうすればよいですか?

<html lang="en" > 
<head> 

    <script src="jStorage/json2.min.js"></script> 
    <script src="jStorage/jquery-1.12.2.min.js"></script> 
    <script src="jStorage/jstorage.min.js"></script> 


<body> 

I have a billing address: <input type="checkbox" id="checkbox1" value='Billing Address: ' /> 
<br> 
I have an account number: <input type="checkbox" id="checkbox2" value='account number:' /> 
<br> 

<font size=2><table border=0 cellspacing=0 cellpadding=0 width=100%><tr> 
<td width='40%' valign='center' align='right'>Enter Remarks in free format: </td> 
<td align='center' width=5%></td> 
<td align='left'>&nbsp; 
<td align='left'><textarea id='remarks' rows='10' cols='50'</textarea>  
</td> 
</tr> 

<script> 
$(document).ready(function(){ 
$("#checkbox1").change(function() { 
if(this.checked) { 
    //alert("checked "); 
    //get the values of the filled fields 
    $name = $("#checkbox1").val(); 
    $phone = $("#checkbox2").val(); 
    $total = $name+$phone; 
    //console.log("name"); 
    // then add those values to your billing infor window feilds 

    $("#remarks").val($total); 
    //$("#remarks").val($phone); 

    // then form will be automatically filled .. 

    } 
    else{ 
    $('#remarks').val(''); 
    //$("#phone_billing").val(''); 
    } 
}); 
}); 
</script> 

</body> 
</html> 
+1

1つのテキストエリアで請求先住所とアカウント番号の両方を取得したいのですか?これはあなたが思っているよりもやっかいです。私が(ユーザーとして)テキストエリアを入力してから、「請求先住所」チェックボックスをチェックするとどうなりますか?テキストはどこに表示されますか?次に、テキストレファレンスを追加/編集します。次に、[アカウント番号]チェックボックスをオンにします。次に、テキストエリアを追加/編集します。テキストエリアから「アカウント番号」という単語を手動で削除するとどうなりますか? –

+1

フォームが処理されるときに結合する複数のフィールドを持つ方がはるかに簡単です(あなただけでなくユーザーも)。人は複数入力フォームに慣れています。 – SchattenJager

答えて

0

は、あなたがこのような何かをしたいですか:添付

は、私がこれまでしているコードのですか?チェックボックスがオンになっている場合は、テキストボックスにその値が表示されます。

<html lang="en" > 


    <body> 

    I have a billing address: <input type="checkbox" id="checkbox1" value='Billing Address: ' /> 
    <br> 
    I have an account number: <input type="checkbox" id="checkbox2" value='account number:' /> 
    <br> 

    <font size=2><table border=0 cellspacing=0 cellpadding=0 width=100%><tr> 
    <td width='40%' valign='center' align='right'>Enter Remarks in free format: </td> 
    <td align='center' width=5%></td> 
    <td align='left'>&nbsp; 
    <td align='left'> 

      <textarea id='remarks' rows='10' cols='50'></textarea>  
    </td> 
    </tr> 


     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 


    <script> 
    $(document).ready(function(){ 

      $("[type=checkbox]").change(function() { 

       var msg = ""; 

       $('input:checked').each(function(i,v){ 
        msg += $(v).val() + "\n"; 
       }); 


       $("#remarks").val(msg); 
      }); 
    }); 
    </script> 

    </body> 
    </html> 
関連する問題