Using AJAX to change a file in PHP - php

Question

I'm trying to duplicate a file and put some information in. First I used the form-method-action (Method 1). This worked. But I wanted to used Ajax to stay on the same page. So then I created Method 2 but this method doesn't work.
This is how my folder looks like. The 'Document.docx' has '$naam' in it's file
HTML METHOD 1:
<form method="post" action="kopie.php">
<ul>
<li><input type="text" name="factuur" id="factuur" placeholder="factuurnaam"></li>
<li><input type="text" name="naam" id="naam" placeholder="naam"></li>
<li><input type="submit" name="submit" id="submit"></li>
</ul>
<h2 class="ans"></h2>
</form>
HTML METHOD 2:
<ul>
<li><input type="text" name="factuur" id="factuur" placeholder="factuurnaam"></li>
<li><input type="text" name="naam" id="naam" placeholder="naam"></li>
<li><input type="submit" name="submit" id="submit"></li>
</ul>
<h2 class="ans"></h2>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function() {
$.ajax({
url: 'kopie.php',
method: 'POST',
data: {
factuur: factuur,
naam: naam
}
success: function() {
$('#ans').html("It worked");
}
})
})
})
</script>
PHP FOR BOTH METHODS:
$factuur = $_POST['factuur'];
$zip = new ZipArchive;
//This is the main document in a .docx file.
$fileToModify = 'word/document.xml';
$wordDoc = "Document.docx";
$newFile = $factuur . ".docx";
copy("Document.docx", $newFile);
$naam2 = $_POST['naam'];
if ($zip->open($newFile) === TRUE) {
$oldContents = $zip->getFromName($fileToModify);
$newContents = str_replace('$naam', $naam2, $oldContents);
$zip->deleteName($fileToModify);
$zip->addFromString($fileToModify, $newContents);
$return =$zip->close();
If ($return==TRUE){
echo "Success!";
}
} else {
echo 'failed';
}
$newFilePath = 'factuur/' . $newFile;
//Move the file using PHP's rename function.
$fileMoved = rename($newFile, $newFilePath);

Answer 1

You need to define your input value on your data.
$(document).ready(function(){
$("#submit").click(function() {
$.ajax({
url: 'kopie.php',
method: 'POST',
data: {
factuur: $('input[name=factuur]').val(),
naam: $('input[name=naam]').val()
},
success: function() {
$('#ans').html("It worked");
}
})
})
})

Answer 2

Try this in your AJAX - I'll note the changes.
$(document).ready(function(e){
e.preventDefault(); //keeps the page from refreshing
$("#submit").click(function() {
//notice I'm gathering the form data here.
var data = { 'factuur' : $("#factur").val(),
'naam' : $("#naam").val()
}
$.ajax({
url: 'kopie.php',
method: 'POST',
data: data, //referencing the data variable above
dataType: html
success: function() {
$('#ans').html("It worked");
}
})
})
})