星空2020 2023-01-17 18:48 采纳率: 64.1%
浏览 28
已结题

js将文本框的值传递给文本域,实现批量提交数据

如何实现将锁定suoding勾选后,在input框输入值,回车后进入到ids文本域里,然后实现批量提交数据到数据库?
不勾选锁定suoding,则不执行上述传值动作。

img

<div class="layui-form-item">
                      <label for="phone" class="layui-form-label">
                          <span class="x-red">*ID</label>
                      <div class="layui-input-inline">
                          <input type="text" id="id" name="id" lay-verify="require|sncheck|character" autocomplete="off" class="layui-input" >
                      
 
 
<div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="suoding" id="suoding"  title="锁定">
    
  
 
<div class="layui-form-item">
                      <label for="phone" class="layui-form-label">
                          <span class="x-red">*IDS</label>
                      <div class="layui-input-inline">
                       <textarea id="ids" name="ids" rows="5" cols="33"></textarea>


  • 写回答

2条回答 默认 最新

  • 流比 2023-01-17 20:01
    关注

    可以使用 JavaScript 实现将锁定suoding勾选后,在input框输入值,回车后进入到ids文本域里,然后实现批量提交数据到数据库的操作。

    首先,需要在页面上给锁定suoding复选框绑定一个change事件,在这个事件的回调函数中实现上述操作。

    其次,在input框绑定一个keyup事件,在这个事件的回调函数中判断是否按下了回车键,如果是,则将input框的值添加到ids文本域中。

    示例代码如下:

    // 给锁定suoding复选框绑定change事件
    document.getElementById("suoding").addEventListener("change", function(){
        // 如果勾选了锁定suoding
        if(this.checked){
            // 给input框绑定keyup事件
            document.getElementById("id").addEventListener("keyup", function(event){
                // 如果按下了回车键
                if(event.keyCode === 13){
                    // 将input框的值添加到ids文本域中
                    document.getElementById("ids").value += this.value + "\n";
                    // 清空input框
                    this.value = "";
                }
            });
        }
    });
    
    

    完成这一部分后还需要在提交按钮绑定一个click事件,在这个事件的回调函数中使用Ajax或者表单提交的方式将ids文本域中的数据提交到服务器端的数据库。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月20日
  • 已采纳回答 2月12日
  • 创建了问题 1月17日

悬赏问题

  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构,按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题
  • ¥15 linux驱动,linux应用,多线程