easyui的dialog中的input输入框在窗口关闭时如何清空输入框中的内容

easyui的dialog中的input输入框在窗口关闭时如何清空输入框中的内容


我们在easyui的dialog中的输入框输入内容后,在关闭后想清空输入框中的内容,避免在我们再次打开该dialog时,还是出现上次输入的内容,这时可以采用下面这种方法解决:

$('#form').form('clear');

具体事例:
html文件:

    <!--资产附件备注信息修改-->
    <div id="dlgPhotoRemarksUpdate" class="easyui-dialog" style="width: 300px; height: 200px; padding: 10px 20px"
         data-options="closed:true,buttons:'#dlg-PhotoRemarksUpdateButtons'">
        <form id="fm6" method="post">
            <input id="assetPhotoNum" type="hidden"/>
            <input id="assetNum2" type="hidden"/>
            <table padding="5" style="border-collapse:separate; border-spacing:0px 10px;">
                <tr>
                    <td style="text-align-last: auto"><label>备注信息:</label></td>
                </tr>
                <tr>
                    <td><input style="text-align-last: auto;width:200px;height:50px;" id="assetPhotoRemarks" data-options="multiline:true,required:true" name="assetPhotoRemarks" class="easyui-textbox" missingMessage="备注信息不能为空!" /></td>
                </tr>
            </table>
        </form>
    </div>
    <div id="dlg-PhotoRemarksUpdateButtons">
        <a href="#" class="easyui-linkbutton" type="submit" data-options="iconCls:'icon-ok'" onclick="UpdateAssetPhotosRemarksExecute1()">确定</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="dlgPhotoRemarksUpdateClose()">关闭</a>
    </div>

相对应的js文件:

//修改资产附件备注信息窗口关闭时,将备注信息框数据清空
function dlgPhotoRemarksUpdateClose() {
    $('#fm6').form('clear');
    $('#dlgPhotoRemarksUpdate').dialog('close');
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这是一个比较复杂的问题,需要分步骤来回答。我将按照以下顺序解答: 1. 前端弹窗配置邮箱的实现 2. 点击保存对输入的多个邮箱进行保存的实现 3. 保存成功后在弹窗回显邮箱信息的实现 4. 后台如何接收配置的邮箱 5. 前后端代码设计 1. 前端弹窗配置邮箱的实现 可以使用 EasyUI Dialog 控件来实现弹窗效果,然后在弹窗添加邮箱输入框和增加/删除按钮。点击增加按钮,使用 jQuery 动态地添加新的邮箱输入框;点击删除按钮,删除当前的邮箱输入框。 以下是示例代码: ```html <div id="email-dialog"> <form> <div class="form-group"> <label for="email-input">邮箱:</label> <div id="email-container"> <input type="email" name="email" class="form-control" id="email-input" required> <button type="button" class="btn btn-default" id="add-email-btn">增加</button> </div> </div> </form> </div> <script> $(function() { var container = $('#email-container'); var template = $('#email-input').clone(); $('#add-email-btn').click(function() { var newInput = template.clone(); newInput.val(''); container.append(newInput); $('<button type="button" class="btn btn-default remove-email-btn">删除</button>').insertAfter(newInput); }); $(document).on('click', '.remove-email-btn', function() { $(this).prev().remove(); $(this).remove(); }); }); </script> ``` 2. 点击保存对输入的多个邮箱进行保存的实现 首先需要将所有输入的邮箱地址收集起来,可以使用 jQuery 的 `serializeArray()` 方法将表单的所有值组成一个数组。然后使用 Ajax 技术将数据发送到后台进行保存。 以下是示例代码: ```javascript $('#save-emails-btn').click(function() { var data = $('#email-dialog form').serializeArray(); var emails = []; $.each(data, function(index, item) { emails.push(item.value); }); $.ajax({ url: '/saveEmails', method: 'POST', data: JSON.stringify(emails), contentType: 'application/json', success: function(response) { if (response.success) { // 保存成功 // ... } else { // 保存失败 // ... } }, error: function() { // 请求失败 // ... } }); }); ``` 3. 保存成功后在弹窗回显邮箱信息的实现 保存成功后,需要将保存的邮箱信息回显到弹窗。可以在成功回调函数处理回显逻辑。首先清空原有的邮箱输入框和删除按钮,然后根据保存的邮箱信息动态添加新的邮箱输入框和删除按钮。 以下是示例代码: ```javascript if (response.success) { // 保存成功 container.children().remove(); $.each(emails, function(index, email) { var newInput = template.clone(); newInput.val(email); container.append(newInput); $('<button type="button" class="btn btn-default remove-email-btn">删除</button>').insertAfter(newInput); }); } else { // 保存失败 // ... } ``` 4. 后台如何接收配置的邮箱 在后台控制器定义一个接收邮箱地址数组的方法,使用 `@RequestBody` 注解将请求体的数据绑定到数组参数上。 以下是示例代码: ```java @ResponseBody @RequestMapping("/saveEmails") public JsonResult saveEmails(@RequestBody String[] emails) { // 保存邮箱地址数组到数据库 // ... return JsonResult.success(); } ``` 5. 前后端代码设计 前端代码使用 jQuery 和 EasyUI 实现弹窗和邮箱输入框的动态增加和删除。点击保存按钮,使用 Ajax 将数据发送到后台进行保存,并在成功回调函数处理回显逻辑。 后台代码定义一个接收邮箱地址数组的方法,使用 `@RequestBody` 注解将请求体的数据绑定到数组参数上,并将数组保存到数据库。保存成功后返回一个 `JsonResult` 对象,前端根据返回值处理保存成功或失败的逻辑。 以上是一个简单的实现方案,具体实现可能会因为项目的具体需求而有所差异。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值