[JavaScript][HTML] Wartość jednego pola zależna od tego co w innym polu. Opcje

[politowski]

Witam zrobiłem sobie taki formularz do wprowadzania informacji o profilach społecznościowych na stronie i potrzebuje pomocy bo utknąłem.
https://jsfiddle.net/xvyu34u0/5/
Chodzi o to żeby dodać do tego formularza opcję weryfikacji adresów url.

Jak fragment tekstu wpisanego w formularz będzie zawierał 'twitter.com' to chciałbym aby w polu 'Short Title' pojawiło się 'Twitter' ikonka globusa zmieniła się na fa-twitter, jak 'instagram.com' to pole 'Short Title' dostanie wartość 'Instagram' ikonka zmieni się na fa-instagram itd.

Mógłbym to pewnie w JS zrobić jakimiś ifem ale tych reguł będzie więcej więc było by masę ifów, jak to ogarnąć prościej?
Na razie wymyśliłem sobie że zrobię taką tablicę:

Kod

var socialServices = {
    'facebook.com' : {
        'title' : 'Facebook',
        'icon' : 'fa-facebook'
    },
    'twitter.com' : {
        'title' : 'Twitter',
        'icon' : 'fa-twitter'
    },
    'instagram.com' : {
        'title' : 'Instagram',
        'icon' : 'fa-instagram'
    },
};

tylko nie wiem jak ogarnąć chodzenie po tablicy i sprawdzanie jak formularz zawiera facebook.com to podstaw wartość klucza title dla facebook.com w inpucie www_label[] i wartość icon zamiast 'fa-globe'

[viking]

https://jsfiddle.net/xvyu34u0/10/

[politowski]

Dzięki działa, a co zrobić żeby rozpoznawało też adresy w stylu https://facebook.com/nazwa-profilu ?

[viking]

Pobawić się wyrażeniami regularnymi.

[politowski]

Domyślam się ze sprawę załatwią wyrażenia regularne, ale całkiem nie wiem jak to ugryźć, mógłbym prosić o przykład choćby dla jednego klucza np facebook.com ?

[viking]

Możesz coś z tego wykorzystać https://stackoverflow.com/questions/1789945...g-in-javascript
Zależy czy ma być dokładny adres czy tylko fragment domeny.

[politowski]

Zależy mi na tym żeby jeśli w polu input znajduje sie domena i jest ona w tablicy to wtedy podstaw wartośc z klucza icon lub title

[trueblue]

Tak jak napisałeś wyżej, wyrażenia regularne będę tu pomocne. Użyj ich w tablicy socialServices zamiast nazw domen.
Po wpisaniu danego ciągu w pole, sprawdzisz w pętli, z którym wyrażeniem regularnym zgadza się wartość. Jeśli się zgadza, to będziesz miał icon i title na tacy.

[viking]

https://jsfiddle.net/xvyu34u0/11/

[politowski]

Dzięki, dodałem jeszcze klucz 'regexp' dla każdego serwisu, sprawdzam poprzez match i działa prawie idealnie, jak wpiszę prawidłowy adres url twittera, facebooka, instagrama, to zmienia opisy idealnie, jest tylko jeden mały problem, chciałbym aby jeśli w wyniku edycji nadpiszę adres który jest w tablicy takim którego nie ma w tablicy, ewentualnie wyczyszczę pole adresu całkiem, czyściło też pole 'short title', i jest jeszcze kwestia tego że działa tylko na jednym polu, jak sklonuje pola przez "+" po prawo, to wszystko pada nic nie działa, nigdzie nie waliduje danych.
https://jsfiddle.net/xvyu34u0/24/

A tak dodatkowo: jak ograniczyć dodawanie pól przez "+" do max 10 zestawów?

[viking]

https://prophp.pl/article/28/propagacja_i_d...en_w_javascript
Po kliknięciu + podlicz ilość. Wygląda jakbyś coraz bardziej czekał na gotowy kod.

[politowski]

https://prophp.pl/article/28/propagacja_i_d...en_w_javascript
Po kliknięciu + podlicz ilość. Wygląda jakbyś coraz bardziej czekał na gotowy kod.

Skądże znowu nie czekam na gotowca, aczkolwiek z nich najlepiej mi się uczyć i zrozumieć działanie. Jak widzisz to nie jest tak że Twój kod został w 100% przepisany i czekam na kolejne gotowe rozwiązania. Działam w oparciu o kod który podałeś ale go zmodyfikowałem, próbuje coś robić samemu, i jak mi nie wychodzi to dopytuje.
JS nie ogarniam jeszcze aż tak bardzo, szybciej bym to zrobił w PHP, mam już nawet gotowy kod który zwraca mi json z tablicą w zależności od tego co jest w $_POST, ale wolałbym to zrobić bez AJAXa, tylko w JS/jQuery

[PHP] pobierz, plaintext 
// $post_data - dane przesyłane metodą POST
$post_data = 'https://www.instagram.com/explore/tags/annalewandowska/';
$socialServices = array(
	'facebook' => array(
		'regexp' => '#https?\://(?:www\.)?facebook\.com/(\d+|[A-Za-z0-9\.]+)/?#im',
		'icon' => 'fa-facebook',
		'title' => 'Facebook'
		),
	'twitter' => array(
		'regexp' => '#https?://(?:www\.)?twitter\.com/(\d+|[A-Za-z0-9\.]+)/?#im',
		'icon' => 'fa-twitter',
		'title' => 'Twitter'
		),
	'instagram' => array(
		'regexp' => '#https?://(?:www\.)?instagram\.com/(\d+|[A-Za-z0-9\.]+)/?#im',
		'icon' => 'fa-instagram',
		'title' => 'Instagram'
		),
	);
 
foreach ($socialServices as $value) {
	if(preg_match($value['regexp'], $post_data)){
		$data[] = array ('title'=> $value['title'], 'icon' => $value['icon']);
	}
}
 
if(!isset($data)){
	$data[] = array ('title'=> '', 'icon' => 'fa-globe');
}
header('Content-Type: application/json');
echo json_encode($data);
[PHP] pobierz, plaintext