How to get value result from the same form?

Question

How can I take value results from this form?

<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>

And, JS is:

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);

also Php file is simple:

<?php

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

?>

so...my question is how to read variable "teloZahteva" from JS in console.log?

Answer 1

Your code is running when the page first loads, before the user has had a chance to fill in the form. So it will display empty values in the console.

Put the code in an event listener that runs when the user clicks the submit button.

 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>

This displays the form values in the console instead of sending the form to PHP.

Answer 2

After my code I wrote this code and it says:

Uncaught ReferenceError: createXHR is not defined

function formPost(url, form, callback){
    var xhr = createXHR();
    var data = sakupiPodatke(form);

    xhr.open("POST", url);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            var status = xhr.status;
            if ((status >= 200 && status < 300) || status === 304){
                callback(xhr.responseText);
            }else{
                alert("Greskica!");
            }
        }
    };
    xhr.send(data);;
}

function procesOdgovora(odgovor){
    alert(odgovor);
}

formPost("index.php", document.forma, procesOdgovora);

Answer 3

 <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" onclick="handleSubmit()"  />
     </p>
 </form>



handleSubmit(){
  var ime =getElementById('ime').value;
  var mail =getElementById('mail').value;

}