javascript - 如何从同一个表单中得到值(value)结果？

Question

如何从此表单中获取有值(value)的结果？

<form name="forma" method="post" action="index.php"  id="dunja" >
    <p>
        Ime: <input id="ime" type="text" name="txtIme" value="" />
    </p>
    <p>
        Email: <input id="mail" type="text" name="txtEmail" value="" />
    </p>
    <p>
        <input type="submit" name="btnProsledi" value="Prosledi"  />
    </p>
</form>

并且，JS 是:

function sakupiPodatke(form){
    var delovi = [];
    var elementi = form.elements;

    for(var i=0; i<elementi.length; i++){
        var element = elementi[i];
        var naziv = encodeURIComponent(element.name);
        var vrednost = encodeURIComponent(element.value);

        delovi.push(naziv + "=" + vrednost);
    }

    return delovi.join("&");
}

var teloZahteva = sakupiPodatke(document.forma);

console.log(teloZahteva);

PHP 文件也很简单:

<?php

$ime = $_POST["txtIme"];
$email = $_POST["txtEmail"];

?>

所以......我的问题是如何从console.log中的JS读取变量“teloZahteva”？

Answer 1

您的代码在页面首次加载时运行，在用户有机会填写表单之前。因此它将在控制台中显示空值。

将代码放入用户单击提交按钮时运行的事件监听器中。

document.getElementById("dunja").addEventListener("submit", function(e) {
  e.preventDefault();
  var teloZahteva = sakupiPodatke(e.target);
  console.log(teloZahteva);
});

function sakupiPodatke(form) {
  var delovi = [];
  var elementi = form.elements;

  for (var i = 0; i < elementi.length; i++) {
    var element = elementi[i];
    var naziv = encodeURIComponent(element.name);
    var vrednost = encodeURIComponent(element.value);

    delovi.push(naziv + "=" + vrednost);
  }

  return delovi.join("&");
}

<form name="forma" method="post" action="index.php" id="dunja">
  <p>
    Ime: <input id="ime" type="text" name="txtIme" value="" />
  </p>
  <p>
    Email: <input id="mail" type="text" name="txtEmail" value="" />
  </p>
  <p>
    <input type="submit" name="btnProsledi" value="Prosledi" />
  </p>
</form>

这会在控制台中显示表单值，而不是将表单发送到 PHP。