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

Question

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

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

Answer 1

可以使用 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文本域中的数据提交到服务器端的数据库。