提交后重置jquery移动表单输入

Posted 2023-05-09

【中文标题】提交后重置jquery移动表单输入

【英文标题】：Reset jquery mobile form input after submit

【发布时间】：2015-12-28 13:06:47

【问题描述】：

我的 jQuery 移动框架中有一个表单，我想在提交后重置输入字段的值。我试图在这里搜索解决方案，但我无法弄清楚如何使其正常工作。

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 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>

【问题讨论】：

你能准确点吗，#popupSave 中发生了什么？

向用户发送一条消息，告知数据已保存到数据库中

【参考方案1】：

然后试试这个：

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

【讨论】：

完美运行！非常感谢

欢迎 @Christoffer 很高兴它有帮助。

【参考方案2】：

您可以将其用于所有类型的输入

$('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