CODEWITHSUNDEEP
javascriptajax
user2897328
user2897328

Reputation: 101

trouble in getting multiple values in one text box

i have four boxs and i want to get these values in one text if i click on one box then one value in text if i click on two text box text get two values also i want to separate the values with comma . 

<li><a href="javascript:void(0)"  onclick="check_stalls('A-14')"  id="A-14">A-14</a></li>
    <li ><a href="javascript:void(0)" onclick="check_stalls('A-13')" id="A-13">A-13</a></li>
    <li ><a href="javascript:void(0)" onclick="check_stalls('A-12')" id="A-12">A-12</a></li>
    <li ><a href="javascript:void(0)" onclick="check_stalls('A-11')" id="A-11">A-11</a></li>

<input type="text" name="selected_stals" id="selected_stals" />

function check_stalls(stalno)
{
    alert(stalno);

    document.getElementById(stalno).style.backgroundColor = "#FF0";

    var textbox = document.getElementsByName("selected_stals")[0];
var checkboxes = stalno;

alert(checkboxes);
for (var i = 0; i < checkboxes.length; i++) {
    var checkbox = checkboxes[i];
    checkbox.onclick = (function(chk){
        return function() {
            var value = "";
            for (var j = 0; j < checkboxes.length; j++) {
                if (checkboxes[j].checked) {
                    if (value === "") {
                        value += checkboxes[j].value;
                    } else {
                        value += "," + checkboxes[j].value;
                    }
                }
            }
            textbox.value = value;
        }
    })(textbox);
}  


}

I try this like check boxs but its not work ...

Upvotes: 0

Views: 717

Answers (2)

Santiago
Santiago

Reputation: 56

HTML

<ul><li><a href="#"  id="A-14">A-14</a></li>
    <li ><a href="#" id="A-13">A-13</a></li>
    <li ><a href="#" id="A-12">A-12</a></li>
    <li ><a href="#" id="A-11">A-11</a></li></ul>

<input type="text" name="selected_stals" id="selected_stals" />

JS (jquery)

$(function(){
    $('a').click(function(){
        var val = $(this).text();
        var text = $('#selected_stals').val();
        var newText = val;
        if(text != ""){
            newText += "," + text;
        }
        $('#selected_stals').val(newText);
    });
})

http://jsfiddle.net/xhnsucgw/5/

Hope if what u want.

Upvotes: 1

John
John

Reputation: 916

You tagged your post with "jquery", so assuming you're using jQuery, and assuming I'm understanding you correctly, I would tackle it like this:

<ul id="boxes">
   <li><a href="#" id="A-14">A-14</a></li>
   <li><a href="#" id="A-13">A-13</a></li>
   <li><a href="#" id="A-12">A-12</a></li>
   <li><a href="#" id="A-11">A-11</a></li>
</ul>

<input type="text" name="selected_stals" id="selected_stals" />

...and you would put this with your other scripts:

$("#boxes a").on("click", function(e){
    if($("#selected_stals").val() == ""){
        $("#selected_stals").val($(this).html());
    }else{
        $("#selected_stals").val($("#selected_stals").val()
            + ", " + $(this).html());
    }
});

Here's a JSFiddle of it working.

Upvotes: 0

Related Questions