Множество формуляри на една страница без изпращане презареждане

Можете да изтеглите готови файлове, които допълнително включват валидиране на въведените данни във формата (валидация), като споделите статията в Twitter.

Представете си, че имате няколко форми на комуникация с различни цели на страницата на вашия уебсайт. Най-добрият начин да обясните тази необходимост е да създадете уебсайт, който хоства формуляр за заявка за обаждане, формуляр за заявка за оферта, формуляр за заявка за каталог и всякакви други форми, от които се нуждаете.

PHP манипулаторът е отговорен за изпращането на имейла с данните, въведени във формуляра. За предаване на данни към манипулатора се използва бутон с типа изпращане. В случай на използване на няколко форми на комуникация с един php манипулатор, трябва да му предадете данните от формата, в която е натиснат бутонът "Изпрати". Това може да се направи чрез if / else, като се вземат предвид различни имена на атрибути, като се създадат едни и същи части от код, можете да създадете куп манипулатори с различни имена, но един и същ код, или можете да използвате jQuery скрипт, с който данните ще бъдат изпратени на манипулатора от формуляра, където е щракнат бутонът „Изпращане“.

След това ще покажем как да внедрим няколко формуляра за контакт на една и съща страница, които изпращат данни, без да презареждат страницата към един манипулатор.

Множество форми за контакт с един манипулатор

Например, нека вземем три форми.

Дайте на всеки формуляр уникален идентификатор. Имаме form1, form2 и form3. Освен това използвайте css класове, за да стилизирате формуляра, включете атрибути за контейнери, за да покажете подсказката, и добавете скрит вход, за да формирате темата на имейла.

По този начин сега формулярите имат различни идентификатори и можем да напишем скрипт, който ще изпраща данни към манипулатора въз основа на идентификатораформи.

Изпращане на формуляр без презареждане на страницата

Обикновено изпращането на данни от формуляр ще ви пренасочи към страница за потвърждение. В случай на използване на множество форми на страницата, това ще попречи и отвлече вниманието на клиента от вашето предложение и попълване на друга заявка.

Използвайки AJAX, изпращането на формуляр без презареждане на страницата е много лесно.

Формулярът за контакт е в ход

След като натиснете бутона "Изпрати", вместо полетата за въвеждане на формуляра ще видите съобщение за изпращане.

Форма за контакт след натискане на бутона „Изпращане“.

актуализация: Ако трябва да възстановите формуляра след изпращане на данните, можете да използвате следното решение (поставете маркирания код на посоченото място и обвийте всички входове във формуляра в div с идентификатор, например входове):

Методът .load() зарежда данни и ги вмъква в посочения елемент.

"#parent" - идентификатор на формуляра, където трябва да се вмъкнат изтритите данни. В примерния скрипт с изпращане на данни от формуляр без презареждане на страницата, обвийте всички входове в div. Дайте му id, като inputs. Този div с вложени полета за въвеждане се премахва от скрипта и на негово място се появява съобщение за изпращане. Оказва се, че етикетът на формуляра с id остава в кода, този id трябва да бъде посочен в #parent, това ще стане контейнер за скрипта за зареждане на данните на формуляра (отдалечено въвеждане).

"#child" - идентификатор на блока, който съдържа входа. В този случай div е #inputs.

3000 - време в ms, след което кодът на формата ще бъде възстановен.

PHP манипулатор

Този манипулатор съдържа проверка на метода за прехвърляне на данни.

Когато създавате формуляри на страниците на вашия сайт, не забравяйте за въвеждането на валидиране на въведените данни и методи за защита от спам.

Създаване на сайткомпания Madcatzz

За да бъдете успешни днес, трябва да продавате услугите или продуктите си на възможно най-много хора. В миналото това беше по-трудно, но с навлизането на Интернет можете да достигнете до произволен брой клиенти, просто трябва да подходите професионално.

Създаване на сайт на фирма Madcatzz