Home > Software engineering >  how to pass data in jquery from an if condition blade file
how to pass data in jquery from an if condition blade file

Time：06-16

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 >
 <input name="quantity" type="number" value="1"  >
  <input  name="product_id" type="hidden" value="{{ $product->id }}">
    @if ($product->is_attribute==0)
      <input  name="productattrsize" type="text" value="small">
      <div >
      <div >
         <?php $discountedprice=Merchadise::getdiscountedprice($product->id);?>
         <!-- Product price-->
         @if ($discountedprice>0)
            <del><p >sh {{$product->merch_price }}</p></del>
            <p  style="float-right">sh {{ $discountedprice }}</p>
         @else
             <p >sh {{$product->merch_price }}</p>
         @endif
       </div>
     </div>
                    @elseif ($product->is_attribute==1)
                        <select  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 >
                            <div >
                                <?php $discountedprice=Merchadise::getdiscountedprice($product->id);?>
                                <!-- Product price-->
                                @if ($discountedprice>0)
                                    <del>
                                        <p  id="showattrprice">sh {{$product->merch_price }}</p>
                                    </del>
                                    <p  id="showcalculatedattrprice" style="float-right">sh {{ $discountedprice }}</p>
                                @endif
                            </div>
                        </div>
                    @endif
                    <div >
                        <a href="{{ url('merchadise/'.Str::slug($product->merch_name).'/'.$product->id) }}" >View Product</a>
                        <a >Add to Cart</a>
                        <div id="successmsg<?php echo $countp;?>" ></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 >
     <div  style="border: 2px solid green">
        <div > 
          <img  src="http://djvoskill/images/productimages/small/Merchadise 2 With Attributes-5074.PNG">
            <div >
              <h6 >5.Merchadise 2 With Attributes</h6>
              <div >
                <span >Tshirts</span>
              </div>
                1.<span >cotton</span>
                        <hr>
                        2.<span >wedding</span>
                        <div >
                            <input name="quantity" type="number" value="1" >
 <input  name="product_id" type="hidden" value="5">
<select  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 ><div >                                                      <!-- Product price-->                                                  <del>
                                                <p  id="showattrprice">sh 300</p>
                                            </del>
                                            <p  id="showcalculatedattrprice" style="float-right">sh 270</p>
                                                                            </div></div>
  <div >
     <a href="http://djvoskill/merchadise/merchadise-2-with-attributes/5" >View Product</a>
                                <a >Add to Cart</a>
                                <div id="successmsg0"  style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                                <div  style="border: 2px solid green">
                <div > 
                    <img  src="http://djvoskill/images/productimages/small/Product 1 with No Attributes-667.PNG">
                    <div >
                        <h6 >4.d.Merchadise 1 with Attributes</h6>
                        <div >
                            <span >Tshirts</span>
                        </div>
                        1.<span >leather</span>
                        <hr>
                        2.<span >casual</span>
                        <div >
                            <input name="quantity" type="number" value="1" >
                            <input  name="product_id" type="hidden" value="4">
<select  productid="4" name="productattrsize">
                                    <option value="">Select</option>                                       <option value="Small" required="">Small</option>                         <option value="Medium" required="">Medium</option>                   </select><div ><div >
                                                                                <!-- Product price-->
                                                                                    <del>
                                                <p  id="showattrprice">sh 200</p>
                                            </del>
                                            <p  id="showcalculatedattrprice" style="float-right">sh 180</p>                                                                            </div></div>
<div >
                                <a href="http://djvoskill/merchadise/dmerchadise-1-with-attributes/4" >View Product</a>
                                <a >Add to Cart</a>
                                <div id="successmsg1"  style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                                <div  style="border: 2px solid green">
                <div > 
                    <img  src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-7262.jpg">
                    <div >
                        <h6 >3.c.Merchadise 2 NoAttributes</h6>
                        <div >
                            <span >Tshirts</span>
                        </div>
                        1.<span >woolen</span>
                        <hr>
                        2.<span >casual</span>
                        <div >
                            <input name="quantity" type="number" value="1" >
                            <input  name="product_id" type="hidden" value="3">
