Корисници обрасца могу једноставно копирати садржај између поља

Note

Овај водич је застарео. За нову верзију, погледај: „Како копирати вредност поља у друго поље“.

Слика обрасца испод илуструје наш циљ. Кликни на слику да тестираш образац.

Корисници обрасца могу једноставно копирати садржај између поља Image-1

Као што видиш, уколико корисник унесе име у поље „Your Name“ и жели да користи исто име у пољу „Salesperson’s Name“, све што траба да уради је да обележи „You are the salesperson“. Уколико се касније одлучи да остави другачије име у другом пољу, клик на поље „You are the salesperson“ ће бити довољно. Исто важи и за „Your Email“ и „Salesperson’s Email“, као и за „Home Address“ и „Salesperson’s Address“ поља. Уколико комплетираш образац и пошаљеш га (кликом на слику изнад), видећеш да ће сви уноси бити видљиви у имејлу аутоматског одговора.

Страна на којој је образац уграђен садржи блок JavaScript кода директно изнад затвореног „body“ тага, заједно са „onClick event handlers“ у таговима за унос, што даје функционалност за копирање вредности.

Како додати ову функционалност у сопствени образц

Рецимо да имаш образац са две адресе („Адреса за доставу“ и „Адреса из личне карте“) и желиш корисницима да понудиш опцију да копирају вредност првог поља у друго. Ево шта треба да урадиш:

1. Отвори образац у креатору образаца и додај јединствени избор ознад „Адреса из личне карте“ поља.

2. Кликни „Опције“, уклони Опцију 2 и Опцију 3, преименуј „Опција 1“ у „Исто као адреса изнад“ и кликни „ок“.

3. Промени ознаку тог поља на „Исто као адреса изнад“.

4.Користи инспектор елемената да сазнаш идентификатор ове ознаке, и додај CSS да је сакријеш користећи идентификатор и подеси видљивост или дисплеј опције, у зависности од твојих потреба. Уколико је идентификатор поља на пример „label_6“, и, уколико желиш да га сакријеш да не пореметиш распоред осталих поља, додај следеће правило:

#label_6 {
visibility:hidden;
}

5. Сачувај образац, отвори „Објави“, кликни на „Уграни образац“, одабери „Изворни код“ и копирај га.

6. Додај изворни код орбасца на веб страну где желиш да се образац појави.

7. Претражи изворни код и пронађи value=”Исто као адреса изнад” /> и промени вредност на value=”Исто као адреса изнад” onclick=”copy_address();” />

8. Додај овај JavaScript код одмах пре затварања „body“ тага и у истом блоку замени сваку појаву „12885302469“ са идентификатором свог обрасца (бројеви у URL-у које можеш видети овде).

9. Претражи изворни код за „Адреса за доставу“ и запамти број који се понавља изнад, испод и у истој линији (погледај снимак екрана).

10. У JavaScript коду пронађи свако понављање броја „5“ са овог снимка екрана са бројем из петходнох корака (наравно, уколико је твој број из претходног корака исто 5, нема потребе за мењањем).

11. Претражи „Адреса из личне карте“ у изворном коду и и запамти број који се понавља изнад, испод и у истој линији (погледај снимак екрана).

12. У JavaScript коду пронађи свако понављање броја „8“ са овог снимка екрана са бројем из петходнох корака (наравно, уколико је твој број из претходног корака исто 8, нема потребе за мењањем).

Како функционише?

Уколико погледаш изворни код стране са примером обрасца на слици изнад, видећеш блок JavaScript кода пре него што је „body“ таг затворен. Ово, заједно са „onClick event handlers“ је шта омогућава обрасцу да копира вредности поља. Хајде да делимично раздвјимо садржај JavaScript блока (линк се отвара у новој картици – број линија је такође доступан): Линије 1 – 10, 12 – 19 и 21 – 38 су раздвојене, али су функције сличне. Имена функција су copy_name(), copy_email() и copy_address(), и свака има „IF ELSE“ услов.

Прва функција: copy_name()

Линије 1 – 10

Ова функција копира име и презиме из поља за име у друго поље, уколико је „You are the salesperson“ поље одабрано и уклаља име уколико се вишеструки избор уклони. Идентификатори поља за унос се могу наћи у изворном коду обрасца и излистани су у наставку. input_11_0 (“You are the salesperson” вишеструки избор), first_6 (“Име” поље за унос у “Salesperson’s Name” пољу), last_6 (“Last Name” поље за унос у “Salesperson’s Name” пољу), last_3 (“Last Name” поље за унос у “Your Name” пољу). Линија 3 проверава статус (вредност) поља „You are the salesperson“ (input_11_0) у обрасцу (form_12885302469) који постоји у документу. УКОЛИКО је поље обележено, услов (у загради) ће бити истинит, и код између првог пара витичастих заграда (линије 4 – 5: ТАЧАН део услова) ће бити покренут. У супротном, уколико поље није обележено, У СУПРОТНОМ грана (линије 7 – 8) ће се покретнути.

