我有一个表格,允许我选择[选择表格]学生的姓名(全名)。
我想将全名分解成几个部分(名字,姓氏,然后将它们插入表单(隐藏),然后通过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 =杰克逊
我怀疑您需要的是这个:
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。