how to pass data in jquery from an if condition blade file

Question

i have 2 types of a product, one with attributes and a product without attributes.i want to add product to cart in the listing page using jquery such that on click on the add to cart button the product is just added to cart table.for the product with attributes the user will have to select an attribute but for the product with attributes it will just add to cart.

<div class="fs-sm mb-4">
 <input name="quantity" type="number" value="1" class="prod_qty" >
  <input class="prod_id<?php echo $countp;?>" name="product_id" type="hidden" value="{{ $product->id }}">
    @if ($product->is_attribute==0)
      <input class="prodsize" name="productattrsize" type="text" value="small">
      <div class="d-flex align-items-center justify-content-between pt-3">
      <div class="d-flex flex-row">
         <?php $discountedprice=Merchadise::getdiscountedprice($product->id);?>
         <!-- Product price-->
         @if ($discountedprice>0)
            <del><p class="lead text-muted text-decoration-line-through">sh {{$product->merch_price }}</p></del>
            <p class="lead text-muted text-decoration-line-through" style="float-right">sh {{ $discountedprice }}</p>
         @else
             <p class="lead text-muted text-decoration-line-through">sh {{$product->merch_price }}</p>
         @endif
       </div>
     </div>
                    @elseif ($product->is_attribute==1)
                        <select class="custom-select prodsize" productid="{{ $product->id }}" name="productattrsize">
                            <option value="">Select</option>
                            @foreach ($product->merchadiseattributes as $attribute )
                                <option value="{{ $attribute->productattr_size }}" required>{{ $attribute->productattr_size }}</option>
                            @endforeach
                        </select>
                        <div class="d-flex align-items-center justify-content-between pt-3">
                            <div class="d-flex flex-row">
                                <?php $discountedprice=Merchadise::getdiscountedprice($product->id);?>
                                <!-- Product price-->
                                @if ($discountedprice>0)
                                    <del>
                                        <p class="lead text-muted text-decoration-line-through" id="showattrprice">sh {{$product->merch_price }}</p>
                                    </del>
                                    <p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh {{ $discountedprice }}</p>
                                @endif
                            </div>
                        </div>
                    @endif
                    <div class="d-flex ">
                        <a href="{{ url('merchadise/'.Str::slug($product->merch_name).'/'.$product->id) }}" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
                        <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart<?php echo $countp;?>">Add to Cart</a>
                        <div id="successmsg<?php echo $countp;?>" class="alert alert-message bg-grey text-dark"></div>
                    </div>
                </div>

the case here is for the product without attribute the size will be passed as small but for the dropdown the selected option will be selected.the issue am getting here is my jquery code is only selecting on the first attribute option that i have selected.also its not grabbing the size for the products without attributes,this one ..this is my jquery code.

            $('.add-to-cart').click(function(e) { e.preventDefault();
            var prod_id=$(this).closest('.ps-shop').find('.prod_id<?php echo $i;?>').val();
            var prod_qty=$(this).closest('.ps-shop').find('.prod_qty').val();
            var prod_size=$(this).closest('.ps-shop').find('.prodsize').val();
            alert(prod_size)
            if(prod_size==""){
                alert("Please Select An Attribute");
                return false;
            }
            $.ajax({
                method:"post",
                url:"add_to_cart",
                data:{
                    'productattrsize':prod_size,
                    'product_id':prod_id<?php echo $i;?>,
                    'quantity':prod_qty,
                },
                success:function(response){
                    // console.log(response)
                    $('.add-to-cart<?php echo $i;?>').hide();
                    $('#successmsg<?php echo $i;?>').show();
                    $('#successmsg<?php echo $i;?>').append('product has been added to cart');
                }
            });
        });

this is how the html code looks like in the browser

    <div class="row">
     <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
        <div class="card"> 
          <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 With Attributes-5074.PNG">
            <div class="card-body">
              <h6 class="font-weight-bold pt-1">5.Merchadise 2 With Attributes</h6>
              <div class="d-flex align-content-center justify-content-center">
                <span class="pt-1">Tshirts</span>
              </div>
                1.<span class="pt-1">cotton</span>
                        <hr>
                        2.<span class="pt-1">wedding</span>
                        <div class="fs-sm mb-4">
                            <input name="quantity" type="number" value="1" class="prod_qty">
 <input class="prod_id0" name="product_id" type="hidden" value="5">
<select class="custom-select prodsize" productid="5" name="productattrsize">
 <option value="">Select</option>                                                            
  <option value="Green" required="">Green</option>                            
  <option value="Black" required="">Black</option>                           
  <option value="Blue" required="">Blue</option>                         </select>
