How to add multi value on input hidden

Question

I have a sample code:

<input type="hidden" value="" name="stall_id">
<a href='javascript:;' onclick='check(this)' data-id='1'>Add</a>
<a href='javascript:;' onclick='check(this)' data-id='2'>Add</a>
<a href='javascript:;' onclick='check(this)' data-id='3'>Add</a>

My jquery:

function check(tr) {
    var id = $(this).data("id");
    $(tr).attr("onclick", "uncheck(this)");
    $(tr).html('Add');
}
function uncheck(tr) {
    var id = $(this).data("id");
    $(tr).attr("onclick", "check(this)");
    $(tr).html('Remove');
}

How to when check/uncheck, value will auto add on input hidden ?

Ex: <input type="hidden" value="1,3" name="stall_id"> if I had checked two value.

Why not just use checkboxes? – hindmost Aug 06 '15 at 09:36 — hindmost, Aug 06 '15 at 09:36

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

input type hidden can only have a literal value. If you use a comma separated string, you can elaborate it and transform it in an array. Alternatively you can use form input arrays. You can find some more information here. Basically you'll need to create an input hidden (dynamically) for each value and set the name to "stall_id[]"

edited May 23 '17 at 11:43

Community

1
1

answered Aug 06 '15 at 09:36

Luca Simonetti

127
1
8

score 0 · Answer 2 · answered Aug 06 '15 at 09:49

You don't need to change onclick attribute of a try this code will work fine for you use only single function:-

function check(tr) {
var id = $(tr).data("id");
var hdn = $('[name="stall_id"]'), val;
var text = $(tr).html();  
if (text == 'Add') {
     val = hdn.val() == '' ? id : hdn.val() + ',' + id;
 } else {
    val = hdn.val().split(',').filter(function (d) {
        return d != id;
    }).join(',');
 }   
 $(tr).html(text == 'Add' ? 'Remove' : 'Add');
   hdn.val(val);
   alert(hdn.val());
 }

Demo

score 0 · Answer 3 · answered Aug 06 '15 at 09:55

This should work:

function toggle(tr) {
  if ($(tr).hasClass("checked")) {
    $(tr).removeClass("checked").html("Add");
  }
  else {
    $(tr).addClass("checked").html("Remove");
  }
  var selected = [];
  $("a.checked").each(function() {
    selected.push($(this).data("id"));
  });
  $("input[name=stall_id]").val(selected.join(','));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" name="stall_id">
<a href='javascript:;' onclick='toggle(this)' data-id='1'>Add</a>
<a href='javascript:;' onclick='toggle(this)' data-id='2'>Add</a>
<a href='javascript:;' onclick='toggle(this)' data-id='3'>Add</a>

We're attaching a class "checked" to checked elements so that we can simply select all checked elements using jQuery's class selectors.

How to add multi value on input hidden

3 Answers3