Why does adding another <input> element to my <form> break my onchange event?

See more:

Javascript

PHP

Ajax

HTML5

I have a form which uses an onChange="function(event)" to pass a folder listing of mp3 files to a Javascript function from webkitdirectory, like this:

<form>
<input type="file" value="Browser Folder" onChange="selectFolder(event)" webkitdirectory directory multiple>
</form>

My Javascript function:

function selectFolder(e) {

	var theFiles = e.target.files;
	
	var fileList = "";
	
	for (var i=0, file; file=theFiles[i]; i++) {
		if ((file.name).substr((file.name).lastIndexOf('.')+ 1) === "mp3") {
			
			fileList = fileList+ String.fromCharCode(13)+(file.name).slice(0, -4);
		}
	}
	fileList = fileList.replace(/ - /g,";");
	fileList = "sep=;" + fileList;

then turns the filename list into a single string with semicolon separators and I then use Ajax to pass that to PHP where it is saved to the server as an Excel compliant .csv file like this:

echo ($_POST['name']);
	$file = 'files.csv';
	file_put_contents($file,$_POST['name']);

I want to add a text input box to my form to enter a unique name for the .csv file, like this:

<form>
<input type="text" name="csvName">
<input type="file" value="Browser Folder" onChange="selectFolder(event)" webkitdirectory directory multiple>
</form>

so I can use it to name the .csv file in the PHP code, but whenever I add another <input> element to the form, it breaks the existing functionality of the code, and the csv file is empty, even if I don't change anything else in the code.

What I have tried:

Replacing onChange with onSubmit and adding a Submit button (Not ideal, but it would have been a workaround had it worked.)

Adding an extra variable to the function and processing csvName inside the function.