<div class="d-flex align-items-center justify-content-between pt-3"><div class="d-flex flex-row">                                                      <!-- Product price-->                                                  <del>
                                                <p class="lead text-muted text-decoration-line-through" id="showattrprice">sh 300</p>
                                            </del>
                                            <p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh 270</p>
                                                                            </div></div>
  <div class="d-flex ">
     <a href="http://djvoskill/merchadise/merchadise-2-with-attributes/5" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
                                <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart0">Add to Cart</a>
                                <div id="successmsg0" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                                <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
                <div class="card"> 
                    <img class="card-img-top" src="http://djvoskill/images/productimages/small/Product 1 with No Attributes-667.PNG">
                    <div class="card-body">
                        <h6 class="font-weight-bold pt-1">4.d.Merchadise 1 with Attributes</h6>
                        <div class="d-flex align-content-center justify-content-center">
                            <span class="pt-1">Tshirts</span>
                        </div>
                        1.<span class="pt-1">leather</span>
                        <hr>
                        2.<span class="pt-1">casual</span>
                        <div class="fs-sm mb-4">
                            <input name="quantity" type="number" value="1" class="prod_qty">
                            <input class="prod_id1" name="product_id" type="hidden" value="4">
<select class="custom-select prodsize" productid="4" name="productattrsize">
                                    <option value="">Select</option>                                       <option value="Small" required="">Small</option>                         <option value="Medium" required="">Medium</option>                   </select><div class="d-flex align-items-center justify-content-between pt-3"><div class="d-flex flex-row">
                                                                                <!-- Product price-->
                                                                                    <del>
                                                <p class="lead text-muted text-decoration-line-through" id="showattrprice">sh 200</p>
                                            </del>
                                            <p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh 180</p>                                                                            </div></div>
<div class="d-flex ">
                                <a href="http://djvoskill/merchadise/dmerchadise-1-with-attributes/4" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
                                <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart1">Add to Cart</a>
                                <div id="successmsg1" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                                <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
                <div class="card"> 
                    <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-7262.jpg">
                    <div class="card-body">
                        <h6 class="font-weight-bold pt-1">3.c.Merchadise 2 NoAttributes</h6>
                        <div class="d-flex align-content-center justify-content-center">
                            <span class="pt-1">Tshirts</span>
                        </div>
                        1.<span class="pt-1">woolen</span>
                        <hr>
                        2.<span class="pt-1">casual</span>
                        <div class="fs-sm mb-4">
                            <input name="quantity" type="number" value="1" class="prod_qty">
                            <input class="prod_id2" name="product_id" type="hidden" value="3">
<input class="prodsize" name="productattrsize" type="text" value="small">
                                <div class="d-flex align-items-center justify-content-between pt-3">
                                    <div class="d-flex flex-row">
                                                                                <!-- Product price-->
                                                                                    <del>
                                                <p class="lead text-muted text-decoration-line-through">sh 301</p>
                                            </del>
                                            <p class="lead text-muted text-decoration-line-through" style="float-right">sh 204.68</p>
                                                                            </div>
                                </div>
                    
                                                        
                            <div class="d-flex ">
                                <a href="http://djvoskill/merchadise/cmerchadise-2-noattributes/3" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
                                <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart2">Add to Cart</a>
                                <div id="successmsg2" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                                <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
                <div class="card"> 
                    <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-2100.jpg">
                    <div class="card-body">
                        <h6 class="font-weight-bold pt-1">2.b.Merchadise 2 NoAttributes</h6>
                        <div class="d-flex align-content-center justify-content-center">
                            <span class="pt-1">Tshirts</span>
                        </div>
                        1.<span class="pt-1">woolen</span>
                        <hr>
                        2.<span class="pt-1">wedding</span>
                        <div class="fs-sm mb-4">
                            <input name="quantity" type="number" value="1" class="prod_qty">
                            <input class="prod_id3" name="product_id" type="hidden" value="2">

                            
                                                            <input class="prodsize" name="productattrsize" type="text" value="small">
                                <div class="d-flex align-items-center justify-content-between pt-3">
                                    <div class="d-flex flex-row">
                                                                                <!-- Product price-->
                                                                                    <del>
                                                <p class="lead text-muted text-decoration-line-through">sh 200</p>
                                            </del>
                                            <p class="lead text-muted text-decoration-line-through" style="float-right">sh 180</p>
                                                                            </div>
                                </div>
                    
                                                        
                            <div class="d-flex ">
                                <a href="http://djvoskill/merchadise/bmerchadise-2-noattributes/2" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
                                <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart3">Add to Cart</a>
                                <div id="successmsg3" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                                <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
                <div class="card"> 
                    <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 1 Attributes-6135.jpg">
                    <div class="card-body">
                        <h6 class="font-weight-bold pt-1">1.a.Merchadise 1 NoAttributes</h6>
                        <div class="d-flex align-content-center justify-content-center">
                            <span class="pt-1">Tshirts</span>
                        </div>
                        1.<span class="pt-1">cotton</span>
                        <hr>
                        2.<span class="pt-1">wedding</span>
                        <div class="fs-sm mb-4">
                            <input name="quantity" type="number" value="1" class="prod_qty">
                            <input class="prod_id4" name="product_id" type="hidden" value="1">

                            
                                                            <input class="prodsize" name="productattrsize" type="text" value="small">
                                <div class="d-flex align-items-center justify-content-between pt-3">
                                    <div class="d-flex flex-row">
                                                                                <!-- Product price-->
                                                                                    <del>
                                                <p class="lead text-muted text-decoration-line-through">sh 1</p>
                                            </del>
                                            <p class="lead text-muted text-decoration-line-through" style="float-right">sh 0.9</p>
                                                                            </div>
                                </div>
                    
                                                        
                            <div class="d-flex ">
                                <a href="http://djvoskill/merchadise/amerchadise-1-noattributes/1" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
                                <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart4">Add to Cart</a>
                                <div id="successmsg4" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>              
