Formatierte Telefonnummer als POST Daten übertragen mit dem International Phone Number Plugin

Das Plugin International Phone Number Plugin von Jack O´Connor für jQuery ist ein hervorragendes Werkzeug um die Telefonnummer der User in einer standardisierten Form zu erfassen. Allerdings wird bei der Übertragung eines Formulars nicht die international formatierte Nummer sondern die vom Benutzer eingegebene Nummer übertragen. Ich habe daher ein kleines Script angefertigt, dass dieses Problem löst.

Ich habe ein kurzes jQuery Script verfasst, das das großartige International Phone Number Plugin erweitert und es so ermöglicht, die international formatierte Nummer anstelle der (vom User eingegebenen) nationallen Nummer in den POST Daten an den Server zu übertragen. Es gibt bereits zwei Snippets, allerdings sind beide nicht vollständig automatisiert und benötigen einige Änderungen am Code.

Diese Lösung fügt in das Formular automatisch ein verstecktes Feld mit der berechneten Nummer ein, das den Namen des Originalfeldes erbt. Das Originalfeld wird umbenannt und die berechnete Nummer mit dem selben Variablenname im POST Array übergeben. Dieser Aufbau vermeidet Änderungen am Applikationscode zu großen Teilen.

So kanst Du das Script verwenden

Um dieses Script nützen zu können, musst Du bereits eine funktionierende Implementierung des International Phone Number Plugins in Deiner Anwendung haben. Auf der GitHub Seite des Authors findest Du eine Menge Anleitungen und Beispiele für die Integration und Konfiguration des Plugins.

1. CSS-Klasse „intl-number“ hinzufügen

Füge die CSS-Klasse „intl-numer“ bei allen Eingabefeldern hinzu, deren Werte Sie formatiert übertragen möchten.

<input type="tel" name="telephone" class="intl-number" />

2. jQuery Script in Seite einfügen

Binden Sie dieses Script in Ihre Applikation ein.

/**
  * This method is used to convert the entered phone number to international format and submit this data as POST data.
  * To achieve this, a new (hidden) field is added which replaces the original field and holds the calculated international
  * phone number.
  */
 $("form").submit(function() {
 
     // Lookup all intl-number fields
     $(".intl-number").each(function(index) {
 
         var numberIntl = $(this).intlTelInput("getNumber");
         var elementId = $(this).attr('id');
         var elementName = $(this).attr('name');
 
         // Was the form already submitted? Store the original field name for referal use. This field also indicates,
         // if the form was already submitted (and for example submission was stopped by another script). If so we
         // don´t add the hidden field but we update the field value bellow.
         if(!$(this).data('original-name')) {
             $(this).data('original-name',elementName);
 
             // Rename the original field to avoid duplicate field names in the form
             $(this).attr('name',elementName+'_temp_DONT_USE');
 
             // Add a new element with the intl value that replaces the original one.
             $(this).parent().parent().append('<input type="hidden" name="'+elementName+'" />');
 
         }
 
         // Update the value of the hidden field.
         $(this).parent().parent().find('input[name="'+$(this).data('original-name')+'"]').val(numberIntl);
 
     });
 
 });

Kommentar verfassen

Folge mir auf Twitter

Hol Dir kostenlos Tipps und Tricks zu Shopware, E-Commerce und andere Open-Source Produkte.

Folge @synonymousrocks