How to insert an array into a hidden input in jquery

Question

I have a table that contains rows. each rows have their own attribute called as data. I want to put all tr into a hidden input type. how can I do that? I want to get the $('#valuePermission').val() in the server-side.

<form >
   <input type="hidden" name="valuePermission[]" id="valuePermission" value=""/>


<table class='table table-hover table-striped'>
  <tr data="1+a"><td>name:1</td><td>type:a</td></tr>
  <tr data="2+b"><td>name:2</td><td>type:b</td></tr>
  <tr data="3+c"><td>name:3</td><td>type:c</td></tr>
</table>
 <button type="submit" id="btn">submit</button>
</form>
<script>
  $('#btn').on('click',function(e){
  e.preventDefault();
  var dt=[];
      $('table').find('tr').each(function(){
          dt.push($(this).attr('data')); 
      });
$('#valuePermission').val(dt);
  });
$('form').submit();
</script>

in server-side I want to have sth like this:

<?php $var=$_POST['valuePermission'];
if(isset($var && !empty($var))

    $var=json_decode($var);
foreach($var as $v=>$k)
    echo $v;
?>

the results is like this: *5+sport+500001+soccer,*5+sport+500002+vollyball,*5+sport+500003+swimming,*5+sport+500004+running,*5+sport+500006+tenis,*5+sport+500007+table tenis I want to have sth like this: array[0]='5+sport+500001+soccer' array[1]='5+sport+500001+vollyball and ....

Join the array with some delemiter and split again at server — Satyaki Chatterjee
– Satyaki Chatterjee, Commented May 30, 2016 at 12:08

Pranav C Balan · Accepted Answer · 2016-05-30 14:09:19Z

3

Pass it as json string JSON.stringify() can be used for that, then from server side decode it and use . Also prevent the default click event action(here form submission) otherwise form get submitted before hidden field value is updating, use event.preventDefault() for that. At last submit form using code.

<form >
   <input type="hidden" name="valuePermission" id="valuePermission" value=""/>


<table class='table table-hover table-striped'>
  <tr data="1+a"><td>name:1</td><td>type:a</td></tr>
  <tr data="2+b"><td>name:2</td><td>type:b</td></tr>
  <tr data="3+c"><td>name:3</td><td>type:c</td></tr>
</table>
 <button type="submit" id="btn">submit</button>
</form>
<script>
  $('#btn').on('click',function(e){
  e.preventDefault();
  var dt=[];
      $('table').find('tr').each(function(){
          dt.push($(this).attr('data')); 
      });
$('#valuePermission').val(JSON.stringify(dt));
  $(this).closest('form').submit();
  });
</script>

Server side use json_decode() to decode the json string

<?php $var = json_decode($_POST['valuePermission']);
foreach($var as $v=>$k)
    echo $v;
?>

UPDATE :

The another method that you can try is create multiple hidden input

<form>
  <input type="hidden" name="valuePermission[]" value="" />
  <input type="hidden" name="valuePermission[]" value="" />
  <input type="hidden" name="valuePermission[]" value="" />


  <table class='table table-hover table-striped'>
    <tr data="1+a">
      <td>name:1</td>
      <td>type:a</td>
    </tr>
    <tr data="2+b">
      <td>name:2</td>
      <td>type:b</td>
    </tr>
    <tr data="3+c">
      <td>name:3</td>
      <td>type:c</td>
    </tr>
  </table>
  <button type="button" id="btn">submit</button>
</form>
<script>
  $('#btn').on('click', function(e) {
    e.preventDefault();
    var $input = $('name="valuePermission[]"');
    return $('table').find('tr').each(function(i) {
      $input.eq(i).val($(this).attr('data'));
    })
    $(this).closest('form').submit();
  });
</script>

edited May 30, 2016 at 14:09

answered May 30, 2016 at 12:07

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

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

11 Comments

hilary clinton Over a year ago

@Pravan C Balan. I did it json_decode but it doesn't get the value. if I use json.stringify , it returns me sth like this: [a+1,b+2,c+3] but I want sth like this `array[0]='a+1', array[1]='b+2',..

hilary clinton Over a year ago

@Pravan C Balan. I use json_decode but it sets uninitialized array. without json_decode it shows me an array[] but with wrong vlaue

Pranav C Balan Over a year ago

@hilaryclinton : in first method you need to remove [] from name it should be name="valuePermission" otherwise use json_decode($_POST['valuePermission'][0]); in server

Pranav C Balan Over a year ago

@hilaryclinton : check second method with the multiplr input field

hilary clinton Over a year ago

@Pravan C Balan. my problem is all the data of each tr is inserted into array[0]. I have 500 tr and each of them has the value that contains + to split and get them.I want to loop through the array like array[0], array[1],...

|

Manjeet Barnala · Accepted Answer · 2016-05-31 11:08:30Z

0

You can simply use input name valuePermission instead of valuePermission[], also use form action and method

<form id="myform" action="target.php" method="post" >
<input type="hidden" name="valuePermission" id="valuePermission" value=""/>


<table class='table table-hover table-striped'>
  <tr data="1+a"><td>name:1</td><td>type:a</td></tr>
  <tr data="2+b"><td>name:2</td><td>type:b</td></tr>
  <tr data="3+c"><td>name:3</td><td>type:c</td></tr>
</table>
<button type="submit" id="btn">submit</button>
</form>

<script>
$(document).ready(function(){
     $('#btn').click(function(){
          var dt='';
          $('.table').find('tr').each(function(){
              if(dt == '')
              {
                dt = $(this).attr('data');
              }
              else
              {
                dt+='*'+$(this).attr('data');
              }
          });
          if($('#valuePermission').val(dt))
          {
            $( "#myform").submit();
          }

      }); 
});
</script>

In target file

<?php 
if(isset($_POST['valuePermission']))
{   
    $var = explode('*',$_POST['valuePermission']);
    foreach($var as $k => $v)
    {
        echo $v;
        echo "<br>";
    }
}
?>

Modified for explode

$str = '*5+sport+500001+soccer,*5+sport+500002+vollyball,*5+sport+500003+swimming,*5+sport+500004+running,*5+sport+500006+tenis,*5+sport+500007+table tenis';
$str = explode('*',$str);

$newArray =array();
foreach(array_filter($str) as $val)
{
    $newArray[] = trim($val,',');
}   
echo "<pre>"; print_r($newArray);

This will give you:

Array
(
    [0] => 5+sport+500001+soccer
    [1] => 5+sport+500002+vollyball
    [2] => 5+sport+500003+swimming
    [3] => 5+sport+500004+running
    [4] => 5+sport+500006+tenis
    [5] => 5+sport+500007+table tenis
)

edited May 31, 2016 at 11:08

answered May 30, 2016 at 13:24

Manjeet Barnala

2,9951 gold badge13 silver badges21 bronze badges

16 Comments

hilary clinton Over a year ago

Barmala. tr are dynamically added or removed. so I want to handle it when the user is sure to submit the value of the table , I need the values of the table.

hilary clinton Over a year ago

Barmala. I edit my script. I prevent from submitting the form. after assign the dataTable into the hidden field , then I submit the form

hilary clinton Over a year ago

Barmala. is there any way to explode($var=explode('*',$_POST['valuePermission']) instead of sth you writed

Manjeet Barnala Over a year ago

now what you are getting in $_POST on php file ?? @hilaryclinton

hilary clinton Over a year ago

Barmala. I use just $_post[] instead of json_decode($_post[]). I just get an array with a very very long data sth like this: array.length =10000 as I asked you, in this array there are data that contain , inside them. but the functionality goes wrong. because when it reaches into this value like video, music, sport it separates it as 3 values.

|

Collectives™ on Stack Overflow

How to insert an array into a hidden input in jquery

2 Answers 2

11 Comments

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related