How to insert JSON into MySQL with JQuery AJAX and CodeIgniter?

Question

I'm using Jquery Form Wizard/Form-Repeater and unable to insert value from multiple form using Form-Repeater into database using CodeIgniter. How to do this?

Let say, my database "table_data" as below:

| req_id  |  req_custname  | req_type | req_data | req_comment |

CI View: Form Wizard & Form-Repeater:

      <div class="main-panel">
        <div class="content-wrapper">
                      <div class="row">
            <div class="col-12 grid-margin">
              <div class="card">
                <div class="card-body">
                  <h4 class="card-title">New Request</h4>
                  <form id="req-form" action="" method="post">
                    <div>
                      <h3>Type</h3>
                      <section>
                        <h3>Type</h3>
                        <div class="form-group">
                          <form>
                            <div class="row">
                              <div class="col-md-12">
                                <div class="form-group">
                                 <label name="errorl" id="error_req_type"></label>
                                  <div class="form-check">
                                    <label class="form-check-label">
                                      <input type="radio" class="form-check-input" name="req_type" id="req_type" value="Urgent">URGENT
                                      Urgent
                                    </label>
                                  </div>
                                  <div class="form-check">
                                    <label class="form-check-label">
                                      <input type="radio" class="form-check-input" name="req_type" id="req_type" value="Normal">NORMAL
                                      Normal
                                    </label>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </form>
                        </div>
                      </section>
                      <h3>Customer Information</h3>
                      <section>
                        <h3>Customer Information</h3>
                        <div class="form-group">
                          <label>Customer's Name:</label>
                          <input name="req_custname" id="req_custname" type="text" class="form-control required" style="text-transform:uppercase" placeholder="Enter customer's name" value="" autofocus >
                        </div>
                      </section>
                      <h3>Details</h3>
                      <section>
                        <h3>BW Upgrade Details</h3>
                        <div class="form-group">
                          <label>Data:</label>
                            <div class="row">
                              <div class="col-lg-12">
                                <div class="card-body">
                                  <form class="form-inline repeater">
                                    <div data-repeater-list="group-a">
                                      <div data-repeater-item class="d-flex mb-2">
                                        <div class="input-group mr-sm-2 mb-sm-0">
                                          <input type="text" name="fruit" class="form-control" id="inlineFormInputGroup1">
                                        </div>  
                                        <div class="input-group mr-sm-2 mb-sm-0">
                                          <input type="text" name="order" class="form-control" id="inlineFormInputGroup1">
                                        </div>
                                        <button data-repeater-delete type="button" class="btn btn-danger btn-sm icon-btn ml-2" >
                                          <i class="mdi mdi-delete"></i>
                                        </button>
                                      </div>
                                    </div>
                                    <button data-repeater-create type="button" class="btn btn-info btn-sm icon-btn ml-2 mb-2">
                                      <i class="mdi mdi-plus"></i>
                                    </button>
                                  </form>
                                </div>
                              </div>
                            </div>
                        </div>
                      </section>
                      <h3>Submit</h3>
                      <section>
                        <h3>Comments</h3>
                        <div class="form-group">
                          <label>Requestor's Comments</label>
                          <textarea type="text" class="form-control" rows="3" name="req_recomment" autofocus> </textarea>
                        </div>
                      </section>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>        
    </div>

Ajax Post to CI:

              var req_custname = $("input[name='req_custname']").val();
              var req_type = $("input[name='req_type']:checked").val();
              var req_recomment = $("textarea[name='req_recomment']").val();
              var repeatval = $('.repeater').repeaterVal();

              if(req_custname && req_type && req_recomment && repeatval)
              {
                $.ajax({
                      type: "POST",
                      url: BASE_URL+"/req/add",
                      dataType: "json",
                      data: 
                          {
                             req_custname:req_custname,
                             req_type:req_type,
                             req_recomment:req_recomment,
                             repeatval:repeatval
                          },
                });
              };

CI Controller (Req_.php):

        public function add()
    {        
        $post = $this->input->post(null, TRUE);

        $id = $this->req_m->add($post);

        if ($this->db->affected_rows() > 0 ) {

            $this->db->from('table_data');
            $this->db->where('req_id', $id);
            $result = $this->db->get()->result();
        }  
    }

CI Model (Req_m.php):

        public function add($post)
    {        
        $params['req_custname'] = $post['req_custname'];
        $params['req_type'] = $post['req_type'];
        $params['req_comment'] = $post['req_comment'];
        $params['req_data'] = $post['req_data'];

        if ($this->db->table_exists('table_data') ) {
            $this->db->insert('table_data', $params);
        }
    }

Above code works inserting into the database if I tried without the ajax post the form-repeater value

What I want is to insert JSON into the "req_data" from the Form Repeater. Expected result in the database should as below:

| req_id  |  req_custname  | req_type | req_data | req_comment | 
|   1     |  John          | Manual   | {“0”: {“fruit”: “apple”, “order”: “22”}, “1”: {“fruit”: “orange”, “order”: “4”} } | No comment | 
|   2     |  Mary          | Urgent   | {“0”: {“fruit”: “banana”, “order”: “6”} } | KIV |

what value has BASE_URL? did you try with just url: "/req/add"? — Vickel
– Vickel, Commented Dec 2, 2019 at 22:35
@Vickel it has value of my url..no issue with the ajax as when I tried without parsing the form-repeater "repeatval:repeatval", I can insert into the database — Arila
– Arila, Commented Dec 2, 2019 at 22:41

Gary Thompson · Accepted Answer · 2019-12-04 15:32:34Z

1

Your json isn't correctly declared in your POST function.

Try changing:

              if(req_custname && req_type && req_recomment && repeatval)
          {
            $.ajax({
                  type: "POST",
                  url: BASE_URL+"/req/add",
                  dataType: "json",
                  data: 
                      {
                         req_custname:req_custname,
                         req_type:req_type,
                         req_recomment:req_recomment,
                         repeatval:repeatval
                      },
            });
          };

to:

              if(req_custname && req_type && req_recomment && repeatval)
          {
            var postData = { "req_custname":req_custname,
                         "req_type":req_type,
                         "req_comment":req_recomment,
                         "req_data":repeatval };
            var json = JSON.stringify(postData);
            $.ajax({
                  type: "POST",
                  url: BASE_URL+"/req/add",
                  dataType: "json",
                  data: json,
            });
          };

See https://codepen.io/verdant-spark/pen/mdyyoXG for a working PoC of the json string creation.

answered Dec 4, 2019 at 15:32

Gary Thompson

1814 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gary Thompson Over a year ago

Also, the earlier comment about req_data by @Vickel - you're not passing the key you're then expecting to write to the database.

Arila Over a year ago

Thank you. Problem solved after I convert to string with JSON.stringify

Collectives™ on Stack Overflow

How to insert JSON into MySQL with JQuery AJAX and CodeIgniter?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related