为什么要添加另一个< input>元素到我< form>打破我的onchange事件？ [英] Why does adding another <input> element to my <form> break my onchange event?

问题描述

我有一个使用onChange =function（event）的表单将mp3文件的文件夹列表从webkitdirectory传递给Javascript函数，如下所示：

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>

我的Javascript函数：

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;

< br $>




然后将文件名列表转换为带有分号分隔符的单个字符串然后我使用Ajax将其传递给PHP，并将其保存到服务器作为符合Excel标准的.csv文件，如下所示：

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']);

我想添加一个文本输入框到我的表单输入.csv文件的唯一名称，如下所示：

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>

所以我可以用它来命名PHP代码中的.csv文件，但每当我添加另一个< input>元素到表单，它打破了代码的现有功能，并且csv文件为空，即使我没有更改代码中的任何其他内容。



我尝试了什么：



用onSubmit替换onChange并添加一个Submit按钮（不理想，但如果有的话可能会有一个解决方法工作。）



在函数中添加一个额外的变量并处理函数内的csvName。

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.

推荐答案

_POST ['name']）;

_POST['name']);

file ='files.csv';
file_put_contents（

file = 'files.csv'; file_put_contents(

file，

这篇关于为什么要添加另一个&lt; input&gt;元素到我&lt; form&gt;打破我的onchange事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！