Modify a json array in hidden input?

Question

I have a hidden input:

<input type="hidden" id="paidIds" name="paidIds" value="[]">

It starts with an empty array as its value. I want to add and remove items from it but I cant work out how.
This is my code so far:
TO APPEND:

var $paidIds = $('#paidIds').val();
$paidIds.push($id);
$('#paidIds').val($paidIds);

TO REMOVE:

var $paidIds = $('#paidIds').val();
var $index = paidIds.indexOf($id);
if($index != -1) {
    $('#paidIds').val().splice($index, 1);
}
$('#paidIds').val($paidIds);

So far one of the issues is $paidIds is still undefined after:

var $paidIds = $('#paidIds').val();

At a loss, and google is not helping -__-

EDIT Got it working partly, in the debugger $paidIds = [4] but it did not set the value.

var $paidIds = JSON.parse($('#paidIds').val());
$paidIds.push($id);
$paidIds = JSON.stringify($paidIds)
$('#paidIds').val($paidIds);

EDIT2 fixed the missing #

codingrose · Accepted Answer · 2013-12-07 13:00:50Z

1

You need to convert string to object.

Change:

$('paidIds').val()

to

$('#paidIds').val()

Try:

var $paidIds = $('#paidIds').val();
if($paidIds != ""){
    $paidIds = JSON.parse($paidIds);
}

edited Dec 7, 2013 at 13:00

answered Dec 7, 2013 at 12:53

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

charlietfl Over a year ago

still has invalid selector

leumas95 Over a year ago

Tried it but getting a "Uncaught SyntaxError: Unexpected token u" error on this line var $paidIds = JSON.parse($('paidIds').val());

leumas95 Over a year ago

Thanks fixed the selector typo.

leumas95 Over a year ago

Nvm was my selector typo again

Noampz · Accepted Answer · 2013-12-07 13:01:05Z

1

try to use JSON.parse when you read from the input, and use JSON.stringify when you set the input's value

answered Dec 7, 2013 at 13:01

Noampz

1,2153 gold badges12 silver badges19 bronze badges

Comments

charlietfl · Accepted Answer · 2013-12-07 13:26:34Z

1

I would suggest you store array an a data- attribute and use jQuery.data() to read it rather than parsing the value to an array.

HTML

<input id="paidIds" name="paidIds" data-array="[1,2,3]" value="[1,2,3]">

JS

/* Custom event to handle updates*/    
 $('#paidIds').on('updateArray', function (evt, newVal) {
     var arr = $(this).data('array');
     arr.push(newVal);
     $(this).val(JSON.stringify(arr))
 });

/* Useage*/
 $('button').click(function () {
      var newArrValue=$(this).data('val')
     $('#paidIds').trigger('updateArray', [newArrValue]);
 });

DEMO

answered Dec 7, 2013 at 13:26

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

Modify a json array in hidden input?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related