asked on

modal and checkbox html5

I have modal and I also have a simple checkbox action. when the checkbox is checked, I want to create a <input type="text" value="selected value"> after event checked is completed.
When the checkbox is unchecked, it will remove the <input type="text" value="selected value">

Can you show me how to do that?

<form>
<div id="optionalArea">

</div>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                   <div class="row with-forms  margin-top-0">
                    <h4 class="headline margin-top-10 margin-bottom-10">Table</h4>
                       <button type="button" style="float:left;" class="btn btn-default" data-dismiss="modal">Close</button>
                    <table class="basic-table">
                        <tr>
                            <th>Description</th>
                            <th>Cost</th>
                            <th>Count</th>
                            <th>Total</th>
                            <th>Action</th>
                        </tr>
                        <tr>
                            <th colspan="3" style="background-color:white;text-align:right;color:black;vertical-align:central;">Sub Total:</th>
                            <th style="background-color:white;"><input type="text" value="0" id="subTotal" /></th>
                            <th style="background-color:white;"></th>
                        </tr>
                        @{
                            DomainController.Motorhome mh = new DomainController.Motorhome();
                            foreach (Domain.FleetFee item in mh.FleetFeeList("1", "Active"))
                            {                                 
                        <tr>                         
                        <td>@item.feeDescription</td>
                        <td>$@item.cost @item.typeUnit</td>
                        <td>
                            <input type="hidden" value="@item.cost" id="cost_@item.feeId" />
                            <input type="text" maxlength="2" 
                                   oninput="CalItemSubTotal('cost_@item.feeId','count_@item.feeId','subTotal_@item.feeId')" id="count_@item.feeId" 
                                   value="1" />
                        </td>
                        <td><input type="text" id="subTotal_@item.feeId" readonly /></td>
                        <td><input 
                                   type="checkbox" 
                                   id="itemSelect_@item.feeId"
                                   onclick="CalSubTotal('subTotal_@item.feeId','itemSelect_@item.feeId','count_@item.feeId')"
                                   />
                        </td>
                        </tr>
                        }
                        }
                    </table>
                </div>
             </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
<script>
    function CalItemSubTotal(cost, count, destination) {
        //alert(document.getElementById(count).value + ' ' + document.getElementById(cost).value);
        var costValue = parseFloat(document.getElementById(cost).value)
        var countValue = parseInt(document.getElementById(count).value);
        var total = parseFloat(costValue * countValue).toFixed(2);
        document.getElementById(destination).value = total;
        //alert("Total " + total + '  '  + costValue + ' ' + countValue);
    }
    function CalSubTotal(itemTotalValue, itemCheckBox, itemCountValue) {
        var itemValue = parseFloat(document.getElementById(itemTotalValue).value);
        if(document.getElementById(itemCheckBox).checked==true)
        {
            //alert("Checked: " + itemValue);
            document.getElementById("subTotal").value = parseFloat(parseFloat(document.getElementById("subTotal").value) + itemValue).toFixed(2);
            document.getElementById(itemCountValue).readOnly = true;
            document.getElementById(itemCountValue).style.backgroundColor = "#DCDCDC";

            document.getElementById("optionalArea").innerHTML = document.getElementById("optionalArea").innerHTML +
            (document.getElementById(itemTotalValue).value + " x " + document.getElementById(itemCountValue).value) + "<br>";
        }
        else
        {
            //alert("Unchecked: " + itemValue);
            document.getElementById("subTotal").value = parseFloat(parseFloat(document.getElementById("subTotal").value) - itemValue).toFixed(2);
            document.getElementById(itemCountValue).readOnly = false;
            document.getElementById(itemCountValue).style.backgroundColor = "white";
        }
        document.getElementById("subTotal").value = parseFloat(document.getElementById("subTotal").value).toFixed(2);
    }
</script>
</form>

Open in new window

Julian Hansen

Sample HTML

<input type="checkbox" id="makeinput" name="test" value="Check Box Value" class="make-input"> Click
<div id="target"></div>

Open in new window

JavaScript

<script>
var target = document.getElementById('target');
document.getElementById('makeinput').addEventListener('change', function() {
  if (!this.checked) {
    target.innerHTML = '';
  }
  else {
    var inp = document.createElement('input')
    inp.type = 'text';
    inp.value = this.value;
    target.appendChild(inp);
  }
});
</script>

Open in new window

You can see it working here

ASKER CERTIFIED SOLUTION

Zakaria Acharki

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ITsolutionWizard

ASKER

juian

your codes won't work to me because I will have more than 1 check box. when the one of the check boxes is unchecked
only one row of record will be removed, not the whole things

Julian Hansen

Can you show us your rendered code - Browser HTML. It will be easier to modify that.