jquery如何清除模态输入字段以供重用

时间:2013-07-29 13:32:31

标签: jquery forms twitter-bootstrap

我有一个使用jquery和twitter bootstraps的模态表单。我已经设置了模态,所以当人取消表格时,/关闭模态我清除输入字段。但是,如果此人再次激活模态并将值输入到字段中,则dom仍将字段值视为空。

这是我的表单html

<div class="modal fade in" id="forgotPassModal" data-b-view="ForgotPass" data-brite-cid="bview_1" tabindex="-1" aria-hidden="false" style="margin-top: -152.66666662693024px;">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Security questions:</h3>
</div>
<div class="modal-body">
    <p>
        Please answer the following security questions, click 'Submit', and you
        will receive an email containing instructions on how to change your password.
    </p>
    <div class="form-horizontal">
        <fieldset id="forgotPassForm">

            <div class="control-group">
                <label class="span3" "label_4"="">What was the last name of your third grade teacher?</label>
                <div class="controls">
                    <input type="text" class="input-large" id="forgotPass_4">
                </div>
            </div>
            <div class="clearfix">&nbsp;</div>

            <div class="control-group">
                <label class="span3" "label_165"="">What is your maternal grandmother's maiden name, please provide full name?</label>
                <div class="controls">
                    <input type="text" class="input-large" id="forgotPass_165">
                </div>
            </div>
            <div class="clearfix">&nbsp;</div>

        </fieldset>
    </div>
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button class="btn btn-primary forgotPassSubmit">Submit</button>
</div>

这是我的jquery

    for (var i = 0; i < $forgotPassQuest.questionId.length; i++){
    var questionId = $forgotPassQuest.questionId[i]['id'];
    $('#forgotPass_' + questionId).val(null);
}

$('#forgotPassModal').modal({show:true})
$('.forgotPassSubmit').click(function() {
    var questAnswered = true;
    for (var i = 0; i < $forgotPassQuest.questionId.length; i++){
        var questionId = $forgotPassQuest.questionId[i]['id'];
        questionField = $('#forgotPass_' + questionId);
        questionFieldVal = questionField.val();
        if (questionFieldVal == '' || questionFieldVal == null){
            questAnswered = false;
        } else {}
    }
    if (questAnswered == true) {
        submitAnswers();
    } else {
        alert('please complete your security questions.');
    }
})
$('#forgotPassModal').on('hidden', function () {
    $('#forgotPassModal').remove();
});

现在表单是动态的,可以从用户更改为用户。任何想法都可以在取消/关闭时清除表格但仍然可以在用户更改值时识别该值吗?

2 个答案:

答案 0 :(得分:1)

您可以“重置”输入值,而不是从div移除DOM

示例:http://jsfiddle.net/dMbXV/

$('#forgotPassModal').on('hidden', function () {
    $('input').val('');
});

答案 1 :(得分:0)

通过使用“remove”.remove(),您实际上正在转储整个DOM介绍垃圾桶,删除所有事件侦听器。

因此,您应该只隐藏您的模态或使用$('.modal-body', '#forgotPassModal').empty();清除身体。