Выбор информации формы, когда у нас есть несколько форм с одинаковыми идентификаторами в JavaScript

Question

У меня есть несколько форм на HTML-странице с одинаковым идентификатором.
Я хочу отправить информацию о формах на сервер, который выбрал пользователь. Я также много об этом искал и не смог найти ничего связанного.
для моей политики авторизации мне нужно отправить запрос с заголовком на предъявителя
моя проблема в том, что когда я отправляю форму 2, мой js-код отправляет значение формы 1
я не могу использовать конкретный идентификатор для каждой формы, потому что у меня естьмного форм

как я могу это сделать ???

PS Я бы с удовольствием удалил вопрос, если на всех SO форумах есть дубликаты.

function myFunction() {
  var InputNumber = document.querySelectorAll('input[id=InputNumberNewMenu]');
  for (i = 0; i < InputNumber.length; i++) {
    if (InputNumber[i].value !== "") {
      var InputName = InputNumber[i].value;
    }
  }
  var InputDate = document.querySelector('input[id=InputDate]').value;
  var RestaurantId = document.querySelector('input[id=RestaurantId]').value;
  var foodId = document.querySelector('input[id=foodId]').value;
  var address = document.querySelector('input[id=address]:checked').value;
  var token = localStorage.getItem('token');
  var getUrl = window.location;
  var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[0];
  $.ajax({
    type: 'POST',
    url: baseUrl + '/api/order/add',
    dataType: "json",
    contentType: 'application/json',
    data: JSON.stringify({
      number: InputName,
      restaurant_id: RestaurantId,
      food_id: foodId,
      order_date: InputDate,
      address: address
    }),
    beforeSend: function(xhr) {
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.setRequestHeader('Authorization', 'Bearer ' + token);
    },
    success: function(data) {
      var ipg = data.data.url;
      window.location.replace(ipg);
    },
    error: function(data) {

    }
  });
}

<form enctype="multipart/form-data" id="form" style="text-align: center">
  <div class="form-group">
    <label for="InputNumberNewMenu" style="margin-top: 8px">number</label>
    <div class="row" style="display: flex;direction: ltr;justify-content: center;">
      <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
      <input type="number" id="InputNumberNewMenu" value="1" />
      <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
    </div>
  </div>
  <div class="form-group">
    <label for="address">address:</label>
    <input type="radio" id="address" name="address" value="1" required> address1 <br>
    <input type="radio" id="address" name="address" value="2" required> address2 <br>
  </div>
  <input type="hidden" class="form-control" id="InputDate" value="2018-12-16">
  <input type="hidden" class="form-control" id="RestaurantId" name="restaurant_id" value="1">
  <input type="hidden" class="form-control" id="foodId" name="food_id" value="1">
  <button type="button" onclick="myFunction()" class="btn btn-primary">submit </button>
</form>
<form enctype="multipart/form-data" id="form" style="text-align: center">
  <div class="form-group">
    <label for="InputNumberNewMenu" style="margin-top: 8px">number</label>
    <div class="row" style="display: flex;direction: ltr;justify-content: center;">
      <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
      <input type="number" id="InputNumberNewMenu" value="1" />
      <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
    </div>
  </div>
  <div class="form-group">
    <label for="address">address:</label>
    <input type="radio" id="address" name="address" value="1" required> address1 <br>
    <input type="radio" id="address" name="address" value="2" required> address2 <br>
  </div>
  <input type="hidden" class="form-control" id="InputDate" value="2018-12-16">
  <input type="hidden" class="form-control" id="RestaurantId" name="restaurant_id" value="1">
  <input type="hidden" class="form-control" id="foodId" name="food_id" value="2">
  <button type="button" onclick="myFunction()" class="btn btn-primary">submit </button>
</form>

Answer 1

Посмотрите на это: https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

... уникальный идентификатор (ID)

Итак.В вашем коде вы должны изменить идентификаторы

<input type="radio" id="address" name="address" value="1" required>  address1 <br>
<input type="radio" id="address" name="address" value="2" required>  address2 

на

<input type="radio" id="address1" name="address" value="1" required>  address1 <br>
<input type="radio" id="address2" name="address" value="2" required>  address2

То же самое с идентификаторами форм, такими как "адрес-форма", "данные-форма" или "что-то-else-form "(или camelCase, как вы хотите).И в вашем коде JavaScript, чтобы получить их с его реальным и уникальным идентификатором.

Идентификатор, используемый для получения правильного доступа к элементу.Если у вас есть несколько элементов, к которым вам нужно получить доступ, используйте классы или другие идентификаторы.

Answer 2

ID должен быть уникальным для каждого отдельного элемента, вы должны использовать что-то другое вместо идентификаторов.

Использовать из события onsubmit

<form onsubmit="myFunction">...</form>

function myFunction(event) {
  event.preventDefault()
  var form = event.target

  // define your input data
  var input1 = $(form).find('[name=input1]').val()

  $.ajax(url, { /* your ajax setup */ })
}