如何添加复选框ID并插入textarea？

Question

I'm Prasath and I'm new to AJAX. I am working on seat layout project, I find difficult to get seat fare and seat number at same time. Kindly some one help me to solve my problem. Here is my code

<div id="mydiv">
    <input type="checkbox" name="seat1" id="A1" value="250" />
    <br />
    <input type="checkbox" name="seat2" id="A2" value="250" />
    <br />
    <input type="checkbox" name="seat3" id="A3" value="300" />
    <br />
    <input type="checkbox" name="seat4" id="SL1" value="250" />
    <br />
    <input type="checkbox" name="seat5 " id="SL2"
        value="250" />
    <br />
    <input type="checkbox" name="seat6" id="SL3" value="300" />
    <br />
    <input type="checkbox" name="seat7 " id="SL4" value="300" />



    <textarea id="seats"></textarea>
    <textarea id="total_amount"></textarea>


</div>

I want result as if checkbox "Seatl, seat3 and seat7" are checked I want result as

<textarea id="seats">A1,A3,SL4</textarea>
<textarea id="total_amount">750</textarea>

Kindly help me to solve this. Thanks in advance.

Answer 1

You can do it just with plain javascript (no need of jQuery):

function myAudis(){
    var inputs = document.getElementById("mydiv").getElementsByTagName("input");
    var seats=[], total_amount=0, c=0;
    for(var i=0;i<inputs.length;i++){
        if(inputs[i].type!="checkbox"){continue;}
        if(inputs[i].checked){seats[c++]=inputs[i].id; total_amount+=parseInt(inputs[i].value);}
    }
    document.getElementById("seats").value=seats;
    document.getElementById("total_amount").value=total_amount;
}

You can call it like this:

<button type="button" onclick="myAudis()">Calculate</button>

Hope it helps..