<input  name="productattrsize" type="text" value="small">
                                <div >
                                    <div >
                                                                                <!-- Product price-->
                                                                                    <del>
                                                <p >sh 301</p>
                                            </del>
                                            <p  style="float-right">sh 204.68</p>
                                                                            </div>
                                </div>
                    
                                                        
                            <div >
                                <a href="http://djvoskill/merchadise/cmerchadise-2-noattributes/3" >View Product</a>
                                <a >Add to Cart</a>
                                <div id="successmsg2"  style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                                <div  style="border: 2px solid green">
                <div > 
                    <img  src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-2100.jpg">
                    <div >
                        <h6 >2.b.Merchadise 2 NoAttributes</h6>
                        <div >
                            <span >Tshirts</span>
                        </div>
                        1.<span >woolen</span>
                        <hr>
                        2.<span >wedding</span>
                        <div >
                            <input name="quantity" type="number" value="1" >
                            <input  name="product_id" type="hidden" value="2">

                            
                                                            <input  name="productattrsize" type="text" value="small">
                                <div >
                                    <div >
                                                                                <!-- Product price-->
                                                                                    <del>
                                                <p >sh 200</p>
                                            </del>
                                            <p  style="float-right">sh 180</p>
                                                                            </div>
                                </div>
                    
                                                        
                            <div >
                                <a href="http://djvoskill/merchadise/bmerchadise-2-noattributes/2" >View Product</a>
                                <a >Add to Cart</a>
                                <div id="successmsg3"  style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                                <div  style="border: 2px solid green">
                <div > 
                    <img  src="http://djvoskill/images/productimages/small/Merchadise 1 Attributes-6135.jpg">
                    <div >
                        <h6 >1.a.Merchadise 1 NoAttributes</h6>
                        <div >
                            <span >Tshirts</span>
                        </div>
                        1.<span >cotton</span>
                        <hr>
                        2.<span >wedding</span>
                        <div >
                            <input name="quantity" type="number" value="1" >
                            <input  name="product_id" type="hidden" value="1">

                            
                                                            <input  name="productattrsize" type="text" value="small">
                                <div >
                                    <div >
                                                                                <!-- Product price-->
                                                                                    <del>
                                                <p >sh 1</p>
                                            </del>
                                            <p  style="float-right">sh 0.9</p>
                                                                            </div>
                                </div>
                    
                                                        
                            <div >
                                <a href="http://djvoskill/merchadise/amerchadise-1-noattributes/1" >View Product</a>
                                <a >Add to Cart</a>
                                <div id="successmsg4"  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.

CodePudding user response：

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 >
  <div  style="border: 2px solid green">
<div >
  <img  src="http://djvoskill/images/productimages/small/Merchadise 2 With Attributes-5074.PNG">
  <div >
    <h6 >5.Merchadise 2 With Attributes</h6>
    <div >
      <span >Tshirts</span>
    </div>
    1.<span >cotton</span>
    <hr>
    2.<span >wedding</span>
    <div >
      <input name="quantity" type="number" value="1" >
      <input  name="product_id" type="hidden" value="5">
      <select  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 >
        <div >
          <!-- Product price-->                                                  
          <del>
            <p  id="showattrprice">sh 300</p>
          </del>
          <p  id="showcalculatedattrprice" style="float-right">sh 270</p>
        </div>
      </div>
      <div >
        <a href="http://djvoskill/merchadise/merchadise-2-with-attributes/5" >View Product</a>
        <a >Add to Cart</a>
        <div id="successmsg0"  style="display: none;"></div>
      </div>
    </div>
  </div>
</div>
  </div>
  <div  style="border: 2px solid green">
