Tout d'abord, merci d'avance à tous ceux qui peuvent vous aider.
Je voudrais remplir le champ de nom en fonction du champ prénom et nom.
J'imagine que la solution est simple, mais je ne connais pas très bien JavaScript.
La solution peut être basée sur Vanilla JS ou 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>
L'extrait ci-dessous met à jour l' #nameentrée avec les valeurs de #first_nameet #last_namesur keyupdans l'un ou l'autre champ.
Notez que j'ai utilisé un opérateur ternaire pour définir la valeur de la spacevariable. J'ai fait cela pour éviter qu'un espace étranger ne soit ajouté au #namechamp si le premier ou le dernier est vide.
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">Je me rends compte que le HTML n'est pas une reproduction exacte du vôtre, mais j'ai pensé que cela ajouterait une complexité inutile à la solution. Tout ce dont vous avez vraiment besoin est le jQuery.
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots