首先,首先感谢任何可以提供帮助的人。
我想根据first_name和last_name字段填充名称字段。
我可以想象解决方案很简单,但是我对JavaScript并不了解。
该解决方案可以基于Vanilla JS或Jquery
<form method="POST" action="{{ route('register') }}" id="loginForm">
@csrf
<div class="form-group mb10">
<div class="input-group">
<input id="name" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name" value="test" placeholder="{{ __('Username') }}" required autofocus>
@if ($errors->has('name'))
<span class="invalid-feedback">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group mb10">
<div class="input-group">
<input id="first_name" type="text" class="form-control{{ $errors->has('first_name') ? ' is-invalid' : '' }}" name="first_name" value="{{ old('first_name') }}" placeholder="{{ __('First Name') }}" required autofocus>
@if ($errors->has('first_name'))
<span class="invalid-feedback">
<strong>{{ $errors->first('first_name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group mb10">
<div class="input-group">
<input id="last_name" type="text" class="form-control{{ $errors->has('last_name') ? ' is-invalid' : '' }}" name="last_name" value="{{ old('last_name') }}" placeholder="{{ __('Last Name') }}" required autofocus>
@if ($errors->has('last_name'))
<span class="invalid-feedback">
<strong>{{ $errors->first('last_name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group mb10">
<div class="input-group">
<input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="{{ __('E-Mail Address') }}" required>
@if ($errors->has('email'))
<span class="invalid-feedback">
<strong>{{ $errors->first('email') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group">
<div class="input-group mb10">
<input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="{{ __('Password') }}" required>
@if ($errors->has('password'))
<span class="invalid-feedback">
<strong>{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group mb10">
<div class="input-group">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" placeholder="{{ __('Confirm Password') }}" required>
</div>
</div>
<div class="form-group mb10">
<div class="input-group">
<button type="submit" class="btn btn-success btn-quirk btn-block">
{{ __('Register') }}
</button>
</div>
</div>
</form>
该片段如下更新#name
与价值观输入#first_name
,并#last_name
在keyup
任一领域。
请注意,我使用了三元运算符来设置space
变量的值。我这样做是为了防止#name
在first或last为空的情况下向该字段添加多余的空间。
function createName() {
let first_name = $("#first_name").val();
let last_name = $("#last_name").val();
let space = (first_name == "" || last_name == "") ? "":" ";
let full_name = first_name + space + last_name;
$("#name").val(full_name);
}
$("#first_name, #last_name").keyup(function() {
createName();
});
// if you want this function to run when the page loads,
// just call the function once outside of the keyup event
createName();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Name: <input type="text" id="name"><br>
First Name: <input type="text" id="first_name"><br>
Last Name: <input type="text" id="last_name">
我意识到HTML不能完全复制您的HTML,但是我认为这会给解决方案增加不必要的复杂性。您真正需要的只是jQuery。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句