jQuery Bootstrap - 重置模态关闭时的表单值

时间:2017-02-15 18:32:14

标签: javascript jquery html

我有一个只包含一个表单字段的模态,但是一旦用户输入该值,它甚至会在模态关闭时保留。我希望它在关闭时重置,这样当再次打开模态时,表单为空。我已经有了一些代码,但是它没有按预期工作。如果有人能提供帮助,我们将不胜感激。

HTML /模态:

npm install node-fibers-1.0.5.tar.gz

> fibers@1.0.5 install /opt/wekan/bundle/programs/server/node_modules/fibers
> node ./build.js

(node:35623) DeprecationWarning: child_process: options.customFds option is deprecated. Use options.stdio instead.
gyp WARN install got an error, rolling back install
gyp ERR! configure error
gyp ERR! stack Error: connect ETIMEDOUT 104.20.23.46:443
gyp ERR! stack     at Object.exports._errnoException (util.js:1022:11)
gyp ERR! stack     at exports._exceptionWithHostPort (util.js:1045:20)
gyp ERR! stack     at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1087:14)
gyp ERR! System Linux 3.10.0-229.el7.x86_64
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--release"
gyp ERR! cwd /opt/wekan/bundle/programs/server/node_modules/fibers
gyp ERR! node -v v6.9.5
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok
Build failed
npm WARN meteor-dev-bundle@0.0.0 No description
npm WARN meteor-dev-bundle@0.0.0 No repository field.
npm WARN meteor-dev-bundle@0.0.0 No license field.
npm ERR! Linux 3.10.0-229.el7.x86_64
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "node-fibers-1.0.5.tar.gz"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE

npm ERR! fibers@1.0.5 install: `node ./build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fibers@1.0.5 install script 'node ./build.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the fibers package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node ./build.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs fibers
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls fibers
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /opt/wekan/bundle/programs/server/npm-debug.log

jQuery的:

<!-- Modal -->
<div id="myModalViewAddress" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">View Hidden Information</h4>
            </div>
            <div class="modal-body">
                <p>Please enter authorisation code</p>
                <form id="auth_form10">
                    <div class="form-group has-feedback" name="auth_code10" id="auth_code10">
                        <input class="form-control" id="auth_code_input10" autocomplete="new-password" name="auth_code_input10" type="password" required>
                        <span class="form-control-feedback glyphicon" id="iconBad10"></span>
                    </div>
                </form>
                <hr>

                <div id="modal-loader" style="display: none; text-align: center;">
                    <!-- AJAX loader -->
                    <img src="img/ajax-loader.gif">
                </div>

                <div id="dynamic-content-address" class="hidden">
                    <!-- Dyanamic address -->
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

JSFiddle

3 个答案:

答案 0 :(得分:2)

这里有一些问题。您使用的是.myModalViewAddress而不是#myModalViewAddress。您还需要清除值:

$('#myModalViewAddress').on('hidden.bs.modal', function() {
  $('#auth_form10 input').val('');
});

<强> jsFiddle example

答案 1 :(得分:0)

试试这个:

onclick动作之后:

$('#auth_code_input10').val() == null;

答案 2 :(得分:0)

由于你的选择器,你的问题就出现了。

如果您要重置表单元素,请使用#按其ID来选择您的表单,然后调用.reset()方法。

您的活动注册也未进行,因为您使用的是类选择器. $('.myModalViewAddress')而不是ID选择器# $('#myModalViewAddress')

https://jsfiddle.net/cLkekytx/1/