Несколько форм, используя тот же метод javascript

Question

Я немного застрял в чем-то, что я пытался сделать.

Я пытался получить несколько форм (шесть), чтобы использовать метод javascript, который у меня есть. Эти формы имеют текстовые входные значения и должны быть проверены, затем переданы в файл php, тогда AJAX используется для обновления страницы с подтверждением или с ошибкой.

В этом примере я буду использовать только две формы, это мои формы

<div class="trade_info_1"> 
      <h2>Market #1</h2> 
      <form action="" method="POST"> 
       <ul> 
        <li> 
         <label for="market_1">Market: </label><input type="text" name="market_1" id="market_1" /> 
        </li> 
        <li> 
         <button type="button" name="button1" id="button1" onclick="check_update_selection()">Update Market!</button> 
        </li> 
       </ul> 
       <input type="hidden" name="market_number" id="market_number" value="1" /> 
       <div id="market_1_output">output</div> 
      </form> 
     </div> 

     <div class="trade_info_2"> 
      <h2>Market #2</h2> 
      <form action="" method="POST"> 
       <ul> 
        <li> 
         <label for="market_2">Market: </label><input type="text" name="market_2" id="market_2" /> 
        </li> 
        <li> 
         <button type="button" name="button2" id="button2" onclick="check_update_selection()">Update Market!</button> 
        </li> 
       </ul> 
       <input type="hidden" name="market_number" id="market_number" value="2" /> 
       <div id="market_2_output">output</div> 
      </form> 
     </div> 

Теперь и где AJAX будет обновлять страницу. Это метод я уже (JS)

function check_update_selection() 
{ 
if (window.XMLHttpRequest) 
{ 
    xhr = new XMLHttpRequest(); 
} 
else if (window.ActiveXObject) 
{ 
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
} 

console.log('Market value: ' + document.getElementById('market_number').value); 

if(document.getElementById('market_number').value == 1) 
{ 
    var market = document.getElementById('market_1').value;; 
    var market_number = 1; 
    var html_element = 'market_1'; 
} 
else if(document.getElementById('market_number').value == 2) 
{ 
    var market = document.getElementById('market_1').value; 
    var market_number = 2; 
    var html_element = 'market_2'; 
} 

xhr.open('POST', 'update_market.php'); 
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
var obj = {market: market}; 
xhr.send("data=" + JSON.stringify(obj)); 
xhr.onreadystatechange=function() 
{ 
    if (xhr.readyState==4) 
    { 
     if(market_number == 1) 
     { 
      document.getElementById("market_1_output").innerHTML = xhr.responseText; 
     } 
     else if(market_number == 2) 
     { 
      document.getElementById("market_2_output").innerHTML = xhr.responseText; 
     } 
    } 
} 

не будет включать в себя PHP, потому что все это эхо слово «TEST».

Первая форма работает отлично, однако вторая форма не подходит, кажется, первая форма. поэтому я использовал console.log(); и обнаружил, что каждый раз, когда я представляю вторую форму, она, кажется, представляет поля из первой формы.

Я иду по правильному пути об этом или есть что-то, что мне не хватает?

Также я изучаю javascript по мере того, как мы говорим, поэтому мои знания о платформе не самые лучшие, поэтому, пожалуйста, указывайте на любые ошибки, которые я сделал.

Спасибо за ваше время.

Answer 1

Вы не можете поставить на той же странице 2 элементов с одинаковым идентификатором (market_number):

<input type="hidden" name="market_number" id="market_number" value="2" /> 

лучшее решение могло бы быть, чтобы определить основную функцию check_update_selection параметр, а затем просто назвать ее с пары из каждой формы:

function check_update_selection(number) 

и от вашего HTML называют его с правильным номером:

onclick="check_update_selection(1)" 
onclick="check_update_selection(2)" 

Answer 2

Первый, имеющий несколько форм на одной странице, указывающий на одно и то же действие, является плохой практикой. Второй идентификатор элементов должен быть уникальным.

Если вы новичок, то проверьте HTML в валидаторе w3c, что вы придете, чтобы многому научиться из этого.