How to send both a form data and a POST variable to a php script through ajax

Question

I am trying to send both form data and a POST variable and I have no idea how to do it. I've tried to do this below:

const formthing = document.getElementById("theform");

function submitfunc(e){
e.preventDefault();
const thing = new XMLHttpRequest();
thing.open("POST", "edit.inc.php", true);

thing.onreadystatechange = function(){

if (thing.readyState == 4 && thing.status == 200){
var message = thing.responseText;

 $("#theform").html(message);

}

}

var videoid = "watever";

thing.send(new FormData(formthing), "videoid="+videoid);

}

But it does not work as the php script returns "jo"

<?php
if (isset($_POST['videoid']){

}
else{
echo "jo"
}
?>

When I take a look in.network it only looks like it is passing the form: what I see

If anyone has any ideas, feel free to let me know, If anything needs to be made clear. please ask.

Answer 1

HTML:

<form id="my-form" action="/" method="post">

  <input type="text" name="videoid"><input type="submit" value="Submit">

</form>

<div id="output"></div>

JS:

let myForm = document.querySelector( "#my-form" );
let output = document.querySelector( "#output" );

myForm.addEventListener( "submit", function(e) {

  e.preventDefault();

  let formData = new FormData( myForm );
  let xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {

    if( this.readyState == 4 && this.status == 200 ) {

      output.innerHTML = this.responseText;

    }

  }

  xhr.open( "POST", "edit.inc.php" );
  xhr.send( formData );

});