</div>

how can i make it happen such that if the product selects an option the selected option is passed but if the product doesnt have attributes the value of small is passed to the function.

It looks like your page is being prepared with laravel and that your jQuery.ajax section is defined inside a loop (although I can't see the beginning of that loop). I generally find it easier to the keep any programming logic contained to one language at a time, so in this case I would try and express all the Ajax logic in one JavaScript section outside the lavavel loop. — Carsten Massmann
– Carsten Massmann, Commented Jun 15, 2022 at 6:04
In order for us to concentrate on the JavaScript coding it would be helpful if you could provide the HTML as it appears in your browser (possibly shorten it to make it an mcve). Then we can start composing a single script section that will take care of all shopping cart entries. — Carsten Massmann
– Carsten Massmann, Commented Jun 15, 2022 at 7:26
@CarstenMassmann i have edited it in the question have a look — stephen waweru99
– stephen waweru99, Commented Jun 15, 2022 at 7:34

Carsten Massmann · Accepted Answer · 2022-06-15 11:55:11Z

Below you will find a working snippet that handles all your div.card elements according to your demands:

// url for testing:
const url="https://jsonplaceholder.typicode.com/users/";

$(".row").on("click","a[class*=add-to-cart]",function(ev){
 const card=$(this).closest(".card-body"),
  sizeSel=$("select",card);
 if(sizeSel.length>0&&sizeSel.val()=="") alert("Please specify your size/colour!")
 else
 $.ajax({method:"post",url:url,
  data:{
   productattrsize:sizeSel.length?sizeSel.val():"small",
   product_id:$("[name=product_id]",card).val(),
   quantity:$(".prod_qty",card).val ()},
  success:response=>{
   console.log(response)
   $(this).hide();
   $('.alert',card).show().append('product has been added to cart');
  }
 });
})

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="row">
  <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
  <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 With Attributes-5074.PNG">
  <div class="card-body">
    <h6 class="font-weight-bold pt-1">5.Merchadise 2 With Attributes</h6>
    <div class="d-flex align-content-center justify-content-center">
      <span class="pt-1">Tshirts</span>
    </div>
    1.<span class="pt-1">cotton</span>
    <hr>
    2.<span class="pt-1">wedding</span>
    <div class="fs-sm mb-4">
      <input name="quantity" type="number" value="1" class="prod_qty">
      <input class="prod_id0" name="product_id" type="hidden" value="5">
      <select class="custom-select prodsize" productid="5" name="productattrsize">
        <option value="">Select</option>
        <option value="Green" required="">Green</option>
        <option value="Black" required="">Black</option>
        <option value="Blue" required="">Blue</option>
      </select>
      <div class="d-flex align-items-center justify-content-between pt-3">
        <div class="d-flex flex-row">
          <!-- Product price-->                                                  
          <del>
            <p class="lead text-muted text-decoration-line-through" id="showattrprice">sh 300</p>
          </del>
          <p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh 270</p>
        </div>
      </div>
      <div class="d-flex ">
        <a href="http://djvoskill/merchadise/merchadise-2-with-attributes/5" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
        <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart0">Add to Cart</a>
        <div id="successmsg0" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
      </div>
    </div>
  </div>
</div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
  <img class="card-img-top" src="http://djvoskill/images/productimages/small/Product 1 with No Attributes-667.PNG">
  <div class="card-body">
    <h6 class="font-weight-bold pt-1">4.d.Merchadise 1 with Attributes</h6>
    <div class="d-flex align-content-center justify-content-center">
      <span class="pt-1">Tshirts</span>
    </div>
    1.<span class="pt-1">leather</span>
    <hr>
    2.<span class="pt-1">casual</span>
    <div class="fs-sm mb-4">
      <input name="quantity" type="number" value="1" class="prod_qty">
      <input class="prod_id1" name="product_id" type="hidden" value="4">
      <select class="custom-select prodsize" productid="4" name="productattrsize">
        <option value="">Select</option>
        <option value="Small" required="">Small</option>
        <option value="Medium" required="">Medium</option>
      </select>
      <div class="d-flex align-items-center justify-content-between pt-3">
        <div class="d-flex flex-row">
          <!-- Product price-->
          <del>
            <p class="lead text-muted text-decoration-line-through" id="showattrprice">sh 200</p>
          </del>
          <p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh 180</p>
        </div>
      </div>
      <div class="d-flex ">
        <a href="http://djvoskill/merchadise/dmerchadise-1-with-attributes/4" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
        <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart1">Add to Cart</a>
        <div id="successmsg1" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
      </div>
    </div>
  </div>
</div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
  <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-7262.jpg">
  <div class="card-body">
    <h6 class="font-weight-bold pt-1">3.c.Merchadise 2 NoAttributes</h6>
    <div class="d-flex align-content-center justify-content-center">
      <span class="pt-1">Tshirts</span>
    </div>
    1.<span class="pt-1">woolen</span>
    <hr>
    2.<span class="pt-1">casual</span>
    <div class="fs-sm mb-4">
      <input name="quantity" type="number" value="1" class="prod_qty">
      <input class="prod_id2" name="product_id" type="hidden" value="3">
      <input class="prodsize" name="productattrsize" type="text" value="small">
      <div class="d-flex align-items-center justify-content-between pt-3">
        <div class="d-flex flex-row">
          <!-- Product price-->
          <del>
            <p class="lead text-muted text-decoration-line-through">sh 301</p>
          </del>
          <p class="lead text-muted text-decoration-line-through" style="float-right">sh 204.68</p>
        </div>
      </div>
      <div class="d-flex ">
        <a href="http://djvoskill/merchadise/cmerchadise-2-noattributes/3" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
        <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart2">Add to Cart</a>
        <div id="successmsg2" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
      </div>
    </div>
  </div>
</div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
  <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-2100.jpg">
  <div class="card-body">
    <h6 class="font-weight-bold pt-1">2.b.Merchadise 2 NoAttributes</h6>
    <div class="d-flex align-content-center justify-content-center">
      <span class="pt-1">Tshirts</span>
    </div>
    1.<span class="pt-1">woolen</span>
    <hr>
    2.<span class="pt-1">wedding</span>
    <div class="fs-sm mb-4">
      <input name="quantity" type="number" value="1" class="prod_qty">
      <input class="prod_id3" name="product_id" type="hidden" value="2">
      <input class="prodsize" name="productattrsize" type="text" value="small">
      <div class="d-flex align-items-center justify-content-between pt-3">
        <div class="d-flex flex-row">
          <!-- Product price-->
          <del>
            <p class="lead text-muted text-decoration-line-through">sh 200</p>
          </del>
          <p class="lead text-muted text-decoration-line-through" style="float-right">sh 180</p>
        </div>
      </div>
      <div class="d-flex ">
        <a href="http://djvoskill/merchadise/bmerchadise-2-noattributes/2" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
        <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart3">Add to Cart</a>
        <div id="successmsg3" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
      </div>
    </div>
  </div>
</div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
  <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 1 Attributes-6135.jpg">
  <div class="card-body">
    <h6 class="font-weight-bold pt-1">1.a.Merchadise 1 NoAttributes</h6>
    <div class="d-flex align-content-center justify-content-center">
      <span class="pt-1">Tshirts</span>
    </div>
    1.<span class="pt-1">cotton</span>
    <hr>
    2.<span class="pt-1">wedding</span>
    <div class="fs-sm mb-4">
      <input name="quantity" type="number" value="1" class="prod_qty">
      <input class="prod_id4" name="product_id" type="hidden" value="1">
      <input class="prodsize" name="productattrsize" type="text" value="small">
      <div class="d-flex align-items-center justify-content-between pt-3">
        <div class="d-flex flex-row">
          <!-- Product price-->
          <del>
            <p class="lead text-muted text-decoration-line-through">sh 1</p>
          </del>
          <p class="lead text-muted text-decoration-line-through" style="float-right">sh 0.9</p>
        </div>
      </div>
      <div class="d-flex ">
        <a href="http://djvoskill/merchadise/amerchadise-1-noattributes/1" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
        <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart4">Add to Cart</a>
        <div id="successmsg4" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
      </div>
    </div>
  </div>
</div>
  </div>
</div>

You can make life even easier for yourself if you left out the numbered classes, as generated by your laravel template (like add-to-cart0, add-to-cart1 ...) and simply use a generic class name (like: add-to-class). These generic class names are easier to search for with a CSS selector (like .add-to-class instead of [class*=add-to-class].

Collectives™ on Stack Overflow

how to pass data in jquery from an if condition blade file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related