Question

问题是当我尝试重新提交表单而不刷新页面时，表单提交的事件处理程序将保留先前提交的值。

该表单包含一个select元素，其中填充有来自API的选项。选定的选项用于发出请求URL并从API获取数据。再次提交表单时，无需刷新表单。提交事件处理程序使用前一个值构造一个URL，然后使用新选择的值构造一个URL。我尝试在窗体上进行重置，该重置确实将select元素重置为其初始状态，但它并未从Submit事件处理程序中清除先前选择的值。

<form id="myform">
  <label for="input">Select dog breed!<label>
  <select class="breeds"></select>
  <input type="submit" value="Enter">
</form>

let $select = $(".breeds");

$select.append($(`<option>select breed</option>`))

for (var i=0; i<=breeds.length; i++){
  $select.append($(`<option></option>`).text(breeds[i]).html(breeds[i]))
}

$('.breeds').on('change', function(){
  console.log('on change running')
  let breed = $(".breeds :selected").text()
  console.log(`breed in on change: ${breed}`)
  watchForm(breed) 
})

function watchForm(breed) {
  console.log(`watchForm running`)
  console.log(`breed in watchform is: ${breed}`) //here breed logs as the value for first submission and then the second submission

  $('form').submit(event => {
    console.log(`breed in form submit is ${breed}`)
    event.preventDefault();
    //console.log(`num is ${num}`)
    getDogImage(breed);
    $('#myform').get(0).reset()
  });
}

Answer 1

jQuery选择器可以返回一个或多个元素，因此它返回一个数组。

由于reset（）是Javascript函数，并且我们在jquery中强制使用它，因此它需要特定的元素来执行重置操作。

$('#myform')[0].reset()

Answer 2

最佳和简单的解决方案使用trigger()

$('#myform').trigger("reset");

你很好走！！

Answer 3

您可以使用类似的方法。 $('myform').val('');

Answer 4

使用vanilla Javascript是最简单，最简单的方法，因为id在HTML文档中是唯一的。

document.getElementById("myForm").reset();

如何清除form.submit函数中存储的值

4 个答案: