使用AJAX实时更新​​表单

时间:2017-04-04 08:34:20

标签: php jquery ajax

我有一个脚本,它采用两种形式并连接某些部分,以便以残疾形式进行评估。基本上是名字+姓氏=用户名。

 <div class="form-group">
          <label for="first_name" class="control-label col-sm-4">First Name*</label>
          <div class=" col-lg-8">
              <input type="text" 
                     class="form-control" 
                     id="first_name" 
                     name="first_name" 
                     pattern="[a-zA-Z\s]+"
                     data-pattern-error="Contains illegal characters."
                     required>
                     <div class="help-block with-errors"></div>
          </div>
      </div>

      <div class="form-group">
          <label for="last_name" class="control-label col-sm-4">Last Name*</label>
          <div class=" col-lg-8">
              <input type="text" 
                     class="form-control" 
                     id="last_name" 
                     name = "last_name" 
                     pattern="[a-zA-Z\s]+"
                     data-pattern-error="Contains illegal characters."
                     required>
                     <div class="help-block with-errors"></div>
          </div>
      </div>

      <div class="form-group">
          <label for="username" class="control-label col-sm-4">Username*</label>
          <div class=" col-lg-8">
              <input type="text" class="form-control" id="username" name="username" disabled>
          </div>
      </div>

脚本

  $(document.body).on('focusout keyup', '#form-create-user input[name*="_name"]', function(e) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });

        e.preventDefault();

        firstName = $('#form-create-user #first_name').val().trim().toLowerCase();
        lastName = $('#form-create-user #last_name' ).val().trim().toLowerCase()

        var initials = firstName.match(/\b\w/g) || [];
        initials = ((initials.shift() || '') + (initials.pop() || '')).toLowerCase();

        // username = initials.concat(lastName);
        tempUsername = initials.concat(lastName);

        $.ajax({
          url: '{{url("generateusername")}}',
          type:'GET',
          data: { genusername: tempUsername},
          success: function(rpx){
          username = rpx;
          }
        });

        $('#form-create-user  #username').val(username);

    });

我也试过了,但它只返回

形式的[objectHTMLInputElement]
$.ajax({
          url: '{{url("generateusername")}}',
          type:'GET',
          data: { genusername: tempUsername},
          success: function(rpx){
          username = rpx;
          }
        });

        $('#form-create-user  #username').val(username);

现在我在laravel

中使用generateusername路线
  Route::get('/generateusername/{uname}', 'UsersController@generateUsername');

其中包含此内容

public function generateUsername()
{
  //fetch firstname in Database
  $fname = User::select(['first_name', 'username'])->where('username', $_GET['genusername'])->where('first_name', '!=', $request->first_name)->first();//if returning one row use this or your going to have a hard time with objects

  $fnameval = $fname->first_name;
  $fnameArr = str_split($fname->first_name);

  //request firstname
  $reqFname = $request->first_name;
  $reqFnameArr = str_split($reqFname);

  //final username
  $tempUserName = '';
  if(strlen($reqFname) > strlen($fnameval) || strlen($reqFname) == strlen($fnameval) ) {
  for($i = 0; $i < strlen($fnameval); $i++) {
    if($reqFnameArr[$i] == $fnameArr[$i]) {
      $tempUserName .= $reqFnameArr[$i];
    }
  }
} else if (strlen($reqFname) < strlen($fnameval)) {
  for($i = 0; $i < strlen($reqFname); $i++) {
    if($reqFnameArr[$i] == $fnameArr[$i]) {
      $tempUserName .= $reqFnameArr[$i];
    }
  }
}

  $primaryUsername =  strtolower($tempUserName.$request->last_name);
  $tempUserName = '';

  $indexForWhile = 0;
  //as long as there is an existing username in the database keep advancing the index for first_name request
  while(User::where('username', $primaryUsername)->exists()) {

        $tempUserName .= $reqFnameArr[$indexForWhile++];
        $primaryUsername = strtolower($tempUserName.$request->last_name);
  }
  $indexForWhile = '';

  return $primaryUsername;

}

但我得到的值只是空或[objectHTMLInputElement]

你可以帮我解决这个问题吗,朋友?

1 个答案:

答案 0 :(得分:0)

我看不到变量username是在任何地方定义的。因此,它可能会在其他地方用作全局,因此具有此[objectHTMLInputElement]值。 另外:#username输入的分配必须在ajax调用的成功回调中完成。

我建议你试试像:

$.ajax({
    url: '{{url("generateusername")}}',
    type:'GET',
    data: { genusername: tempUsername},
    success: function(rpx){
        var username = rpx;
        $('#form-create-user  #username').val(username);
    }
});

你还应该添加一个错误回调来测试ajax调用是否正常工作。