How to send javascript variable to another page in php when form is submitted using submit button

Question

I have two variables, col1 and col2, in JavaScript, I need to send them to a PHP page when submit button is clicked.

I have the following code:

<script>
$("input:radio").change(function(){
  if($(this).is(":checked")){
    var col1 = $(this).parent().parent().children("td:first");
    var col2 = col1.next();
  }
})
</script>

Answer 1

Use hidden elements which resides in form and assign values into it.

HTML

<form>
    <!--other code-->
    <input type="hidden" id="col1" name="col1">
    <input type="hidden" id="col2" name="col2">
</form>

JQUERY

$("input:radio").change(function(){
    var col1 = '', col2 = '';
    if($(this).is(":checked")){
        col1= $(this).parent().parent().children("td:first");
        col2 = col1.next();            
    }
    $('#col1').val(col1);
    $('#col2').val(col2);
});

Answer 2

You can use XMLHTTPRequest to process your data to PHP

 <script>
$("input:radio").change(function(){
  if($(this).is(":checked")){
    var col1 = $(this).parent().parent().children("td:first");
    var col2 = col1.next();

   $.ajax({
       url: "phpfile.php",
       data: {"col1":col1,"col2":col2},
       success:function(data){
          console.log(data);
       }
   });
  }
});
</script>

Answer 3

I need to send them to a PHP page when submit button is clicked.

So I can assume that there is a page refresh(unless you are using event.preventDefault()) , so hidden fields value will also get erased.

So you can use the local storage and save the values and on new page can again retrieve them and use it

$("input:radio").change(function(){
    var col1 = '', col2 = '';
    if($(this).is(":checked")){
        col1= $(this).parent().parent().children("td:first");
        col2 = col1.next(); 

     // Storing in local storage
      localStorage.setItem("col1", col1);
      localStorage.setItem("col2", col2); 

     // retrieve on next page 
     localStorage.getItem("col1");    // col1
   }