javascript - 使用 JavaScript 提交表单后，如何清除 HTML 表单的特定输入字段

Question

我正在构建一个将数据提交到 firebase 数据库的 Web 表单。我有输入字段，一旦用户提交数据，我需要特定字段来清除或设置回默认值。我不确定这样做的正确方法，但我有一个自定义代码，但是它甚至在提交之前清除了字段，因此您会在数据库中找到一个空输入（检查下面的代码），并且大多数指南都在谈论重置整个表格不是我想要的。任何人都可以帮助我或指导我，以便我可以在提交表单后明确特定的输入字段。应该清除的字段是“蔬菜种植”和“消息”下面是示例代码

Up here is code to submit the form

// Once form submitted, Reset some specific fields
document.getElementById('myForm').addEventListener('submit', resetLabels);
function resetLabels()
{
  //myForm is the name of form
  var cells = document.getElementById('myForm').elements;
  for (var i= 0; i < cells.length; i++) {
      if(cells[i].name == 'veg_planted' && cells[i].name == 'message')//for example to not reset by name 
      cells[i].value='';

  }
}

<div class="row fill-form">
                <!--Vegetable Planted Section-->
                <div class="form_item col-md-6 mg-b">
                    <label for="veg_planted" class="form_label">Vegetable Planted<span>*</span></label>
                    <select name="veg_planted" id="veg_planted" class="form_input"  required>
                        <option selected disabled>Choose a plant from the list</option>
                        <option value="Agastache - Hyssop">Agastache - Hyssop</option>
                        <option value="Ageratum">Ageratum</option>
                    </select>
                </div>
                <!--End of Vegetable Planted Section-->

                <!--Date Planted Section-->
                <div class="form_item col-md-6 mg-b">
                    <label for="date" class="form_label">Date Planted<span>*</span></label>
                    <input type="date" name="date" id="date_planted" class="form_input" required />
                </div>
                <!--End of Date Planted Section-->

                <!--Planting Technique Section-->
                <div class="form_item col-md-6 mg-b">
                    <label for="planting_tech" class="form_label">Planting Technique<span>*</span></label>
                    <select name="planting_tech" id="planting_tech" class="form_input" required>
                        <option selected disabled>Choose a Planting Technique</option>
                        <option value="Indoors from Seed">Indoors from Seed</option>
                        <option value="Outdoors from seed (no cover protection)">Outdoors from seed (no cover protection)</option>
                    </select>
                </div>
                <!--End of Planting Technique Section-->

                <!--Gardening Experience Section-->
                <div class="form_item col-md-6 mg-b">
                    <label for="experience" class="form_label">Years of Gardening Experience<span>*</span></label>
                    <select name="experience" id="experience" class="form_input" required>
                        <option selected disabled>Select an Experience Level</option>
                        <option value="0-2 Years">0-2 Years</option>
                        <option value="3-5 Years">3-5 Years</option>
                    </select>
                </div>
                <!--End of Gardening Experience Section-->

                <!--Address Section-->
                <div class="form_item col-md-6 mg-b">
                    <label for="address" class="form_label">Location<span>*</span></label>
                    <input type="address" class="form_input" name="address" id="location-input" placeholder="Enter Address of Area where Crop was Planted">
                </div>
                <!--End of Address Section-->

                <!--Advice / Tip for the plant Section-->
                <div class="form_item col-md-12 mg-b">
                    <label for="messase" class="form_label">Most Important Advice / Tip for this Plant</label>
                    <textarea name="message" id="message" cols="30" rows="4" class="form_input message" placeholder="Enter Message"></textarea>
                </div>
                <!--End of Advice / Tip for the plant Section-->
            </div>
      
      <div class="row fill-form">
                <button type="submit" id="btnLoad" onclick="confirmAction(event);" >SUBMIT</button>
                <!-- <input name="submit" type="submit" id="submit" class="submit" value="Submit"> -->
            </div>

尝试后此代码不会对指定字段执行任何操作。任何人都可以帮助我知道如何在表单提交后重置这两个字段

标签： javascripthtml