Question

我正在制作一个工具，其中包含一些我要输入信息的字段。我的表单中有两个按钮，一个按钮只是清除字段，第二个按钮我要启动字段中数据的下载。按钮代码是

            <button id="button-reset">Clear</button>
            <button id="button-save">download</button>

在.form_box按钮{}的早期样式定义中定义了按钮属性的位置。对于javascript来说，我很新，我复制了以下代码以方便下载功能

<script language="Javascript" >
  function download(filename, text) {
  var pom = document.createElement('a');
  	pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
 	pom.setAttribute('download', filename);
  	pom.style.display = 'none';
        document.body.appendChild(pom);
        pom.click();
        document.body.removeChild(pom);
	}
</script>

在我的表单标签中，我调用下载功能并传递参数，我需要命名要下载的.txt文件以及放置在文件中的文本。这很好，但是，当按下表单中的 any 按钮时，就会调用下载功能。我需要隔离对“下载”按钮的功能调用。我的想法是，我需要将if包裹pom.click（）语句，如果按下“下载”按钮，则“如果为true”。但是我可能完全错了。我尝试过的一件事是从表单标签中删除download（）调用，然后将其放入按钮标签中，如下所示：

<button type="button" onclick="download(this['ticket'].value, this['followup'].value); return false" id ="button-save">download</button>

这确实阻止了“清除”按钮调用download（）函数，但是“下载”按钮现在什么也不做。非常感谢您的帮助。

Answer 1

this是对表单的引用，但现在是对按钮的引用。指定表单而不是this可以。例如：

<button type="button" onclick="download(document.forms[String form_name]['ticket'].value, document.forms[String form_name]['followup'].value); return false" id ="button-save">download</button>

Answer 2

第一语言=“ Javascript”是错误的，标准格式是type =“ text / javascript”。这就是您可以修改表单以使“下载”功能正常工作的方式。

<form id="form_id">
   <input name="ticket" type="text">
   <input name="followup" type="text">
   <button id="button-reset" type="button" onclick="document.getElementById('form_id').reset();" >clear</button>
   <button id="button-save"  type="button" onclick="download(document.getElementById('form_id')['ticket'].value, document.getElementById('form_id')['followup'].value);" >Download</button>
</form>

由于type="button"，此按钮不会触发您的表单。

隔离表单中的download（）函数调用的特定按钮

2 个答案: