How to store jQuery multiple values into php $_SESSION

Question

I am using readymade modalbox which has three step process, in second step there is multiple checkboxes where user can choose two or more. Now I am confuse that how to pass this selected checkbox values to next step in modalbox.

<script>
$('input[name=sweater]').change(function() {
    $('#area').val(
        $('[name=sweater]:checked').map(function() {
            return $(this).val();
        }).get().join(',')
   );
});
</script>

<!-----------------------------------------First Step------------------------------------------------>
<div id="dialog_content" class="dialog_content" style="display:none">
	<div class="dialogModal_header">Dialog header 1</div>
	<div class="dialogModal_content">

        <?php
	        $query1="select * from `usersweater` where `Sweaterid`='$sweaterid'";
	        $result1=mysql_query($query1);
	        $row1=mysql_fetch_assoc($result1);
	        $sweaternikname=$row1['SNickname'];
	       //echo $sweaternikname; 
	    ?>
       <div>
          <ul class="sweaters">
              <li> 
                  <h4><?php echo $sweaternikname; ?></h4> 
                  <img src="upload/<?php echo $opic; ?>" style="width:100px; height:100px;" > 
              </li>
           </ul>
       </div>
      <input type="hidden" name="sweaterownerid" value="<?php echo $sownerid; ?>">
      <input type="hidden" name="osweaterpic" value="<?php echo $opic; ?>">
      <input type="hidden" name="osweaterid" value="<?php echo $sweaterid; ?>">                                       
      <h4>Are you sure you want to swap ? </h4>
      <br><br>
   </div>
    <div class="dialogModal_footer">
        <button type="button" class="btn btn-primary" data-dialogmodal-but="next">Yes</button>
        <button type="button" class="btn btn-default"data-dialogmodal-but="cancel">Continue Looking</button>
    </div>
</div>

<!-----------------------------------/first step over-------------------------->
<!-----------------------------------------Second Step------------------------------------------------>

                                                                             <?php
					
					$query1="select * from `usersweater` where `Sweaterid`='$sweaterid'";
					$result1=mysql_query($query1);
					$row1=mysql_fetch_assoc($result1);
					$sweaternikname=$row1['SNickname'];
					//echo $sweaternikname; 
					?>
<div id="dialog_content2" class="dialog_content" style="display:none">
	<div class="dialogModal_header">Dialog header 2</div>
	<div class="dialogModal_content" style="min-height:400px;">
		
                                 <form action="" method="post">


					   <div>
						<ul class="sweaters">
						<li> <h4><?php echo $sweaternikname; ?></h4> <img src="upload/<?php echo $opic; ?>" style="width:100px;"> </li>
						</ul>
						<ul class="sweater1">
                                                                                         <?php
						     $query="select * from `usersweater` where `Userid`='$userid' && `Swap`='0' ";
					             $result = mysql_query($query);
						     while ($line = mysql_fetch_array($result, MYSQL_ASSOC)){
						     $sid = $line[Sweaterid];
						     $img = $line[Sweaterpic];
					             $nikname = $line[SNickname];
						      $size = $line[Size];
					         ?>
<li> <h4><?php echo $nikname; ?><input type="checkbox" name="sweater" value="<?php echo $sid; ?>" /></h4> <img src="upload/<?php echo $img; ?>" style="width:100px;"> </li>
						<?php  } ?>
						</ul>
					</div>

</div>

<input type="text" id="area">

	<div class="dialogModal_footer">
                <input type="submit" name="submit" class="btn btn-primary" value="Next" />
		<button type="button" class="btn btn-primary" data-dialogmodal-but="next">Next</button>
		<button type="button" class="btn btn-default"data-dialogmodal-but="cancel">Cancel</button>
	</div>
 </div>
</form>
<!-----------------------------------------Second Step Over------------------------------------------------>
<!-----------------------------------------Third Step ----------------------------------------------->

<div id="dialog_content3" class="dialog_content" style="display:none">
	<div class="dialogModal_header">Dialog header 3</div>
	<div class="dialogModal_content" style="min-height:400px;">
      
	<!-----here i want to print that value------>
      
      
	</div>
	<div class="dialogModal_footer">
< id="area">
		<button type="button" class="btn btn-default btn-left" data-dialogmodal-but="prev">Back</button>
		<button type="button" class="btn btn-primary" data-dialogmodal-but="ok">Ok</button>
		<button type="button" class="btn btn-default"data-dialogmodal-but="cancel">Cancel</button>
	</div>
</div>

<!-----------------------------------------Third Step Over----------------------------------------------->

In code is the part where jQuery prints the values of selected checkboxes but how to pass? I try form but not successful. How to pass value not form action/href. I think session possible but no idea how to do. Put big code for understanding flow of modalbox.

Are you getting all the checked values from all the three steps? and where have you stored it currently? — Abhinav
– Abhinav, Commented Jun 11, 2015 at 7:32
yup....not stored but it print in text box seperated by comma — Ketan Joshi
– Ketan Joshi, Commented Jun 11, 2015 at 7:48

Abhinav · Accepted Answer · 2015-06-11 08:25:08Z

1

With each step, when ever the user clicks on the checkbox, store the values in a JS object

var values={}; //createing a values object
$('.checkbox').change(function(){
 if($(this).is(':checked')){
    var checkboxvalue = $(this).val();
    var id = $(this).attr('id');
   values[id] = checkboxvalue;  //keep storing all infos in the object
}
});

Then when the user atlast clicks on submit button pass all the info via AJAX

$.ajax({
  type: 'POST',
  url: addPackagePath,
  data: {allinfo : values}
  dataType: 'html',
  success: function(result){
  //do whatever you want
  }
});

Then after recieving all the infos from server end, store it in the $_SESSION variables

answered Jun 11, 2015 at 8:25

Abhinav

8,17812 gold badges51 silver badges92 bronze badges

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

Comments

Ole Spaarmann · Accepted Answer · 2015-06-11 07:56:57Z

0

As long as there is no page reload between the steps and you just show / hide parts of the page there is no need to use sessions. Just store it in a javascript variable like so

var sweater_val = $('[name=sweater]:checked').val();

answered Jun 11, 2015 at 7:56

Ole Spaarmann

17.1k29 gold badges108 silver badges170 bronze badges

2 Comments

Ketan Joshi Over a year ago

how to store all selected values into mysql by this.?

Ole Spaarmann Over a year ago

When you're done with the modal just use jQuery.post() and call the PHP script that stores all the values. This script should be like a little API that also can validate the users input and return error messages or a success code which in turn can be used by your javascript modal to display feedback to the user. Check this tutorial: scotch.io/tutorials/submitting-ajax-forms-with-jquery

Collectives™ on Stack Overflow

How to store jQuery multiple values into php $_SESSION

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related