<div >
  <img  src="http://djvoskill/images/productimages/small/Product 1 with No Attributes-667.PNG">
  <div >
    <h6 >4.d.Merchadise 1 with Attributes</h6>
    <div >
      <span >Tshirts</span>
    </div>
    1.<span >leather</span>
    <hr>
    2.<span >casual</span>
    <div >
      <input name="quantity" type="number" value="1" >
      <input  name="product_id" type="hidden" value="4">
      <select  productid="4" name="productattrsize">
        <option value="">Select</option>
        <option value="Small" required="">Small</option>
        <option value="Medium" required="">Medium</option>
      </select>
      <div >
        <div >
          <!-- Product price-->
          <del>
            <p  id="showattrprice">sh 200</p>
          </del>
          <p  id="showcalculatedattrprice" style="float-right">sh 180</p>
        </div>
      </div>
      <div >
        <a href="http://djvoskill/merchadise/dmerchadise-1-with-attributes/4" >View Product</a>
        <a >Add to Cart</a>
        <div id="successmsg1"  style="display: none;"></div>
      </div>
    </div>
  </div>
</div>
  </div>
  <div  style="border: 2px solid green">
<div >
  <img  src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-7262.jpg">
  <div >
    <h6 >3.c.Merchadise 2 NoAttributes</h6>
    <div >
      <span >Tshirts</span>
    </div>
    1.<span >woolen</span>
    <hr>
    2.<span >casual</span>
    <div >
      <input name="quantity" type="number" value="1" >
      <input  name="product_id" type="hidden" value="3">
      <input  name="productattrsize" type="text" value="small">
      <div >
        <div >
          <!-- Product price-->
          <del>
            <p >sh 301</p>
          </del>
          <p  style="float-right">sh 204.68</p>
        </div>
      </div>
      <div >
        <a href="http://djvoskill/merchadise/cmerchadise-2-noattributes/3" >View Product</a>
        <a >Add to Cart</a>
        <div id="successmsg2"  style="display: none;"></div>
      </div>
    </div>
  </div>
</div>
  </div>
  <div  style="border: 2px solid green">
<div >
  <img  src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-2100.jpg">
  <div >
    <h6 >2.b.Merchadise 2 NoAttributes</h6>
    <div >
      <span >Tshirts</span>
    </div>
    1.<span >woolen</span>
    <hr>
    2.<span >wedding</span>
    <div >
      <input name="quantity" type="number" value="1" >
      <input  name="product_id" type="hidden" value="2">
      <input  name="productattrsize" type="text" value="small">
      <div >
        <div >
          <!-- Product price-->
          <del>
            <p >sh 200</p>
          </del>
          <p  style="float-right">sh 180</p>
        </div>
      </div>
      <div >
        <a href="http://djvoskill/merchadise/bmerchadise-2-noattributes/2" >View Product</a>
        <a >Add to Cart</a>
        <div id="successmsg3"  style="display: none;"></div>
      </div>
    </div>
  </div>
</div>
  </div>
  <div  style="border: 2px solid green">
<div >
  <img  src="http://djvoskill/images/productimages/small/Merchadise 1 Attributes-6135.jpg">
  <div >
    <h6 >1.a.Merchadise 1 NoAttributes</h6>
    <div >
      <span >Tshirts</span>
    </div>
    1.<span >cotton</span>
    <hr>
    2.<span >wedding</span>
    <div >
      <input name="quantity" type="number" value="1" >
      <input  name="product_id" type="hidden" value="1">
      <input  name="productattrsize" type="text" value="small">
      <div >
        <div >
          <!-- Product price-->
          <del>
            <p >sh 1</p>
          </del>
          <p  style="float-right">sh 0.9</p>
        </div>
      </div>
      <div >
        <a href="http://djvoskill/merchadise/amerchadise-1-noattributes/1" >View Product</a>
        <a >Add to Cart</a>
        <div id="successmsg4"  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].

Page link：https//www.codepudding.com/Softwareengineering/444106.html

Prev:jQuery multiple button show and hide elements when click
Next:Error "getData is not a function" when building form from existing data on formbuilder
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding