CODEWITHSUNDEEP
javascriptjqueryhtml
user2430933
user2430933

Reputation: 39

Reset SELECT After Submit

I have jquery script and need function to reset the SELECT input after submited.

<script>

$(document).ready(function() {
  //elements

  var progressbox = $("#progressbox");
  var progressbar = $("#progressbar");
  var statustxt = $("#statustxt");
  var submitbutton = $("#submit");
  var myform = $("#myForm");
  var output = $("#output");
  var completed = 'Loading...';
  $(myform).ajaxForm({
    beforeSend: function() { //brfore sending form
      submitbutton.attr('disabled', ''); // disable upload button
      statustxt.empty();
      progressbox.slideDown(); //show progressbar
      progressbar.width(completed); //initial value 0% of progressbar
      statustxt.html(completed); //set status text
      statustxt.css('color', '#ffffff'); //initial color of status text
    },
    uploadProgress: function(event, position, total, percentComplete) { //on progress
      progressbar.width(percentComplete + '%') //update progressbar percent complete
      statustxt.html(percentComplete + '%'); //update status text
      if (percentComplete > 50) {
        statustxt.css('color', '#ffff00'); //change status text to white after 50%
      }
    },
    complete: function(response) { // on complete
      output.html(response.responseText); //update element with received data
      myform.resetForm(); // reset form
      submitbutton.removeAttr('disabled'); //enable submit button
      progressbox.slideUp(); // hide progressbar
    }
  });
});

</script>

and here are the select input option

<select id="jenis" name="jenis" class="select2">
    <option value="SURAT">SURAT</option>
    <option value="UNDANGAN">UNDANGAN</option>
    <option value="NOTA DINAS">NOTA DINAS</option>
</select>

the current script is reset all input but not the SELECT input

Upvotes: 1

Views: 5866

Answers (3)

Kirill Simonov
Kirill Simonov

Reputation: 8491

You could try $('#jenis').val(""); to make your select empty or $('#jenis').prop('selectedIndex', 0); to select the first (or any other) value

function reset() {
  $('#jenis').val("");//$('#jenis').prop('selectedIndex', 0); if you want to choose first <option>
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="jenis" name="jenis" class="select2">
    <option value="SURAT">SURAT</option>
    <option value="UNDANGAN">UNDANGAN</option>
    <option value="NOTA DINAS">NOTA DINAS</option>
</select>
<button id="reset" onclick="reset()">reset</button>

To reset your select when ajax is completed, you could write this:

$(myform).ajaxForm({
    ...
    complete: function(response) { // on complete
      $('#jenis').val(""); //clear the select
      output.html(response.responseText); //update element with received data
      myform.resetForm(); // reset form
      submitbutton.removeAttr('disabled'); //enable submit button
      progressbox.slideUp(); // hide progressbar
    }
});

Upvotes: 1

S&#233;bastien
S&#233;bastien

Reputation: 12139

It depends on what you mean by "after submit". If you mean after the AJAX operation is done, then the logical place is in the complete function

complete: function(response) { // on complete
    output.html(response.responseText); //update element with received data
    myform.resetForm(); // reset form
    submitbutton.removeAttr('disabled'); //enable submit button
    progressbox.slideUp(); // hide progressbar
    $('#jenis').val(''); // I don't know which value you consider to be the default, so this will set no value at all.
}

Upvotes: 0

user4723924
user4723924

Reputation: 142

Try either of these. This gets attached to your form...

onsubmit="this.form.reset();"

This gets attached to the submit button...

onclick="this.form.reset();"

Upvotes: 0

Related Questions