0

I have create different product via for loop so the input hidden field have same class but the value is different in it so what I want is to get the different value of the same class when I click on send enquiry button. You can understand after watching this jsfiddle link. Sorry for the English in advance.

4
  • i have tried with class too but not successful May 20, 2016 at 6:49
  • 1
    var pro_nm = $(this).parent().find('.proname').val(); May 20, 2016 at 6:51
  • Yes it works thanks a lot @PranavCBalan May 20, 2016 at 6:53
  • when you are looping your code you can add index number in your id like proname-1. after you can set your logic accordingly May 20, 2016 at 6:55

4 Answers 4

1

Hidden input is sibling to the clicked element either you can get it using siblings() or next() ( next() can be use since it's a sibling which is immediately after the element )

var pro_nm = $(this).siblings('.proname').val();

$('.send-enq a').click(function(s) {
  var pro_nm = $(this).parent().find('.proname').val();
  alert(pro_nm);
});
.col-sm-4 {
  width: 33.33333333%;
}
.single-product {
  position: relative;
  height: auto;
  margin-bottom: 30px;
  background-color: #f8f8f8;
  border: 1px solid #dddddd;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px #dddddd;
  transition: 0.7s all ease;
}
.single-product figure {
  position: relative;
  margin: 0;
  padding: 1px;
  width: 100%;
  height: 200px;
  border-bottom: 1px solid #dddddd;
}
.single-product figure img {
  width: 100%;
  height: 100%;
}
.read-more {
  position: absolute;
  top: 50px;
}
.send-enq {
  position: absolute;
  top: 50px;
  left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
  <div class="single-product">
    <figure>
      <img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
      <input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
      <figcaption>
        <div class="read-more">
          <a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
        </div>
        <div class="send-enq">
          <a href="#sendenquiry"><i class="fa fa-share" aria-hidden="true"></i> Send Enquiry</a>
          <input type="hidden" value="Wildcraft" class="proname">
        </div>

      </figcaption>
    </figure>
    <div class="col-xs-12 nopadding">
      <span class="col-xs-8">
															<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
														</span>
      <strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
    </div>

  </div>
  <!-- end .single-product -->
</div>



<div class="col-sm-4 col-xs-6">
  <div class="single-product">
    <figure>
      <img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
      <input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
      <figcaption>
        <div class="read-more">
          <a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
        </div>
        <div class="send-enq">
          <a href="#sendenquiry"><i class="fa fa-share" aria-hidden="true"></i> Send Enquiry</a>
          <input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
        </div>


or get the parent using parent() and find the element inside

var pro_nm = $(this).parent().find('.proname').val();

$('.send-enq a').click(function(s) {
  var pro_nm = $(this).siblings('.proname').val();
  // or
  // var pro_nm = $(this).next().val();
  alert(pro_nm);
});
.col-sm-4 {
  width: 33.33333333%;
}
.single-product {
  position: relative;
  height: auto;
  margin-bottom: 30px;
  background-color: #f8f8f8;
  border: 1px solid #dddddd;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px #dddddd;
  transition: 0.7s all ease;
}
.single-product figure {
  position: relative;
  margin: 0;
  padding: 1px;
  width: 100%;
  height: 200px;
  border-bottom: 1px solid #dddddd;
}
.single-product figure img {
  width: 100%;
  height: 100%;
}
.read-more {
  position: absolute;
  top: 50px;
}
.send-enq {
  position: absolute;
  top: 50px;
  left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
  <div class="single-product">
    <figure>
      <img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
      <input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
      <figcaption>
        <div class="read-more">
          <a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
        </div>
        <div class="send-enq">
          <a href="#sendenquiry"><i class="fa fa-share" aria-hidden="true"></i> Send Enquiry</a>
          <input type="hidden" value="Wildcraft" class="proname">
        </div>

      </figcaption>
    </figure>
    <div class="col-xs-12 nopadding">
      <span class="col-xs-8">
															<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
														</span>
      <strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
    </div>

  </div>
  <!-- end .single-product -->
</div>



<div class="col-sm-4 col-xs-6">
  <div class="single-product">
    <figure>
      <img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
      <input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
      <figcaption>
        <div class="read-more">
          <a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
        </div>
        <div class="send-enq">
          <a href="#sendenquiry"><i class="fa fa-share" aria-hidden="true"></i> Send Enquiry</a>
          <input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
        </div>

2
  • 1
    Thanks a lot again May 20, 2016 at 6:58
  • @jayantrawat : glad to help :) May 20, 2016 at 7:00
0

Just try this:

Fiddle: http://jsfiddle.net/kjoLyf9d/

just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag

$('.send-enq a').click(function(s){
    var pro_nm = $(this).next('.proname').val(); // just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag
    alert(pro_nm);
}); 
0

Since jQuery uses CSS selectors you could technically do something like

 $('#proimg:nth-of-type(2)') 

in order to select the second #proimg element, but having more than one element with the same id is just bad practice.

Other, better options is having them have the same class (for style purposes) and give each one of them a different id, you just have to write in something like "product1","product2"... with the loop you already have

0

Your jQuery code should be replaced with class selector.

$('.send-enq a').click(function(s){
        var pro_nm = $(this).next('.proname').val(); 
        console.log("test",pro_nm);
     }); 
1
  • well i have update my jsfiddle link can you please check again May 20, 2016 at 6:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.