Question

该按钮用于控制表单的显示。我的目标是当用户点击按钮删除表单时：

表格将从屏幕上删除
按钮值变为＆＃34;添加＆＃34;
表单将被重置，因此用户无法提交表单。

我能够让1号和2号工作。但是，我无法重置表单（即输入的值仍然有值，用户仍然可以提交表单）

＆＃13;

function formHandler() {

  var displayStatus = document.getElementById('form1').style.display

  if (displayStatus === 'none') {
    document.getElementById('form1').style.display = '';
    document.getElementById('geoButton').value = "Remove";
    document.getElementById('form1').reset();
  } else {
    document.getElementById('form1').style.display = 'none';
    document.getElementById('geoButton').value = "Add";
    document.getElementById('form1').reset();
  }

}

＆＃13;

<div id="form1">
  <div class=".col1" style="float:left;vertical-align: middle;">

    {{ form.region }} {{ form.operator }}
  </div>

  <div class="col-xs-2 style=" vertical-align: middle; ">
			{{ form.value }}
		</div>
			
		</div>	
			<div>
				<input id = "geoButton " type="button " class = "btn " value="Add " onclick = "formHandler() " />
			</div>

＆＃13;

Answer 1

这是你想要达到的目标吗？

＆＃13;

function formHandler() {

  var displayStatus = document.getElementById('form1').style.display

  if (displayStatus === 'none') {
    document.getElementById('form1').style.display = '';
    document.getElementById('geoButton').value = "Remove";
    document.getElementById('form1').reset();
  } else {
    document.getElementById('form1').style.display = 'none';
    document.getElementById('geoButton').value = "Add";
    document.getElementById('form1').reset();
  }

}

＆＃13;

<form id="form1">
  <div class=".col1" style="float:left;vertical-align:  middle;">
    {{ form.region }} {{ form.operator }}
  </div>

  <div class="col-xs-2" style="vertical-align: middle;">
    {{ form.value }}
  </div>

</form>

<div>
  <input id="geoButton" type="button" class="btn" value="Add" onclick="formHandler()" />
</div>

＆＃13;

在form1上调用reset不会在代码中执行任何操作，因为它是div而不是表单。在div上调用reset函数会导致控制台错误，该错误基本上告诉您函数不可用。

javascript中的form.reset不起作用

1 个答案: