CODEWITHSUNDEEP
javascriptjqueryhtmlvariables
jms1980
jms1980

Reputation: 1075

populating text box based on checkbox selections in html

I am trying to set up a html file in which I have the following checkboxes:

() I have a billing address: () I have an account number:

The website will have a large text box. In this text box if I check on billing address I should have the text "billing address:" appear in the text box. If I also check on account number "account number:" should appear in the line below "billing address" in the text box.

I wrote my code based on another stack overflow inquiry on this website:

Checkbox Populate Form Fields

How do I take this code to get the desired result that I explained above?

Attached is the code I have so far:

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

Upvotes: 0

Views: 1296

Answers (1)

Darin Cardin
Darin Cardin

Reputation: 657

Do you want something like this? it will show(in the textbox) the value of whatever checkbox is checked. 

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

Upvotes: 1

Related Questions