Как получить вторую форму на странице?

Question

Как с помощью jQuery получить вторую форму на странице?

Нужна та, которая без method="POST"

Пример кода:

<body>
   <div class="pagedata_tag" pid="59" t="8" curr="rubil"></div>
   <div class="widget_modal widget_subscr">
      <div class="control flex">
         <svg>
         </svg>
      </div>
      <div class="body_widget">
         <div class="name_wiidget">Subscribe to the newsletter!</div>
         <div class="description_widget">Stay informed about events and promotions</div>
         <form method="POST" accept-charset="utf-8" class="subscribe subscribe_form">
            <input type="text" name="name" class="sp" />
            <label for="">Ваш e-mail</label>
            <input type="email" name="email" />
            <input type="submit" value="Subscribe" class="btn orange fw_bold">
         </form>
      </div>
   </div>
   <div class="widget_modal widget_gift">
   <div class="control flex">
   </div>
   <div class="body_widget">
   <div class="name_wiidget">Products</div>
   <div class="description_widget">Great deals with gifts</div>
   <ul class="list_action_prod">
   <li class="flex shk-item">
      <div class="img">
         <a href="minitraktor-skaut-t-18-s-pochvofrezoj.html">
         <img src="assets/cache/images/scout2018/152x134-T18_2019Style.80d.jpg" alt="T-18 (Generation II)">
         </a>
      </div>
      <div class="info_prod">
         <a href="minitraktor-skaut-t-18-s-pochvofrezoj.html">T-18 (Generation II)</a>
         <div class="price flex">
            <span>199'900</span><i class="fas fa-ruble-sign"></i> 
            <div class="gift"><img src="assets/cache/images/products/navesnoe/50x50-Duga_safe1.1d0.jpg" alt="Gift: Safety bar for SCOUT tractors"></div>
         </div>
         <form>
            <input type="hidden" name="shk-id" value="1722"/>
            <input type="hidden" name="shk-price" value="199900" /> 
            <input type="hidden" class="complexadd" name="presentid__1722__add" value="3858" />
            <input type="hidden" class="complexadd" name="present__1722__add" value="<u>Gift:</u>:<br/> Safety bar for SCOUT tractors " />
            <div class="btn orange shk-but header_gift_buy_btn"><img src="/img/icon/ico_btn_buy.svg">Buy</div>
         </form>
      </div>
   </li>

Вот js скрипт:

$('.js_buy-1-click-cart').click(function(event){
let _form = $( this ).closest('FORM');

let id              = _form.find('input[name="shk-id"]').val();

console.log(_form);

$.ajax({
    url: "/assets/shop/plugin.ajax.php",
    dataType: "json",
    type: "POST",
    data: {
        'ajax'  : 'one_click_buy_cart',
        'id'    : id
    },

    beforeSend: function () {},
    success: function (res) {
        $('#js_one_click_form').html(res.content);
        grecaptcha.render('js_one_click_buy_recaptcha', {
            sitekey: '',
            callback: function(response) {
            }
        });
        show_modal('#buy_1_click_modal');
        return false;
    },
    error: function(req, err){ console.log('my message' + '  '  + id + '  ' + err); }
});
});

Пробовал двумя способами:

let _form = $(this).closest('FORM')
let _form = $(this).parents('FORM')

Answer 1

Для того что бы выбрать второй (по расположению в документе) элемент form Вам, достаточно воспользоваться методом closest() до ближайшего корневого элемента (в Вашем случае body) и запустить поиск как обычно сверху вниз:

$(this).closest("body").find("form").eq(1) // второй по счету

или

$(this).closest("body").find("form").not("[method]") // без аттрибута method

$(".js_buy-1-click-cart").on("click", function(event) {
  console.log($(this).closest("body").find("form").eq(1))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" accept-charset="utf-8" class="subscribe subscribe_form">
  <input type="text" name="name" class="sp" />
  <label for="">Ваш e-mail</label>
  <input type="email" name="email" />
  <input type="submit" value="Subscribe" class="btn orange fw_bold">
</form>
</div>
</div>
<div class="widget_modal widget_gift">
  <div class="control flex">
  </div>
  <div class="body_widget">
    <div class="name_wiidget">Products</div>
    <div class="description_widget">Great deals with gifts</div>
    <ul class="list_action_prod">
      <li class="flex shk-item">
        <div class="img">
          <a href="minitraktor-skaut-t-18-s-pochvofrezoj.html">
            <img src="assets/cache/images/scout2018/152x134-T18_2019Style.80d.jpg" alt="T-18 (Generation II)">
          </a>
        </div>
        <div class="info_prod">
          <a href="minitraktor-skaut-t-18-s-pochvofrezoj.html">T-18 (Generation II)</a>
          <div class="price flex">
            <span>199'900</span><i class="fas fa-ruble-sign"></i>
            <div class="gift"><img src="assets/cache/images/products/navesnoe/50x50-Duga_safe1.1d0.jpg" alt="Gift: Safety bar for SCOUT tractors"></div>
          </div>
          <form>
            <input type="hidden" name="shk-id" value="1722" />
            <input type="hidden" name="shk-price" value="199900" />
            <input type="hidden" class="complexadd" name="presentid__1722__add" value="3858" />
            <input type="hidden" class="complexadd" name="present__1722__add" value="<u>Gift:</u>:<br/> Safety bar for SCOUT tractors " />
            <div class="btn orange shk-but header_gift_buy_btn"><img src="/img/icon/ico_btn_buy.svg">Buy</div>
          </form>
        </div>
      </li>
      
      <button class="js_buy-1-click-cart">GET SECOND FORM</button>

БЛОГ НА HUSL

Как получить вторую форму на странице?

Ответы (1 шт):