How to Make Validate With Javascript On Select Option

Question

I'm found a problem. I want to use Javascript to call validate. When my case is if customer want to buy size L and in another produk buy another size the system can validate and show message "You can't buy to different size, please change with the same size"

And this the view :

<tr>
                <?php echo form_open('controller/buyprod','class="form"');?>
                   <td> 
                    <select name="product_stock_area" id="product_stock_area" class="form-control" onchange="pros_stok()" style="width:95%">
                          <option value="0">Select Size:</option>
                          <option value="S">S</option>
                          <option value="M">M</option>
                          <option value="L">L</option>
                    </select>
                  </td>
                  <td style="width: 15%">
                    <select name="items" id="items" class="form-control" style="width:95%">
                      <option value="0">0</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                    </select> 
                  </td>
                  <td style="width: 20%">

                    <button type="submit" class="btn btn-primary" id="buying">Add to cart</button> 
                     <?php echo form_close(); 
                     ?>
                  </td>
                  <td style="width: 35%;padding-left: 5px;">
                    <span class="message-form message-validate">You can't buy to different size, please change with the same size.</span>
                  </td>
                </tr>

This is the Javascript [UPDATE 1] :

<script type="text/javascript">
  $(document).ready(function() {
    $('.form').submit(function() {
      var nama = $('#product_stock_area').val().length;
      var areaprod = "<?php $this->session->userdata('product_stock_area'); ?>"; 
      var namas = document.getElementById("product_stock_area").value;    
      var validateprod = "<?php $this->cart->total_items(); ?>";

      if(validateprod > 1){    
          if (areaprod != namas) {        
            $(".message-validate").css('display','block');
            return false;
          }
      console.log(nama)
      } 
    });
  });
</script>

Why i'm using userdata(session) because when the customer with first order Size L. And session save Size L, when the customer buy another produk userdata must be same with new produk size.

But with my code this javascript error the span message not showing.

[UPDATE 1]

For now the validation can display a message, but when I change it to all sizes, it still validates. So I can't add products to my cart.

So I add var validateprod ="<?php $this->cart->total_items ();?>";

So if a new customer buys a product for the first time, validation cannot occur, and if it is during the second purchase, then validation occurs. But when I tried it, the validation didn't happen again.

Please, help me :(

Answer 1

If you paste javascript code in same template as form, than available to paste php session or variable to js like this:

const phpSession = JSON.parse('<?php echo json_encode($_SESSION) ?>');

But better use your own array or variable for safety:

const mySettings = JSON.parse('<?php echo json_encode(['name' => 'Alex', 'age' => '18']) ?>');
const myString = '<?php echo $any_string ?>';
const myIntOrBool = parseInt(<?php echo $any_int_or_bool ?>);

And then use:

console.log(mySettings.name);
console.log(myString);

Answer 2

I think there is only one problem. ie

var areaprod = "<?php $this->session->userdata('product_stock_area'); ?>"; 

You have not echo the PHP session collection. echo all PHP session collections.

var areaprod = "<?php echo $this->session->userdata('product_stock_area'); ?>";