undefined index user when submitting form by ajax

Question

I am trying to submit my form by ajax. Without Ajax form is working good.But When I try to submit this form through ajax getting error undefined index user. Here is my .ctp code

<form action="<?php echo $this->webroot;?>Agent/addprocess" method="post" class="" role="form" id="frm-signup-process" name="frm-signup-process">
    <input name="data[User][selected_user_type]" type="hidden" id="selected_user_type" value="1"/>
    <input type="hidden" name="data[User][user_type]" id="inlineCheckbox1" value="2" id="user_type" />
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="form-group">
                <label for="Name">First Name</label>
                <input class="form-control" name="data[User][first_name]" placeholder="First Name" type="text" id="first_name" />
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="form-group">
                <label for="Name">Last Name </label>
                <input class="form-control" name="data[User][last_name]" placeholder="Last Name" type="text" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="form-group">
                <label for="Name">Mobile </label>
                <input class="form-control" name="data[User][mobile]" maxlength="10" placeholder="Your Mobile Number" type="text" id="mobile" />
            </div>
        </div>
    <div class="row">
        <a class="btn btn-primary" id="processBtn"  style="background:#22979e;">Register Agent</a>
    <!--  <a class="btn btn-primary" id="processBtn" onclick="registerDistributor()" style="background:#22979e;">Register Agent</a> -->
    </div>
      <div class="footer-msg-box form-group"></div>
</form>

Now Here is my controller

public function addprocess() {
    $postData = $this->request->is('post');
    print_r(   $postData);
    die('hello this is sanjay');
    if($postData != '' && count($this->request->data) > 0) {
        $logData = array('mobile' => $this->request->data['User']['mobile'], 'email' => $this->request->data['User']['email']);
        if (isset($this->request->data['User']['user_id']) && $this->request->data['User']['user_id'] != '') {
            $logData['id'] = $this->request->data['User']['user_id'];
        }

        $isExist = $this->User->find('first', array('conditions' => $logData));
        $this->User->save($this->request->data);  
    }
    else
    {
        $allData .= "<p style='color:red'>No Response or Error.</p>";
    }
}

Here is my ajax code

$('document').ready(function() {
  $('#processBtn').click(function() {
    var first_name = $("#first_name").val();
    var selected_user_type = $("#selected_user_type").val();
    var user_type = $("#user_type").val();
    var last_name = $("#last_name").val();
    var mobile = $("#mobile").val();
    console.log(first_name);
    $.ajax({
      type: "POST",
      url: 'addprocess',
      // $.ajax({url: "<?php echo $this->webroot;?>Agent/addprocess",
      dataType: "JSON",
      data: {
        'first_name': first_name,
        'last_name': last_name,
        'mobile': mobile
      }
      async: false,
      contentType: false,
      processData: false,
      cache: false,
      beforeSend: function() {
        $("#processBtn").html("Submit <i class=\"fa fa-spinner fa-spin fa-fw\" aria-hidden=\"true\"></i>");
      },
      success: function(data) {
        alert(data);
        $(".footer-msg-box").html(data);
        $("#user_submit_button").html("Submit");
      }
    });
    return false;
  });
});

Note: all thing working great without ajax. But when I am trying to submit with ajax .It's showing Undefined User . Many thanks if any help from Anybudy.

Answer 1

The names in your form are like name="data[User][first_name]", but you don't have the data or User properties in the data: option in AJAX. It should be:

data: {
    data: {
        User: {
            first_name: first_name,
            last_name: last_name,
            mobile: mobile
        }
    }
}

Get rid of the processData: false and contentType: false options. These should only be used when sending a FormData object as the data: option. processData: false prevents $.ajax from converting the data: object to a URL-encoded string in the POST data.

There also doesn't seem to be any reason for async: false. Synchronous AJAX is generally a bad idea and is deprecated.