Објашњење првог дела услова

Линија 4 говори да ће поље за унос имена бити попуњена са било којом унешеном вредношћу имена у пољу „Salesperson’s Name“. Исто се односи и за линију 5: шта год да је унешено у презиме ће бити копирано у презиме поља „Salesperson’s Name“

Објашњење другог дела услова

Линија 7 говори да име поља „Salesperson’s Name“ (first_6) неће имати ништа, што је приказано празним стрингом: ништа није постављену између наводника на крају линије.

Исто тако, Линија 8 означава да презиме у пољу „Salesperson’s Name“ (last_6) неће имати вредност.

Друга функција: copy_email()

Линије 12 – 19

Ова функција копира имејл адресу уколико је „Same email as above“ обележено од стране корисника, и обрише вредност уколико поље није обележено. Идентификатори поља за унос се могу наћи у изворном коду обрасца и излистани су у наставку: input_13_0 (“Same email as above” вишеструки избор), input_7 (имејл адреса у „Salesperson’s Email“ пољу за унос), input_4 (имејл адреса у “Your Email” пољу за унос). Линија 14 испитује статус поља за вишестурки одабир (input_13_0), и УКОЛИКО је поље обележено од стране корисника, линија ће бити означена као тачна, и повезана грана ће бити извршена. У супротном, НЕТАЧНА грана (линија 17) ће бити покренута. У ТАЧНО грани се означава да ће „Salesperson’s Email“ поље бити попуњено са вредношћу из „Your Email“ поља уколико је „Same email as above“ означено, а у супротном имејл ће бити обрисан.

Трећа функција: copy_address()

Линије 21 – 38

Ова функција копира свих 6 вредности из „Адреса из личне карте“ у иста поља из „Адреса из личне карте“ УКОЛИКО је „Same address as above“ поље обележено, и брише адресу уколико није. Идентификатори за сва поља за унос су излистани испод:

input_12_0 (“Same address as above” check box) input_8_addr_line1 (“Street Address” text box in “Salesperson’s Address” field)

input_8_addr_line2 (“Street Address Line 2” text box in “Salesperson’s Address” field)

input_8_city (“City” text box in “Salesperson’s Address” field)

input_8_state (“State / Province” text box in “Salesperson’s Address” field)

input_8_postal (“Postal / Zip Code” text box in “Salesperson’s Address” field)

input_8_country (“Country” drop down in “Salesperson’s Address” field)

input_7_addr_line1 (“Street Address” text box in “Home Address” field)

input_7_addr_line2 (“Street Address Line 2” text box in “Home Address” field)

input_7_addr_city (“City” text box in “Home Address” field)

input_7_state (“State / Province” text box in “Home Address” field)

input_7_postal (“Postal / Zip Code” text box in “Home Address” field)

input_7_country (“Country” drop down in “Home Address” field)

Ова функција је иста као и фунцкије „copy_name()“ и „copy_email()“, па их погледајте да видите како је трећа функција направљена.

Event Handlers

Као што је напоменуто на почетку, како би све фунцкије радиле, морају бити „позване“ користећи „onClick event handlers“ из самог елемента. Уколико претражиш „onclick“ у изворном коду стране са уграђенин обрасцем, видећеш четири резултата:

onclick=”copy_name();”
onclick=”copy_email();”
onclick=”copy_address();”
onclick=”JotForm.reloadCaptcha(‘input_10’);”

Приметићеш да имена прве три функције описују саму функцију. Имај на уму да ова имена могу имати било које вредности. Али, је увек препоручено да имена функција буду повезане са њиховом сврхом. Такође, тачка-зарез није увек неопходна, али се сматра добром праксом да се додају, исто као што требају да се додају након декларације CSS правила.

Прва три „onClick event handlers“ морају ручно да буду додати у изворни код док је четврти аутоматски додат приликом уградње и није везан за ову тему.

Пар ствари које треба имати на уму

Будући да опција копирања зависи не само од JavaScript кода, већ и од „onClick“ догађаја, сваки пут када промениш образац и уградиш нов код на твоју страну, мораћеш да додајеш код опет.
У примеру обрасца, можда си приметио малу разлику између два поља за имејл. Ова грешка се јавља у Интернет екплореру уколико се користи помоћ опција. Налепљена вредност поља је додата користећи исту сиву боју и (још битније), не приказује се у имејл обавештењима.
Копирање ради само у једном смеру. Уносом једног имена у „Salesperson’s Name“ неће копирати унешену вредност у поље за име.
Уклањањем ознаке у пољу за вишеструки избор ће обрисати садржај поља, вез обзира да ли је корисник ручно унео вредност или је она налепљена из другог поља.
Корисник може да обележи једно од поља за копирање вредности и затим променити вредност док је поље за копирање обележено. Ово може довести до конфликта у информацијама у сачуваним подацима. Вредност унешена у поље увек треба бити сматрана као тачном.
Уместо користити велика слова „onClick“ мора бити написана малим словима („onclick“) како би страница била валидна.