使用“清除”按钮重置（清除）输入字段 JS/HTML

Question

I have 1 input field, 1 dropdown menu and a datepicker field.我有 1 个输入字段、1 个下拉菜单和一个日期选择器字段。 So I made a function resetFields() which sets the value to empty string "".所以我创建了一个函数 resetFields() 将值设置为空字符串“”。 The information clears but for example if I choose a new date or other option in the select menu the old information comes back in the fields.信息会清除，但例如，如果我在选择菜单中选择新日期或其他选项，旧信息将返回到字段中。 How can I fully clear it ?我怎样才能完全清除它？ The project is on VueJS该项目在VueJS上

<input v-model="filter.number" placeholder="Number" id="number">
<select v-model="filter.type" style="width: 209px; float: right;" id="type">
    <option value="1">A</option>
    <option value="2">B</option>
</select>

<datepicker v-model="filter.date1" placeholder="Choose date" :format="DatePickerFormat" id="date1"></datepicker>
<button style="height: 30px;" @click="resetFields()">Clean</button> 

resetFields(){ 
    var number = document.getElementById('number'); 
    var type= document.getElementById('type'); 
    var date1 = document.getElementById('date1'); 
    number.value = ""; 
    type.value = ""; 
    date1.value = ""; 
}

Updated更新

const app = new Vue({
  el: '#app',
  render: h => h(App),
  router
})

This is my Vue instance这是我的 Vue 实例

Update2:更新2：

Data.vue
<input v-model="filter.number" placeholder="Number">

<button @click="resetFields()">Clear</button>

main.js

const app = new Vue({
  el: '#app',
    data () {
      return {
        filter: {
          eori: null,
          docSubType: null,
          data1: null
        },
      }
    },
    methods: {
      resetFields () {
        this.eori = null
        this.docSubType = null
        this.data1 = null
      }
    },
  render: h => h(App),
  router
})

and with your code example doesn't work.并且您的代码示例不起作用。

Update3更新3

Answer 1

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  Email: <input type="text" name="email"><br>
  Pin: <input type="text" name="pin" maxlength="4"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit">
</form>

<p>Click on the reset button to reset the form.</p>

</body>
</html>

The input type reset is a native implementation for form resets输入类型重置是表单重置的本机实现

Answer 2

Code responsible for clearing fields should be in the component where the fields are defined.负责清除字段的代码应位于定义字段的组件中。 Add a resetFields function under methods object of your Data.vue component.在 Data.vue 组件的methods对象下添加一个resetFields函数。

/* .. */
methods: {
  /* ... */
  resetFields() {
    this.filter.eori = ''
    this.filter.docSubType = ''
    this.filter.data1 = ''

    // Or just clear all object's properties
    Object.keys(this.filter).forEach(key => { 
      this.filter[key] = ''
    })
  }
}

Answer 3

change 1: add onclick="resetFields()" in ur button tag instead of @click=resetField()更改 1：在您的按钮标签中添加 onclick="resetFields()" 而不是 @click=resetField()

change 2: add jquery CDN to your HTML code just above tag https://code.jquery.com/更改 2：将 jquery CDN 添加到您的 HTML 代码正上方的标记https://code.jquery.com/

change 3: add a script tag in the same HTML as below: function resetFields(){$("#number").val("")}更改 3：在相同的 HTML 中添加一个脚本标记，如下所示： function resetFields(){$("#number").val("")}

You can use javascript also.您也可以使用 javascript。

thanks谢谢

使用“清除”按钮重置（清除）输入字段 JS/HTML

问题描述

3 个解决方案

解决方案1
1 2018-06-21 11:08:40

解决方案2
0 已采纳 2018-06-21 11:35:03

解决方案3
-1 2018-06-21 11:39:12

bangthugs暴徒

使用“清除”按钮重置（清除）输入字段 JS/HTML

问题描述

3 个解决方案

解决方案1 1 2018-06-21 11:08:40

解决方案2 0 已采纳 2018-06-21 11:35:03

解决方案3 -1 2018-06-21 11:39:12

bangthugs暴徒

解决方案1
1 2018-06-21 11:08:40

解决方案2
0 已采纳 2018-06-21 11:35:03

解决方案3
-1 2018-06-21 11:39:12