POST FormData to php using javascript and XMLHTTPRequest

Question

POST FormData to php using javascript and XMLHTTPRequest

7.8k views Asked by rmarques At 25 December 2024 at 11:07

At the moment I have two files, index.htm and accessdata.php. This is what I have in index.htm:

<html>
<head>
<script>
function postData() {
  var xmlhttp=new XMLHttpRequest();
  var url = "accessdata.php";
  var checkBoxes_formData = new FormData(document.getElementById("checkBoxes"));

  xmlhttp.open("POST",url,true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send(checkBoxes_formData);

  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("result").innerHTML=xmlhttp.responseText;
    }
  }
}
</script>

</head>

<body>
<button type="button" onclick="postData()">POST</button>

<form id=checkBoxes>
<table>
    <tr><input type="checkbox" name="opt1" value="blue" checked> Blue</td>
    <tr><input type="checkbox" name="opt2" value="yellow"> Yellow</td> 
</table>
</form>

<p id="result"></p>

</body>
</html>

and this is what I have in accessdata.php:

<?php

$opt1=$_POST['opt1'];
echo $opt1;

echo "bla";
?>

Now, on

<p id="result"></p>

"bla" shows up, but not "blue", or "yellow".

What am I doing wrong?

THE CORRECT HTML CODE BELOW!!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>POST PHP XMLHTTPRequest</title>
<script>
function postData() {
  var xmlhttp=new XMLHttpRequest();
  var url = "accessdata.php";
  var checkBoxes_formData = new FormData(document.getElementById("checkBoxes"));

  xmlhttp.open("POST",url,true);
  xmlhttp.send(checkBoxes_formData);

  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("result").innerHTML=xmlhttp.responseText;
    }
  }
}
</script>

</head>

<body>
<button type="button" onclick="postData()">POST</button>

<form id="checkBoxes">
<input type="checkbox" name="opt1" value="blue"> Blue
<input type="checkbox" name="opt2" value="yellow" checked> Yellow

</form>

<p id="result"></p>

</body>
</html>

Original Q&A

There are 2 answers

Aries On 28 June 2015 at 18:02

Tap to create a note You should try this…

<form method=post action=accessdata.php>
    <input type=checkbox value=blue name=opt1>blue
    <input type=submit value=submit name=send>
</form>

In accessdata. PHP

if❨isset❨$_POST[`send']❩❩ {
    $color=$_POST[`opt1'];
    echo $color."bala";
}

**Quentin** · Accepted Answer · 2015-06-28 18:10:24

blue doesn't show up because you are claiming:

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

But FormData objects encode data as multipart/form-data.

Remove the code that explicitly sets the content-type and let the browser generate it for you. (Don't try to explicitly set it to multipart/form-data, you have to specify what the boundary marker is going to be in the header too).

yellow doesn't show up for the same reason, but also because:

You are only looking at opt1 and it is associated with the name opt2 and
Checkbox controls are only successful (i.e. will be in the data that gets submitted) if they are checked (which the yellow one is not by default).

Complicating matters further, your HTML is invalid. Use a validator. You can't have an input as a child of a table row, you need to create a table data cell between them. (Note that it looks like you are trying to use a table for layout, you should probably get rid of the table entirely).

TechQA.

POST FormData to php using javascript and XMLHTTPRequest

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in PHP

Related Questions in HTML

Related Questions in XMLHTTPREQUEST

Related Questions in FORM-DATA

Popular Questions

Popular Tags

Trending Questions