CODEWITHSUNDEEP
jqueryhtmlformsjquery-mobile
frisk0k
frisk0k

Reputation: 177

Reset jquery mobile form input after submit

I got a form in my jQuery mobile framework, and i want to reset the value of the input fields after they have been submitted. I tried to search around here for solutions, but i can't figure out how to make it work proper.

jquery:

$(document).ready(function () {
    $("#add").submit(function () {
        var formData = $(this).serialize();

        $.post('save.php', formData, processData).error(errorResponse);

        function processData(data) {
            $("#popupSave").popup();
            $("#popupSave").popup("open");
        };
        function errorResponse() {
            alert("Something went wrong!");
        };
        return false;
    });
});

Form:

<form id="add">
  <div data-controltype="textblock">
    <p>
      Text
    </p>
  </div>
  <div class="ui-field-contain" data-controltype="textinput">
    <input name="vegetables" id="textinput1" placeholder="300g" value="" type="number">
  </div>
  <div data-controltype="textblock">
    <p>
      Text
    </p>
  </div>
  <div class="ui-field-contain" data-controltype="textinput">
    <input name="fullgrain" id="textinput2" placeholder="30g" value="" type="number">
  </div>
  <div data-controltype="textblock">
    <p>
      Text
    </p>
  </div>
  <div class="ui-field-contain" data-controltype="textinput">
    <input name="milk" id="textinput3" placeholder="200ml" value="" type="number">
  </div>
  <div data-controltype="textblock">
    <p>
      Text
    </p>
  </div>
  <div class="ui-field-contain" data-controltype="textinput">
    <input name="water" id="textinput4" placeholder="300ml" value="" type="number">
  </div>
  <input type="submit" value="Tilføj">
  <input type="reset" value="Nulstil" />
  <div data-role="popup" id="popupSave" class="ui-content">
    <p>Text</p>
  </div>
</form>

Upvotes: 0

Views: 663

Answers (2)

life quality
life quality

Reputation: 65

You can use this for all type of inputs

$('input').not('[type="button"]').val(''); // clear inputs except buttons, setting value to blank
$('select').val(''); // clear select
$('textarea').val(''); // set text area value to blank

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Try this then:

$(document).ready(function () {
    $("#add").submit(function () {
        $this = $(this);
        var formData = $this.serialize();

        $.post('save.php', formData, function (data) {
            $("#popupSave").popup();
            $("#popupSave").popup("open");
            $this.find("input").val("");
        }).error(errorResponse);

        function errorResponse() {
            alert("Something went wrong!");
        };
        return false;
    });
});

Upvotes: 3

Related Questions