CODEWITHSUNDEEP
javascriptjquery
tech74
tech74

Reputation: 1659

Get selector parent id in jQuery click handler

I would like to get the parent id of the element that was click, so in this case either #logo200_60_form or #logo400_120_form. I can then use that id in the rest of the code.

I tried $(this).parent() but that gives me the immediate parent and I would need to go up a couple of levels. As the id is in the click handler is there a way of determining which parent caused the click.

JS :

$('#logo200_60_form a.fileinput-exists, #logo400_120_form a.fileinput- exists').on('click', function() {
    $('form').get(0).reset();
    $('#logo200_60').trigger('change');
    $('#logo200_60_thumb').attr('src', 'http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image');
});

HTML :

<form action="#" role="form" id="logo200_60_form">
  <p>Please upload 200x60 png logo image</p>
  <div class="form-group">
    <div class="fileinput fileinput-new" data-provides="fileinput">
      <div class="fileinput-new thumbnail" style="width: 200px; height: 60px;">
        <img id="logo200_60_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
      </div>
      <div id="logo200_60_preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 60px;"></div>
      <div>
        <span class="btn default btn-file">
                                            <span class="fileinput-new"> Select image </span>
        <span class="fileinput-exists"> Change </span>
        <input type="file" name="..." id="logo200_60">
        </span>
        <a href="#" class="btn default fileinput-exists" data-dismiss="fileinput"> Remove </a>
      </div>
    </div>

  </div>
</form>

<form action="#" role="form" id="logo400_120_form">
  <p>Please upload 400x120 png logo image</p>
  <div class="form-group">
    <div class="fileinput fileinput-new" data-provides="fileinput">
      <div class="fileinput-new thumbnail" style="width: 400px; height: 120px;">
        <img id="logo400_120_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
      </div>
      <div id="preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 400px; max-height: 120px;"></div>
      <div>
        <span class="btn default btn-file">
                                            <span class="fileinput-new"> Select image </span>
        <span class="fileinput-exists"> Change </span>
        <input type="file" name="..." id="logo400_120">
        </span>
        <a href="#" class="btn default fileinput-exists" data-dismiss="fileinput"> Remove </a>
      </div>
    </div>
  </div>
</form>

Upvotes: 3

Views: 96

Answers (2)

Tushar
Tushar

Reputation: 87233

Use closest() with attribute-value selector.

$(this) // The element that is clicked
    .closest('form') // First <form> ancestor
    .attr('id') // Get the value of `id` attribute

Upvotes: 3

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

I tried $(this).parent() but that gives me the immediate parent and I would need to go up a couple of levels.

You could use .parents() instead, Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector :

$(this).parents('form').attr('id');

Hope this helps.

$('#logo200_60_form a.fileinput-exists, #logo400_120_form a.fileinput-exists').on('click', function() {
	alert($(this).parents('form').attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" role="form" id="logo200_60_form">
  <p> Please upload 200x60 png logo image</p>
  <div class="form-group">
    <div class="fileinput fileinput-new" data-provides="fileinput">
      <div class="fileinput-new thumbnail" style="width: 200px; height: 60px;">
        <img id="logo200_60_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" /> </div>
      <div id="logo200_60_preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 60px;"> </div>
      <div>
        <span class="btn default btn-file">
          <span class="fileinput-new"> Select image </span>
          <span class="fileinput-exists"> Change </span>
          <input type="file" name="..."    id="logo200_60"
                 > </span>
        <a href="#" class="btn default fileinput-exists" data-dismiss="fileinput"> Remove </a>
      </div>
    </div>

  </div>
</form>      

<form action="#" role="form" id="logo400_120_form" >
  <p> Please upload 400x120 png logo image</p>
  <div class="form-group">
    <div class="fileinput fileinput-new" data-provides="fileinput">
      <div class="fileinput-new thumbnail" style="width: 400px; height: 120px;">
        <img id="logo400_120_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" /> </div>
      <div id="preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 400px; max-height: 120px;"> </div>
      <div>
        <span class="btn default btn-file">
          <span class="fileinput-new"> Select image </span>
          <span class="fileinput-exists"> Change </span>
          <input type="file" name="..."  id="logo400_120"
                 > </span>
        <a href="#" class="btn default fileinput-exists" data-dismiss="fileinput"> Remove </a>
      </div>
    </div>

  </div>
</form>

Upvotes: 2

Related Questions