ഇന്ന്, വെബ് ആപ്ലിക്കേഷനുകളുമായുള്ള ഉപയോക്തൃ ഇടപെടലിനുള്ള ഏറ്റവും പ്രധാനപ്പെട്ട ഉപകരണങ്ങളിലൊന്നാണ് ഫോമുകൾ. ഫോമുകൾ നിങ്ങളെ സംഘടിപ്പിക്കാൻ അനുവദിക്കുന്നു ഫലപ്രദമായ മാനേജ്മെൻ്റ്സൈറ്റിലെ വിവരങ്ങൾ, സൈറ്റിൻ്റെ അവസ്ഥ, ക്ലയൻ്റുകൾക്ക് സേവനങ്ങൾ നൽകുക, മറ്റ് ഉപയോക്താക്കൾക്ക് വിവരങ്ങൾ കൈമാറുക, അടച്ച വിഭാഗത്തിലേക്ക് ആക്സസ് നൽകുക, കൂടാതെ മറ്റു പലതും... അതിനാൽ, ഫോമുകൾ കൂടുതൽ ഉണ്ടാക്കാൻ തികച്ചും സ്വാഭാവികമായ ആഗ്രഹമുണ്ട്. സൗകര്യപ്രദവും ജോലിയുടെ പ്രത്യേക സൂക്ഷ്മതകളുമായി പൊരുത്തപ്പെടുന്നതും.

പേജ് റീലോഡ് ചെയ്യാതെ തന്നെ സംവേദനാത്മകമായി, ഡാറ്റാ എൻട്രിക്കുള്ള ഫീൽഡുകളുടെ എണ്ണം കൂടുകയും കുറയുകയും ചെയ്യുന്നതിനുള്ള കഴിവ് നടപ്പിലാക്കുക എന്നതാണ് അത്തരം മെച്ചപ്പെടുത്തലിനുള്ള ഒരു മേഖല. ആപ്ലിക്കേഷൻ ഡാറ്റാബേസിലേക്ക് നിങ്ങൾക്ക് ഒന്നല്ല, നിരവധി റെക്കോർഡുകൾ ചേർക്കണമെങ്കിൽ ഇത് വളരെ സൗകര്യപ്രദമായിരിക്കും; അല്ലെങ്കിൽ സമാനമായ ഡാറ്റയുടെ എണ്ണം മുൻകൂട്ടി അറിയില്ലെങ്കിൽ, ഓരോന്നിനും ഒരു പ്രത്യേക ഇൻപുട്ട് ഫീൽഡ് ആവശ്യമാണ് (ഉദാഹരണത്തിന്, നിരവധി ടെലിഫോൺ നമ്പറുകൾ അല്ലെങ്കിൽ ക്രെഡിറ്റ് കാര്ഡുകള്ഉപയോക്താവ്). ഈ ലേഖനത്തിൽ നമ്മൾ അതിലൊന്ന് നോക്കും ലളിതമായ നടപ്പാക്കലുകൾഅങ്ങനെയൊരു അവസരം ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നു jQuery ലൈബ്രറികൾ.

ഏറ്റവും താഴെ, ഈ ലേഖനത്തിൽ ചർച്ച ചെയ്തിട്ടുള്ള ഉദാഹരണങ്ങളുള്ള ഒരു ആർക്കൈവ് നിങ്ങൾക്ക് ഡൗൺലോഡ് ചെയ്യാം.

ഫോമിലേക്ക് ഒരു പുതിയ ഫീൽഡ് ചേർക്കുന്നു.

.append() രീതി ഉപയോഗിച്ച് ഞങ്ങൾ ഒരു പുതിയ ഫോം ഫീൽഡ് സൃഷ്ടിക്കും:

$("സെലക്ടർ").append("string");

നിർദ്ദിഷ്ട "സെലക്ടർ" ഉള്ള ഒരു മൂലകത്തിൻ്റെ ഉള്ളിലേക്ക് ഒരു "സ്ട്രിംഗ്" ചേർക്കുന്നു, നിലവിലുള്ള ഉള്ളടക്കത്തെ പിന്തുടർന്ന് ചേർത്ത സ്ട്രിംഗ്.

ഞങ്ങൾ പരിഗണിക്കുകയാണെങ്കിൽ നിർദ്ദിഷ്ട ഉദാഹരണം, അപ്പോൾ അത് ഇതുപോലെയായിരിക്കാം:

ഫീൽഡ് #1 "/>ഒരു പുതിയ ഫീൽഡ് ചേർക്കുക

addField() ഫംഗ്‌ഷൻ തന്നെ ഇനിപ്പറയുന്ന രീതിയിൽ നടപ്പിലാക്കാം:

