0

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

该表单包含一个选择元素，该元素填充了来自 API 的选项。所选选项用于发出请求 URL 并从 API 获取数据。当表单第二次提交而不刷新表单时。提交事件处理程序用先前的值构造一个 URL，然后用新选择的值构造一个 URL。我试图在表单上重置，它将选择元素重置为其初始状态，但它没有从提交事件处理程序中清除先前选择的值。

<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()
  });
}
4

4 回答 4

0

你可以使用类似的东西。$('myform').val('');

于 2019-06-12T05:33:28.097 回答
0

使用vanilla Javascript是最简单和最简单的一种，因为id它在 HTML 文档中是独一无二的。

document.getElementById("myForm").reset();
于 2019-06-12T05:58:15.757 回答
0

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

由于 reset() 是一个 Javascript 函数，我们在 jquery 中强制使用它，它需要一个特定的元素来执行重置操作。

$('#myform')[0].reset()
于 2019-06-12T05:09:50.333 回答
0

有史以来最好和最简单的解决方案 使用trigger()

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

你很高兴去！

于 2019-06-12T05:16:15.977 回答