如何将动态输入字段提交到数据库？ - javascript

我正在动态显示对我有用的输入字段。

问题是

我必须提交表格。我已经尝试了以下一些代码，但无法正常工作。

我正在使用Codeigniter。

控制器代码

public function register(){
$save = array(
   'pp_fileStatus' => $this->input->post('pp_fileStatus');
   'reasonDate' => $this->input->post('reasonDate');
   'reasonAmt' => $this->input->post('reasonAmt');
 );
$afterxss=$this->security->xss_clean($save);
        if ($afterxss) 
        { 
          $this->db->insert('tbl_register',$afterxss);
            $response['error'] = "true";
            $response['msg']   = "Successfully";

      }else{
          $response['error'] = "false";
          $response['msg']   = "Sometning wrong! please check the internet connection and try again";
      } 
   echo json_encode($response);          
}

我正在动态添加字段并增加名称。请让我知道我必须在这里使用的名字

$save = array(
       'pp_fileStatus' => $this->input->post('pp_fileStatus');
       'reasonDate' => $this->input->post('reasonDate');
       'reasonAmt' => $this->input->post('reasonAmt');
     );

以下是用于动态添加输入字段的代码。

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var x = 1; //Initial field counter is 1
  var count = 2;
  var numberIncr = 1; // used to increment the name for the inputs
  var addrm = '';

  //Once add button is clicked
  $(document).on('click', '#clicktoadd', function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter
      numberIncr++;
      $(".medication_info").append('<select name="pp_fileStatus' + numberIncr + '" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select>');
    }
    count++;

  });
  $(document).on('change', '.pp_fileStatus', function(event) {

    if (($(this).val() == '1') || ($(this).val() == '3')) {
      $(".medication_info").append('<div class="addbankField input-wrapper padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '"  class="form-control datetimepicker dynamicVal" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="reasonAmt' + numberIncr + '"  class="form-control commnumber dynamicVal" placeholder="amt"></div></div><input type="hidden" name="remark' + numberIncr + '"  class="form-control" placeholder="Remark">');
    } else {
      $(".medication_info").append('<div class="addbankField input-wrapper lbpflex padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '"  class="form-control datetimepicker dynamicVal" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="remark' + numberIncr + '"  class="form-control dynamicVal" placeholder="Remark"></div></div><input type="hidden" name="reasonAmt' + numberIncr + '" class="form-control" placeholder="amt">');
    }
  });

});



$('#register').on('submit', function(event) {
  event.preventDefault();
  // adding rules for inputs with class 'comment'
  $('.dynamicVal').each(function() {
    $(this).rules("add", {
      required: true
    })
  });
  // test if form is valid 
  if ($('#register').validate().form()) {
    $.ajax({
      //url:"process.php",
      url: baseUrl + "/Customer_control/register",
      type: "POST",
      dataType: "json",
      data: $('#register').serialize(),

      success: function(data) {
        alert("success");
      },
    }); // AJAX Get Jquery statment
  }
  //alert('hellow');
});
$('#register').validate({
  errorPlacement: function(error, element) {
    if (element.is("select")) {
      error.insertAfter(element.parent());
    } else {
      error.insertAfter(element);
    }

  }
});

<div id="clicktoadd"><a href="javascript:void(0);" class="btn btn-bg">Add More</a></div>
<form action="#" method="post" id="register" name="register">
  <div class="row">
    <div class="medication_info">
    </div>
  </div>

  <input type="submit" name="send" value="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>

有人可以在这个问题上帮助我吗？

参考方案

您可以将数组用于HTML格式的多个名称，然后使用PHP（CodeIgniter）中的Foreach循环获取值。

这是更改代码的方法：更改此行：

$(".medication_info").append('<select name="pp_fileStatus' + numberIncr + '" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select>')

至：

$(".medication_info").append('<select name="pp_fileStatus[]" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select>')

注意：我只是将选择字段名称更改为“ pp_fileStatus []”，然后删除了numberIncr变量

现在，您可以像这样在控制器中访问此字段名称值。

$pp_fileStatus = $this->input->post('pp_fileStatus');

$ pp_fileStatus是一个数组，包含pp_fileStatus的所有值。

您也可以为其他表单字段执行相同操作。

因此，您无需通过为变量增加一个来为字段命名。

希望这能解决您的问题。

您可以像这样更新您的注册功能：

public function register(){

    $insert_array = [];

    $pp_fileStatus = $this->input->post('pp_fileStatus');
    $reasonDate    = $this->input->post('reasonDate');
    $reasonAmt    = $this->input->post('reasonAmt');
    $remark    = $this->input->post('remark');

    foreach ($pp_fileStatus as $key => $value) {

        $insert_array[] = array(
                                   'pp_fileStatus' => $value,
                                   'reasonDate' => $reasonDate[$key],
                                   'reasonAmt' => $reasonAmt[$key],
                                   'remark' => $remark[$key]
                                 );

    }

    $this->db->insert_batch('tbl_register',$insert_array);
}

根据需要更新此功能

使用php重新加载内容 - javascript

在对网站进行编程时，我以前使用过此代码，它可以完美工作，但是现在当我想使用一些Flash部件时，每次单击链接时，它都会重新加载所有网站。源代码： <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…

用jQuery填充模式形式 - javascript

我正在将订单表从数据库绘制到datatables（jquery插件）中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是，如何获取单击添加付款按钮以添加付款的行的订单ID。其次，当点击addpayment时，它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段，并使其不可编辑或隐藏，但在提交模态表单时将其发布到服务器。表格和模式表…

尽管刷新，jQuery格式仍未应用于Ajax数据 - javascript

我正在通过GET响应消息从服务器（php文件）的可折叠内部加载列表视图。但是，尽管刷新了jQuery元素，但jQuery格式并未应用于添加的HTML。我的页面在这里：http://i.cs.hku.hk/~hsbashir/Project_Work/events/events.htmlHTML代码（仅相关代码）<script> lastRecor…

JavaScript处理期间数组内部的数组 - javascript

我正在尝试使用Ajax处理表单，并且在处理复选框时遇到了问题。我以为我可以在数组中做一个数组，将选中的框添加到数据对象中，但这似乎不起作用。它不会显示为控制台中对象的一部分或类似内容。我尝试了一些变化，但没有任何效果。这是当前的样子：var formData = { 'fname' : $('input[name=fname]&…

将简单的javascript代码转换为c＃ - javascript

昨天我在这里问了一个问题。使用javascript和html解决方案很简单前一阵子我打算什么是操纵html来执行javascript中的任务但是我改变了主意，将javascript代码重写为c＃这是输入<Abstract> <Heading>Abstract</Heading> <Para TextBreak=�…