Ajax принять данные из формы

185

27 мая 2018, 23:10

Всем доброго времени суток. Такой вопрос: есть форма примерно следующего содержания:

    <? $count=1;
    while ($count<10){ ?>      
    <form action="/do_smt.php" method="post" onsubmit="return submitData(this);" id="do_smt">                                
                <input type="hidden" value="<? echo $count ?>" id="number" name="number">
                <input type="submit" name="submit" value="Отправить" >
    </form>
    <?}?>

И обработка формы:

    function submitData(fdata) {
    var xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        console.log(xhttp.responseText);
        var output = document.forms["do_smt"].elements["number"].value;
        console.log(output);
    };
    xhttp.open(fdata.method, fdata.action, true);
    xhttp.send(new FormData(fdata));
    return false;
}

В результате обработки получается, что ajax всегда выводит "1", какую бы кнопку не нажимали. Были попытки сделать через

document.querySelector('#number')

но все равно та же проблема

Answer 1

У всех форм id="do_smt", и у всех инпутов id="number". По id находится всегда первый элемент с таким id.

Для формы id не нужен, а в инпуте заменим id="number" на class="number":

<? $count=1;
while ($count<10){ ?>
<form action="/do_smt.php" method="post" onsubmit="return submitData(this);">
  <input type="hidden" value="<? echo $count ?>" class="number" name="number">
  <input type="submit" name="submit" value="Отправить" >
</form>
<?}?>
function submitData(fdata) {
  var xhttp = new XMLHttpRequest();
  xhttp.onload = function () {
    console.log(xhttp.responseText);
    var output = fdata.querySelector(".number").value;
    console.log(output);
  };
  xhttp.open(fdata.method, fdata.action, true);
  xhttp.send(new FormData(fdata));
  return false;
}