CODEWITHSUNDEEP
javascriptphphtml
DanijelS
DanijelS

Reputation: 3

How to get value result from the same form?

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?

Upvotes: 0

Views: 155

Answers (3)

DanijelS
DanijelS

Reputation: 3

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

Upvotes: 0

Merci Dieu KIMPOLO
Merci Dieu KIMPOLO

Reputation: 443

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

}

Upvotes: -1

Barmar
Barmar

Reputation: 781004

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.

Upvotes: 4

Related Questions