Не удается получить значения формы из отправленной формы в элементе списка

Question

in jQuery, я динамически создаю элементы списка, и каждый из них содержит небольшую форму со скрытыми полями. Идентификаторы формы создаются динамически и записываются обратно в идентификатор. Это все отлично работает. Моя проблема в том, что когда я нажимаю кнопку выбора в одном из элементов списка, я не могу получить значения входных данных в форме. У кого-нибудь есть идеи?

    $(document).on('click', '.select-button', function(e) {
        var selectedFormID = $(this).parent().attr("id"); // gets the ID of the form selected
        document.getElementById(selectedFormID).submit(); // submits the correct <li><form> selected
            userzip = $("#userzip").val(); // can't get any of these values 
            services = $("#services").val();
    });

Если бы я использовал:

$(document).on('submit', '#form_someID', function(e) {
            e.preventDefault();
            userzip = $("#userzip").val();
            services = $("#services").val();
            alert(services);
});

Это работает нормально ... но идентификатор - stati c, который не помогает .. Мне нужно отправить ТОЛЬКО форму выбранного элемента списка.

Любой вклад будет принят с благодарностью

Answer 1

id должен быть уникальным для документа, вы можете использовать name для формы

$(document).on('click', '.ss-select-location', function(e) {
  var $form = $(this).closest('form');
  var userzip = $form.find('[name=userzip]').val();
  var services = $form.find('[name=services]').val();

  alert(services);

  $form.submit();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul id="locations-list" class="accordion">
  <li class="accordion-item">
    <h3 class="accordion-thumb">
      Lower Manahattan
      <span class="ss-distance">
                (0 mi away)
            </span>
    </h3>
    <div id="location_NYC01" class="accordion-panel step-two">
      <form id="locationForm_NYC01" class="locationForm" method="post">
        <div class="row ss-address">
          <div class="col-6">
            1313 mockingbird lane
            <br> Suite 500
            <br> New York, NY 10018
            <br> (212) 555-1212
          </div>
          <div class="col-6 ss-hours">
            Sun
            <span class="ss-time">
                            closed
                        </span>
            <br> Mon
            <span class="ss-time">
                            9:00am - 6:00pm
                        </span>
            <br> Tue
            <span class="ss-time">
                            9:00am - 8:00pm
                        </span>
            <br> Wed
            <span class="ss-time">
                            9:00am - 8:00pm
                        </span>
            <br> Thur
            <span class="ss-time">
                            9:00am - 8:00pm
                        </span>
            <br> Fri
            <span class="ss-time">
                            9:00am - 6:00pm
                        </span>
            <br> Sat
            <span class="ss-time">
                            8:00am - 5:00pm
                        </span>
          </div>
          <input name="userzip" type="hidden" value="10018">
          <input name="shortcode" type="hidden" value="NYC01">
          <input name="services" type="hidden" value="NYC01 values">
          <input name="sources" type="hidden" value="NYC01 values">
          <input name="corporate" type="hidden" value="1">
        </div>
        <button type="button" class="ss-select-location">
                                        Select This Location
                                    </button>
      </form>
    </div>
  </li>
  <li class="accordion-item">
    <h3 class="accordion-thumb">
      Queens
      <span class="ss-distance">
                (20 mi away)
            </span>
    </h3>
    <div id="location_NYC04" class="accordion-panel step-two">
      <form id="locationForm_NYC04" class="locationForm" method="post">
        <div class="row ss-address">
          <div class="col-6">
            3100 elfenview lane
            <br> Suite 100
            <br> Rosedale, NY 10020
            <br> (212) 555-1214
          </div>
          <div class="col-6 ss-hours">
            Sun
            <span class="ss-time">
                            closed
                        </span>
            <br> Mon
            <span class="ss-time">
                            9:00am - 6:00pm
                        </span>
            <br> Tue
            <span class="ss-time">
                            9:00am - 8:00pm
                        </span>
            <br> Wed
            <span class="ss-time">
                            9:00am - 8:00pm
                        </span>
            <br> Thur
            <span class="ss-time">
                            9:00am - 8:00pm
                        </span>
            <br> Fri
            <span class="ss-time">
                            9:00am - 6:00pm
                        </span>
            <br> Sat
            <span class="ss-time">
                            8:00am - 5:00pm
                        </span>
          </div>
          <input name="userzip" type="hidden" value="10020">
          <input name="shortcode" type="hidden" value="NYC04">
          <input name="services" type="hidden" value="NYC04 values">
          <input name="sources" type="hidden" value="NYC04 values">
          <input name="corporate" type="hidden" value="1">
        </div>
        <button type="button" class="ss-select-location">
                                        Select This Location
                                    </button>
      </form>
    </div>
  </li>
</ul>