< script type= "text/javascript" >ഫംഗ്ഷൻ addField () (var telnum = parseInt($("#add_field_area") .find ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .അനുബന്ധം ( "ഫീൽഡ് നമ്പർ "ടെൽനം "") ;

ആദ്യം, പതിവുപോലെ, ഞങ്ങൾ jQuery ലൈബ്രറി ഉൾപ്പെടുത്തുകയും തുടർന്ന് addField() ഫംഗ്ഷൻ പ്രഖ്യാപിക്കുകയും ചെയ്യുന്നു. ചേർക്കുന്ന ഘടകത്തിലേക്ക് ചേർക്കേണ്ട നമ്പർ ഫംഗ്ഷൻ ആദ്യം കണക്കാക്കുന്നു - ഈ നമ്പർ ഉപയോഗിച്ച്, ഞങ്ങൾ പിന്നീട് അനാവശ്യ ഫീൽഡുകൾ നീക്കംചെയ്യും. തുടർന്ന് addField() div#add_field_area-ലേക്ക് div#add№ ബ്ലോക്കിൻ്റെ കോഡ് ചേർക്കുന്നു, അതിനുള്ളിൽ ഒരു ഫോം ഫീൽഡ് ഉണ്ട്, ഇതിൻ്റെ കോഡ് മുകളിൽ സൂചിപ്പിച്ചിരിക്കുന്ന "ഫീൽഡ് നമ്പർ 1" എന്ന കോഡിന് പൂർണ്ണമായും സമാനമാണ്. ഇപ്പോൾ നമ്മൾ "ചേർക്കുക" ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ, ഒരു പുതിയ ഫീൽഡ് എങ്ങനെ തൽക്ഷണം ദൃശ്യമാകുമെന്ന് നമുക്ക് കാണാൻ കഴിയും.

ഒരു നിർദ്ദിഷ്ട ഫോം ഫീൽഡ് ഇല്ലാതാക്കുന്നു.

DOM ട്രീ ഘടകങ്ങൾ നീക്കംചെയ്യുന്നതിന്, നിങ്ങൾക്ക് നീക്കം() രീതി ഉപയോഗിക്കാം:

$("സെലക്ടർ").നീക്കം();

ഇത് നിർദ്ദിഷ്ട "സെലക്ടർ" ഉള്ള മൂലകത്തിൽ പ്രയോഗിക്കുന്നു. സ്ഥിരസ്ഥിതിയായി ഒരു ഫീൽഡ് എല്ലായ്പ്പോഴും നിലനിൽക്കണമെന്ന് ഞങ്ങൾ അനുമാനിക്കും, അധികമായവയെല്ലാം ഇല്ലാതാക്കാൻ കഴിയും. ഇത് ചെയ്യുന്നതിന്, addField() ഫംഗ്‌ഷനിൽ, .append() രീതിയുടെ പരാമീറ്റർ ലൈനിൽ, ഞങ്ങൾ ഫീൽഡ് ഡിലീറ്റ് ബട്ടണിനുള്ള കോഡ് ചേർക്കും, ക്ലിക്ക് ചെയ്യുമ്പോൾ, deleteField (id) ഫംഗ്‌ഷൻ വിളിക്കപ്പെടും, നമ്പർ ഇല്ലാതാക്കേണ്ട ഫീൽഡിൻ്റെ ഫംഗ്‌ഷനിലേക്ക് കൈമാറും.

ഫംഗ്ഷൻ addField () (var telnum = parseInt($("#add_field_area") .find ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .അനുബന്ധം ( "ഫീൽഡ് നമ്പർ " ടെൽനം " " ) ;

deleteField() ഫംഗ്‌ഷൻ തന്നെ വളരെ ലളിതമായിരിക്കും:

ഫംഗ്‌ഷൻ deleteField (id) ( $("div#add" id).remove () ; )

അത്രയേയുള്ളൂ. ഇപ്പോൾ, നിങ്ങൾ തിരഞ്ഞെടുത്ത ഫീൽഡിന് എതിർവശത്തുള്ള ബട്ടണിൽ (റെഡ് ക്രോസ്) ക്ലിക്ക് ചെയ്യുമ്പോൾ, അത് അപ്രത്യക്ഷമാകും, അതോടൊപ്പം അതിൽ രേഖപ്പെടുത്തിയിരിക്കുന്ന വിവരങ്ങളും.

സെർവറിലെ ഡാറ്റ പ്രോസസ്സിംഗ് (php).

ഒരു ഫോമിൽ ഒരേ തരത്തിലുള്ള ഡാറ്റയുള്ള ഒന്നിലധികം ഫീൽഡുകൾ അടങ്ങിയിരിക്കുമ്പോൾ, ഡാറ്റാ പ്രോസസ്സിംഗിനെക്കുറിച്ചുള്ള ചോദ്യം സ്വാഭാവികമായും ഉയർന്നുവരുന്നു, ഉദാഹരണത്തിന്, ഡാറ്റാബേസിലേക്ക് അയയ്ക്കുന്നതിന് മുമ്പ്. മുകളിലെ ഉദാഹരണത്തിൽ, val പരാമീറ്ററിനൊപ്പം ഫോം ഫീൽഡിനുള്ള നെയിം ആട്രിബ്യൂട്ട് വ്യക്തമാക്കുന്നതിലൂടെ ഈ പ്രശ്നം പരിഹരിക്കപ്പെടും. ഈ ഫോം ഡാറ്റ സമർപ്പിച്ചതിന് ശേഷം എന്നാണ് ഇതിനർത്ഥം പോസ്റ്റ് രീതി, ഈ ഫീൽഡുകളുടെ മൂല്യങ്ങൾ $_POST['val'] അറേയിൽ സ്ഥാപിക്കും, ഇവയിലൂടെ ആവർത്തിച്ചുള്ള ഘടകങ്ങൾ ഫോറെച്ച് ലൂപ്പ്(...) (...), ഉദാഹരണത്തിന്:

foreach ($_POST [ "val" ] $value ആയി ) ( // നിങ്ങളുടെ കോഡ്.... )

അല്ലെങ്കിൽ, ആവശ്യമെങ്കിൽ, ഇംപ്ലോഡ്() ഫംഗ്ഷൻ ഉപയോഗിച്ച് ഒരേ തരത്തിലുള്ള ഈ ഫീൽഡുകളിൽ നിന്നുള്ള എല്ലാ ഡാറ്റയും ഒരു വരിയിലേക്ക് "പശ" ചെയ്യുക:

$str = ഇംപ്ലോഡ് ("|" , $_POST [ "val" ] );

അപ്പോൾ പേര്=”val” ഉള്ള എല്ലാ ഫീൽഡ് മൂല്യങ്ങളും ഒരു “വെർട്ടിക്കൽ ബാർ” ഡിലിമിറ്റർ ഉള്ള ഒരു സ്ട്രിംഗായി സംയോജിപ്പിക്കും.

എന്നാൽ ഇത് സെർവർ-സൈഡ് പ്രോസസ്സിംഗ് ആണ്, ഇത് സുരക്ഷാ കാരണങ്ങളാൽ കൂടുതൽ അഭികാമ്യമാണ്. പക്ഷേ, ക്ലയൻ്റ് വശത്ത് അത്തരം ഫീൽഡുകൾ പ്രോസസ്സ് ചെയ്യാൻ നിങ്ങളെ നിർബന്ധിക്കുന്ന സാഹചര്യങ്ങൾ ഉണ്ടാകാം: ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് സെർവർ സ്ക്രിപ്റ്റുകളിലേക്ക് ആക്സസ് ഇല്ല (നിങ്ങൾ ഒരുതരം റിമോട്ട് ഫോം ഹാൻഡ്‌ലർ ഉപയോഗിക്കുന്നു), അല്ലെങ്കിൽ ചില കാരണങ്ങളാൽ നിങ്ങൾക്ക് ഇതിൻ്റെ പ്രവർത്തനം മാറ്റാൻ കഴിയില്ല. നിങ്ങളുടെ സെർവറിലെ ഫോം ഹാൻഡ്‌ലർ. ഈ സാഹചര്യത്തിൽ, നിങ്ങൾക്ക് മാർഗ്ഗങ്ങളും ഉപയോഗിക്കാം ജാവാസ്ക്രിപ്റ്റ് ഭാഷ, ഞങ്ങൾ ഇതിനകം ജോലി ചെയ്യുന്നതിനാൽ jQuery ലൈബ്രറി- അപ്പോൾ ഞങ്ങൾ അതിൽ പ്രവർത്തിക്കുന്നത് തുടരും.

ക്ലയൻ്റ് ഭാഗത്ത് ഡാറ്റ പ്രോസസ്സിംഗ്.

ഈ ഒന്നിലധികം ഫീൽഡിൻ്റെ എല്ലാ ഡാറ്റയും ഒരു ലംബ ബാർ "|" കൊണ്ട് വേർതിരിച്ച ഒരു വരിയിലേക്ക് സംയോജിപ്പിക്കുക എന്നതാണ് ഞങ്ങളുടെ ചുമതലയെന്ന് പറയാം. വാസ്തവത്തിൽ, ഇത് വളരെ ലളിതമായി നടപ്പിലാക്കുന്നു.

ആദ്യം, നമുക്ക് ഫോം തന്നെ ചെറുതായി പരിഷ്കരിക്കേണ്ടതുണ്ട്, അതായത് ഒരു മറഞ്ഞിരിക്കുന്ന ഫീൽഡ് ചേർക്കുക: