How can I clear specific input fields of an HTML form after form submits using JavaScript

Question

I am building a web form that submits data to a firebase database. I have input fields and I needed specific fields to clear or set back to default once a user submits their data. I'm not sure the right way to do it but I had a custom code, it however clears the fields before it even submits so you will find an empty input in the database (check code below), and most guides talk about resetting the entire form which is not what i want. Can anyone help me or guide me so I can make the specific input fields clear just after form is submitted. The fields that should clear are 'Vegetable planted' and 'Message' Below is the sample code

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>

question from:https://stackoverflow.com/questions/65923853/how-can-i-clear-specific-input-fields-of-an-html-form-after-form-submits-using-j

Answer 1

Waitting for answers