如何将全名分解为多个部分并将其插入多种形式?

问题描述 投票:0回答:1

我有一个表格,允许我选择[选择表格]学生的姓名(全名)。

我想将全名分解成几个部分(名字,姓氏,然后将它们插入表单(隐藏),然后通过ajax将其提交到数据库。

(html表单的代码段,这是由按钮触发的模式的一部分)

                          <div class="col-md-6">
                            <input type="hidden" class="form-control" name="first_name" required>
                          </div>

                          <input type="hidden" id="token" name="_token" value="{{csrf_token()}}">

                          <div class="col-md-6">
                            <input type="hidden" class="form-control" name="last_name" required>
                          </div>
                        </div>

                        <div class="form-group">
                            <label>Account User</label>
                            <select type="select" id="select-student" class="form-control select2 select-student" name="student" required>
                              <option value="" selected disabled>Select Student</option>
                            </select>
                        </div>

(用于选择表单的代码,我正在使用select2作为搜索栏)

function getAllStudents() {
    $.ajax({
            url: "students",
            type: "GET",
            success: function(data) {
              var html = '<option value="" selected disabled>Select Student</option>';
              $.each(data, function(x,y) {
                  html += '<option value="'+y.id+'">'+y.first_name+ " "+y.middle_initial+" "+y.last_name+'</option>';
              });
              $('#select-student').html(html);
            }
          });
  }

(使用JavaScript触发模式,以及触发选择列表)

$(document).on('click', '#btn-add-account', function() {
      $('#add-account-modal').modal('show');
      getAllStudents();
    });

(用于将信息发送到数据库的代码)

$(document).on('submit', '#form-add-account', function() {
       $.ajax({
            url: "register",
            type: "POST",
            data: $(this).serialize(),
            success: function(data) {
              if (data.success === true) {
                alert("Account Successfully Added!");
                location.reload();
              }
              else {
                alert("Something went wrong");
              }
            }
          });
            return false;
    });

其他信息,如果有帮助的话:选择列表(select-student)从数据库中获取学生列表,并且那里有first_name,middle_initial和last_name的列。

谢谢!

编辑:示例Ajax返回将是以下内容-

选择学生将返回学生姓名列表:

Marcus L. Pearson(格式:名+中间名+姓氏)迈克尔·杰克逊(Michael K. Jackson)

选择(在本例中,我将选择Michael K. Jackson),然后希望将其拆分为diff。零件有多种形式。

#first_name =迈克尔

#middle_initial = K。

#last_name =杰克逊

javascript jquery
1个回答
0
投票

我怀疑您需要的是这个:

function splitName(str) {
  var r = str.split(" ");
  return {
    first_name: r[0],
    middle_initial: r[1],
    last_name: r[2]
  };
}

$('#select-student').change(function() {
  var y = splitName($("option:selected", this).text().trim());
  $("input[type='hidden'][name='first_name']").val(y.first_name);
  $("input[type='hidden'][name='last_name']").val(y.last_name);
});

[如果存在其他具有相同属性的表单元素,则可以考虑添加唯一ID或唯一类。

将它们放在一起,看起来像这样:

$(function() {

  function splitName(str) {
    var r = str.split(" ");
    return {
      "first_name": r[0],
      "middle_initial": r[1],
      "last_name": r[2]
    };
  }

  function getAllStudents() {
    $.ajax({
      url: "students",
      type: "GET",
      success: function(data) {
        $('#select-student').html("");
        $("<option>").val("").prop({
          selected: true,
          disabled: true
        }).appendTo($('#select-student'));
        $.each(data, function(x, y) {
          $("<option>").val(y.id).html(y.first_name + " " + y.middle_initial + " " + y.last_name).appendTo($('#select-student'));
        });
      }
    });
  }

  $('#select-student').change(function() {
    var y = splitName($("option:selected", this).text().trim());
    $("input[type='hidden'][name='first_name']").val(y.first_name);
    $("input[type='hidden'][name='last_name']").val(y.last_name);
  });

  $(document).on('click', '#btn-add-account', function() {
    $('#add-account-modal').modal('show');
    getAllStudents();
  });

  $(document).on('submit', '#form-add-account', function() {
    $.ajax({
      url: "register",
      type: "POST",
      data: $(this).serialize(),
      success: function(data) {
        if (data.success === true) {
          alert("Account Successfully Added!");
          location.reload();
        } else {
          alert("Something went wrong");
        }
      }
    });
    return false;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
  <input type="hidden" class="form-control" name="first_name" required>
</div>

<input type="hidden" id="token" name="_token" value="{{csrf_token()}}">

<div class="col-md-6">
  <input type="hidden" class="form-control" name="last_name" required>
</div>

<div class="form-group">
  <label>Account User</label>
  <select type="select" id="select-student" class="form-control select2 select-student" name="student" required>
    <option value="" selected disabled>Select Student</option>
  </select>
</div>

由于没有示例数据,因此无法测试,并且无法在代码段中执行AJAX。

© www.soinside.com 2019 - 2024. All rights reserved.