How do I clear a value stored in a form.submit function

Question

The issue is when I attempt to resubmit a form without refreshing the page the event handler for the form submission retains the value for the previous submission.

The form contains a select element that is populated with options from an API. The selected option is used to make a request URL and get data from the API. When the form is submitted a second time without refreshing the form. Submit event handler constructs a URL with the previous value and then it constructs a URL with the newly selected value. I have tried to a reset on the form which does reset the select element to its initial state but it does not clear the previously selected value from the submit event handler.

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

Every time you change the select option, a new onsubmit event is attached to the form. — Teemu, Jun 12 '19 at 05:33
This was the answer thank you. I got rid of the watchForm function and moved on the form submit handler under the on.change function. Thank you. — user881667, Jun 12 '19 at 05:59
Possible duplicate of [How to reset a form using jQuery with .reset() method](https://stackoverflow.com/questions/16452699/how-to-reset-a-form-using-jquery-with-reset-method) — Harun Diluka Heshan, Jun 12 '19 at 06:03

Monica Acha · Answer 1 · 2019-06-12T05:50:46.933

0

Jquery selector can return one or more element, so it returns an array.

Since reset() is a Javascript function and we are forcefully using it in jquery, it requires a specific element to perform reset action.

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

edited Jun 12 '19 at 05:50

answered Jun 12 '19 at 05:09

Monica Acha

1,076
9
16

1

@L.F. I agree. Improved my answer. Thanks – Monica Acha Jun 12 '19 at 05:53
How is this related to the question? – Teemu Jun 12 '19 at 07:39

score 0 · Answer 2 · answered Jun 12 '19 at 05:16

0

Best and simple solution ever Use trigger()

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

You're good to go!!

answered Jun 12 '19 at 05:16

Akshay Mulgavkar

1,727
9
22

How is this related to the question? – Teemu Jun 12 '19 at 07:39

score 0 · Answer 3 · answered Jun 12 '19 at 05:33

0

You can use something like that. $('myform').val('');

answered Jun 12 '19 at 05:33

Bhargav Gajjar

1

How is this related to the question? Also, there's no "myform" elements in OP's code. – Teemu Jun 12 '19 at 08:19
A little correction for that there is `$('#myform').val('');` – Bhargav Gajjar Jun 13 '19 at 04:42
??? But you've a tag selector, not an id selector, and forms don't have values anyway ... But still, resetting the form is not OP's issue (`$('#myform').get(0).reset()` works fine). The problem is those multiple submit listeners, which are getting an incorrect value of `breed` variable because of the closure. – Teemu Jun 13 '19 at 04:47

score 0 · Answer 4 · answered Jun 12 '19 at 05:58

0

Using vanilla Javascript is the easiest and simplest one because id is unique in a HTML document.

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

answered Jun 12 '19 at 05:58

ravibagul91

20,072
5
36
59

How is this related to the question? – Teemu Jun 12 '19 at 07:38

How do I clear a value stored in a form.submit function

4 Answers4