Vollständiger Name von Benutzer sein in getrennten Versteckte Formularfelder

Question

Ich habe ein Formular mit den beiden folgenden Eingänge

<div class="required form-group" style="display:none"> 
    <label for="customer_firstname">{l s='First name'} 
     <sup>*</sup> 
    </label> 
    <input onkeyup="$('#firstname').val(this.value);" type="text" class="is_required validate form-control" data-validate="isName" id="customer_firstname" name="customer_firstname" value="{if isset($smarty.post.customer_firstname)}{$smarty.post.customer_firstname}{/if}" /> 
</div> 
<div class="required form-group" style="display:none"> 
    <label for="customer_lastname">{l s='Last name'} 
     <sup>*</sup> 
    </label> 
    <input onkeyup="$('#lastname').val(this.value);" type="text" class="is_required validate form-control" data-validate="isName" id="customer_lastname" name="customer_lastname" value="{if isset($smarty.post.customer_lastname)}{$smarty.post.customer_lastname}{/if}" /> 
</div> 

Wie Sie diese beiden Felder werden ausgeblendet sehen können. Das ist, weil ich eine neue Eingabe erstellen möchte, die vollständiger Name aufgerufen wird, und was auch immer die Benutzer hier eingeben, wird automatisch in diesen Vornamen und Nachnamen gefüllt.

Wenn also der vollständige Name John Doe ist, dann wird der Vorname John und der Nachname Doe enthalten. Oder wenn der vollständige Name Stuart Ben Mackenzie lautet, wird der erste Name Stuart Ben und der Nachname Mackenzie enthalten. Wie kann ich das mit Javascript machen?

Answer 1

Sie sollten diese verwenden:

<input id="fullname" type="text"/> 

$('#fullname').val($('#firstname').val()+' '+$('#lastname').val()); 

Answer 2

Das hängt wirklich davon ab, wie Sie den Vornamen des letzten erkennen wollen. Wenn Sie möchten, dass der Nachname immer nur 1 Wort ist, würden Sie die Namen als solche parsen.

auf Ihre Eingabe (e), die Sie benötigen Eingabe eine Klasse verfolgen oder dann einfach binden die keyup Event-Handler, um es wie

$("input[traced-input]").on("keyup", function(){ 
    var tft = $(this); //short for thisTextField 
    if(tft.attr("id")==='fullname'){ 
     //parse the names here into an array presumably 
     $("#firstname").val(namesArr['firstname']); 
     $("lastname").val(namesArr['lastname']); 
    } 
}); 

Stellen Sie sicher, dass der js in $ setzen Attribut (document) .ready() und wenn der HTML-Inhalt dynamisch geladen wird, dann einen Delegaten hinzufügen, wie

$(document).on("keyup", '.class or #id here', function() { 
     //do stuff 
    }); 

Answer 3

Sie brüllen Code achive können:

<input id="fullname" type="text"/> 

var fullname=$('#fullname').val(); 
var pieces = fullname.split(' '); 

var customer_lastname=pieces[pieces.length-1]; 
$("#customer_lastname").val(customer_lastname); 

pieces.pop(); 
var customer_firstname=pieces.join(" "); 
$("#customer_firstname").val(customer_firstname);