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

Question

I am displaying the input field dynamically which is working for me.

The issue is,

I have to submit the form. I have tried some code as below but it's not working.

I am using Codeigniter.

Controler code

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);          
}

I am adding the field dynamically and incrementing the name. Please let me know what name I have to use here

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

Below is the code for adding the input field dynamically.

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

Can anyone here to help me out with this issue?

Answer 1

You can use arrays for multiple names in HTML form and then get the values using Foreach Loop in PHP (CodeIgniter).

Here is how you should change your code: Change your this line:

$(".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>')

To:

$(".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>')

Note: I just changed select field name to "pp_fileStatus[]" and remove numberIncr variable

Now you can access this field name values in your controller like this.

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

Here $pp_fileStatus is an array and contains all the values of pp_fileStatus.

You can do same for your other form fields too .

So you get rid of giving names to fields by incrementing one to a variable.

Hope this solves your problem.

You can update your register function like this:

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);
}

Update this function according to your needs

Answer 2

you need to create a function for your submit actions, which you call ( make available ) on document load and also with your change event, after having appended the DOM.

simplified example:

$(document).ready(function() {
  my_submit(); // enables your submit calls
  $(document).on('change', '.pp_fileStatus', function(event) {
    // your append code
    my_submit(); // again, enables your submit calls
  })
}
function my_submit(){
  $('#register').on('submit', function(event) {
    // your code
  })
  $('#register').validate({
    // your code
  })
}