Not able to submit form using ajax, php and jquery

Question

I am trying to submit a form using ajax. In the backend part, i am trying to print the values of "fname", "location" and "image" in order to check if the data is reaching there or not

But when I am trying to do console.log to check for response, I get the following message

for dataString

filename=girl.jpgfname=johnlocation=Richmond, Virginia

for fname

Severity: Notice Message: Undefined index: fname

for image

No response

I am not able to fetch the data at the backend, can anyone please help me with this

Form

<form class="form-inline" id="form_add"  enctype="multipart/form-data"> 
  <input type="file" id="file-input" name="file-input"  accept="image/*" >

  <input type="text" class="form-control name" id="fname"  placeholder="First Name" >                            
  <select class="location" id="location" >
    <option value="">Location</option>
    <?php foreach($location as $loc): ?>
      <option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?></option>
    <?php endforeach; ?>
  </select>
  <button type="submit" class="save_btn"  id="submit" > <img src="save.png" class="Save">   </button>
</form>

Script

<script>
  $("#submit").click(function()
    {
      event.preventDefault();
      var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '');
      var fname = $("#fname").val();
      var location = $("#location").val();
      var dataString = 'filename='+ filename + 'fname='+ fname + 'location='+ location;
      if(filename != "" || fname != "" || location != "")
            {
              $.ajax({
                type: "POST",
                url: "Data/add_data",
                data: dataString,
                cache: false,
                success: function(result){
                  console.log(result);
                  console.log(dataString);
                }});
            }
    });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

On backend

$config['upload_path'] = './assets/client_img/.';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = 1024 * 8;
$config['encrypt_name'] = TRUE;

$this->load->library('upload', $config);
$data = $this->upload->data();
echo $img_name = $data['file-input'];

echo $_POST['fname'];

The selected values in the form was:

name of the file = girl.jpg

first name(fname) = John

value i had select from location dropdown = Richmond, Virginia

Answer 1

{
              $.ajax({
                type: "POST",
                url: "Data/add_data",
                data: {
                        filename : filename,
                        fname:fname,
                        location:location
                      },
                cache: false,
                success: function(result){
                  console.log(result);
                  console.log(dataString);
                }});
            }

for image only keep this

var filename = $('input[type=file]').val()

as codeignitor will show only the name in controller, no need to replace or ci wont be able to figure the path

Answer 2

the problem lies in your

dataString

you can do this:

var dataString='filename=' + filename + '|fname=' + fname + '|location=' + location;

so when you receive dataString in the backend (php) , you can split the dataString using:

$dataString=explode('|',  $dataReceived);

so you can get each part by doing this:

$filename=$dataString[0]; 
$fname=$dataString[1];
$location=$dataString[2];

hope it helps

Answer 3

您的dataString必须是JavaScript对象。

  var data = {filename: filename, fname: fname, location: location};