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

on your backend page change this code. $returnres['img_name'] = $data['file-input']; $returnres['fname'] = $_POST['fname']; echo json_encode ( $returnres) — Priyank
– Priyank, Commented Feb 16, 2018 at 7:12

Exprator · Accepted Answer · 2018-02-16 07:16:12Z

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

edited Feb 16, 2018 at 7:16

answered Feb 16, 2018 at 6:57

Exprator

27.8k6 gold badges54 silver badges64 bronze badges

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

6 Comments

Exprator Over a year ago

use the ajax like this and check

Sam Over a year ago

the values got fetched but the image is still not getting fetched

Sam Over a year ago

when i try to echo the name on backend it prints the value of filename as "C:\fakepath\girl.jpg" is this correct? I get this result and the file is not uploaded

Exprator Over a year ago

yes that is correct, and if its not uploaded you need to check your uploading code

Sam Over a year ago

Can you please have a look on the upload code, i am literally not able to understand where i have gone wrong, it is saying that i have not uploaded any file

|

Seybanks · Accepted Answer · 2018-02-16 07:06:00Z

0

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

answered Feb 16, 2018 at 7:06

Seybanks

8810 bronze badges

Comments

officialMKL · Accepted Answer · 2018-02-16 07:12:44Z

0

Your dataString must be a JavaScript Object.

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

answered Feb 16, 2018 at 7:12

officialMKL

1817 bronze badges

Collectives™ on Stack Overflow

Not able to submit form using ajax, php and jquery

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related