POST FormData to php using javascript and XMLHTTPRequest

Question

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>

ok, already did that, my mistake when building he example code, still it doesn't work. — rmarques
– rmarques, Commented Jun 28, 2015 at 17:19
I never used FormData, but it seems you shouldn't set a content type. Anyway, check what form the returned FormData is. I would start echoing the whole $_POST data. But before you can console.log(checkboxes_formData) this often helps understanding what happens. — ikrabbe
– ikrabbe, Commented Jun 28, 2015 at 17:42

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

9

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

answered Jun 28, 2015 at 18:10

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rmarques Over a year ago

I didn't know there were validators available! Wow this is great! I will revise the code and edit the post so that the validator gives as few errors as I can make it.

rmarques Over a year ago

The table is used to put many checkboxes in place, 30 or so, in different columns. I didn't know that it wouldn't work if the inputs were inside the same table row. Removed the table and the line xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); and then it worked.

tertek Over a year ago

"Remove the code that explicitly sets the content-type and let the browser generate it for you." This made the trick. Thank you!

Fluffeh Over a year ago

Thank you for this answer. Been going round in circles for ages till I saw this comment on the setHeaderRequest type.

dhh · Accepted Answer · 2015-06-28 19:50:10Z

0

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

edited Jun 28, 2015 at 19:50

dhh

4,3578 gold badges46 silver badges61 bronze badges

answered Jun 28, 2015 at 18:02

Aries

491 silver badge3 bronze badges

1 Comment

Quentin Over a year ago

You've got a syntax error in that, so it won't work … and it doesn't do what the code in the question is trying to do anyway.

Collectives™ on Stack Overflow

POST FormData to php using javascript and XMLHTTPRequest

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related