ஜாவாஸ்கிரிப்ட் படிவங்களில் பல தேர்வுகளைக் கையாளுதல்
JavaScript இல் படிவங்களுடன் பணிபுரிவது ஒரு பொதுவான பணியாகும், குறிப்பாக சேவையகத்திற்குச் சமர்ப்பிக்க வேண்டிய பயனர் உள்ளீட்டைக் கையாளும் போது. கையாளும் போது ஒரு பொதுவான சவால் எழுகிறது பல தேர்வுகள் "பல தேர்ந்தெடு" கீழ்தோன்றலைப் பயன்படுத்துவது போன்ற படிவங்களில். அடிப்படை படிவ கையாளுதல் முறைகள் தேர்ந்தெடுக்கப்பட்ட அனைத்து விருப்பங்களையும் பிடிக்காமல் போகலாம், இது கடைசியாக தேர்ந்தெடுக்கப்பட்ட விருப்பம் மட்டுமே திரும்பும்.
இந்த கட்டுரையில், தேர்ந்தெடுக்கப்பட்ட அனைத்து விருப்பங்களையும் ஒரு நடைமுறை அணுகுமுறையை ஆராய்வோம் பல-தேர்வு கீழ்தோன்றும் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி கைப்பற்றப்பட்டு சரியாகச் சமர்ப்பிக்கப்படுகின்றன. பல தேர்வுகளை திறம்பட கையாளும் படிவத்தை மாற்றியமைக்க தேவையான மாற்றங்களை நாங்கள் மேற்கொள்வோம். இந்த அணுகுமுறையானது, PHP API க்கு செயலாக்கத் தரவை தடையின்றிச் சமர்ப்பிக்க முடியும் என்பதையும் உறுதி செய்கிறது.
எங்கள் ஆரம்ப தீர்வு ஒற்றைத் தேர்வுகளுக்கு நன்றாக வேலை செய்கிறது, ஆனால் பல தேர்வுப் புலத்திற்கு மாறும்போது, எங்கள் ஜாவாஸ்கிரிப்ட் தர்க்கத்தைப் புதுப்பிப்பது முக்கியம். சரியான மாற்றங்கள் இல்லாமல், படிவம் கடைசியாக தேர்ந்தெடுக்கப்பட்ட விருப்பத்தை மட்டுமே வழங்கும், இது விரும்பிய நடத்தை அல்ல. இதை சரிசெய்வது, படிவத் தரவை எவ்வாறு சேகரிக்கிறோம் மற்றும் செயலாக்குகிறோம் என்பதை மாற்றியமைப்பதை உள்ளடக்குகிறது.
இந்த வழிகாட்டியின் முடிவில், உங்கள் படிவத்தையும் ஜாவாஸ்கிரிப்ட்டையும் எவ்வாறு மேம்படுத்துவது என்பதை நீங்கள் சரியாக அறிந்துகொள்வீர்கள் பல தேர்ந்தெடுக்கப்பட்ட மதிப்புகள் திறமையாக. தேர்ந்தெடுக்கப்பட்ட அனைத்து விருப்பங்களும் கைப்பற்றப்பட்டு உங்கள் பின்தளத்தில் சரியாக அனுப்பப்படுவதை நீங்கள் உறுதிசெய்ய முடியும்.
| கட்டளை | பயன்பாட்டின் உதாரணம் |
|---|---|
| FormData() | இந்த கன்ஸ்ட்ரக்டர் ஒரு புதிய FormData ஆப்ஜெக்ட்டை உருவாக்குகிறது, இது படிவ தரவு கூறுகளைப் பிடிக்கிறது. ஒவ்வொரு உள்ளீட்டு புலத்திலும் கைமுறையாக மீண்டும் செய்யாமல், கோப்பு பதிவேற்றங்கள் உட்பட படிவ உள்ளீடுகளை எளிதாக சேகரிக்க இது பயன்படுகிறது. |
| getElementsByName() | HTML உறுப்புகளை ஒரு குறிப்பிட்ட உடன் மீட்டெடுக்கிறது பெயர் பண்பு. ஸ்கிரிப்ட்டில், இது குறிவைக்க பயன்படுத்தப்படுகிறது பல-தேர்வு தேர்ந்தெடுக்கப்பட்ட அனைத்து விருப்பங்களையும் பிடிக்க உறுப்பு. |
| options[] | தேர்ந்தெடுக்கப்பட்ட உறுப்புக்கான தனிப்பட்ட விருப்பங்களை அணுகுகிறது. இந்த வரிசை போன்ற சேகரிப்பு, தேர்ந்தெடுக்கப்பட்ட விருப்பங்களைச் சரிபார்க்க மறு செய்கையை அனுமதிக்கிறது, இது பல தேர்வுகளைக் கையாள்வதில் முக்கியமானது. |
| selected | ஒரு குறிப்பிட்ட விருப்பம் தேர்ந்தெடுக்கப்பட்டதா என்பதைத் தீர்மானிக்க ஒரு சுழற்சியில் பயன்படுத்தப்படுகிறது. இது பல தேர்ந்தெடுக்கப்பட்ட கீழ்தோன்றலில் தேர்ந்தெடுக்கப்படாத விருப்பங்களை வடிகட்ட உதவுகிறது. |
| set() | செட்() முறையானது FormData ஆப்ஜெக்ட்டைப் புதுப்பிக்க அல்லது ஒரு விசை-மதிப்பு ஜோடியைச் சேர்க்க அழைக்கப்படுகிறது, அது அனுப்பும் முன் படிவத் தரவில் பல தேர்ந்தெடுக்கப்பட்ட கீழ்தோன்றலில் இருந்து தேர்ந்தெடுக்கப்பட்ட அனைத்து மதிப்புகளையும் சேர்ப்பது போன்றது. |
| URLSearchParams() | இது ஒரு வலை API ஆகும், இது படிவத் தரவை வினவல் சரமாக வரிசைப்படுத்துகிறது. இது FormData பொருளை HTTP கோரிக்கைகளுக்கு ஏற்ற சர வடிவமாக மாற்ற இங்கே பயன்படுத்தப்படுகிறது. |
| XMLHttpRequest() | HTTP கோரிக்கைகளை அனுப்புவதற்கு பரவலாகப் பயன்படுத்தப்படும் API. முன்-இறுதியில் இருந்து ஒரு சேவையகத்திற்கு ஒத்திசைவற்ற தரவு சமர்ப்பிப்பைச் செய்ய இது பயன்படுத்தப்படுகிறது, இது பக்கம் பதிலளிக்கக்கூடியதாக இருக்க அனுமதிக்கிறது. |
| fetch() | XMLHttpRequest(), fetch() க்கு ஒரு நவீன மாற்றானது HTTP கோரிக்கைகளை மிகவும் உள்ளுணர்வாகவும், வாக்குறுதி அடிப்படையிலான தொடரியல் மூலம் உருவாக்கவும் பயன்படுத்தப்படுகிறது. இது நெட்வொர்க் கோரிக்கைகளை தூய்மையான மற்றும் சுருக்கமான கையாளுதலை வழங்குகிறது. |
| $.ajax() | ஒத்திசைவற்ற HTTP கோரிக்கைகளை எளிதாக்கும் jQuery கட்டளை. இது சிக்கலான உள்ளமைவுகளை ஆதரிக்கிறது மற்றும் பல தேர்வுகளை கையாளவும் அவற்றை சர்வரில் சமர்ப்பிக்கவும் பயன்படுகிறது. |
ஜாவாஸ்கிரிப்ட் படிவங்களில் பல தேர்வுகளை எவ்வாறு கையாள்வது என்பதைப் புரிந்துகொள்வது
மேலே வழங்கப்பட்டுள்ள ஸ்கிரிப்ட்கள் வலை உருவாக்கத்தில் உள்ள பொதுவான சிக்கலைத் தீர்ப்பதை நோக்கமாகக் கொண்டுள்ளன: JavaScript ஐப் பயன்படுத்தி ஒரு படிவத்திலிருந்து ஒரு சேவையகத்திற்கு பல தேர்ந்தெடுக்கப்பட்ட விருப்பங்களைச் சமர்ப்பித்தல். அசல் அமைப்பில், ஒரு படிவத்தில் ஒற்றை தேர்வு கீழ்தோன்றும் உள்ளது. இருப்பினும், ஒரு க்கு மாறும்போது பல-தேர்வு கீழ்தோன்றும், கடைசியாக தேர்ந்தெடுக்கப்பட்ட விருப்பம் மட்டுமே சமர்ப்பிக்கப்பட்டது. இதைத் தீர்க்க, HTTP கோரிக்கை மூலம் சேவையகத்திற்கு அனுப்பும் முன், தேர்ந்தெடுக்கப்பட்ட அனைத்து விருப்பங்களையும் சேகரிக்க JavaScript குறியீட்டை மாற்றியமைக்கிறோம்.
முதல் தீர்வு, தி FormData ஆப்ஜெக்ட் படிவ உறுப்புகளைப் பிடிக்கப் பயன்படுகிறது, ஆனால் அது பல தேர்ந்தெடுக்கப்பட்ட கீழ்தோன்றும்களை வரிசைகளாகக் கருதுவதால், நாம் விருப்பங்களை கைமுறையாக மீண்டும் செய்ய வேண்டும். லூப் கீழ்தோன்றும் ஒவ்வொரு விருப்பத்தையும் சரிபார்த்து, தேர்ந்தெடுக்கப்பட்டவற்றை ஒரு வரிசைக்கு தள்ளும். இந்த வரிசை பின்னர் சர்வருக்கு அனுப்பப்படும் சர வடிவமைப்பில் இணைக்கப்பட்டுள்ளது. பயன்பாடு XMLHttpRequest பக்கத்தைப் புதுப்பிக்காமல், தரவு ஒத்திசைவற்ற முறையில் அனுப்பப்படுவதை உறுதி செய்கிறது. இந்த முறை பரவலாக ஆதரிக்கப்படுகிறது, இருப்பினும் இன்னும் நவீன அணுகுமுறைகள் உள்ளன.
இரண்டாவது தீர்வு, அதே சிக்கலை எவ்வாறு கையாள்வது என்பதை நிரூபிக்கிறது API ஐப் பெறவும். XMLHttpRequest ஐ விட Fetch ஒரு தூய்மையான மற்றும் உறுதிமொழி அடிப்படையிலான அணுகுமுறையை வழங்குகிறது, இது ஒத்திசைவற்ற செயல்பாடுகளைக் கையாளுவதை எளிதாக்குகிறது. முதல் எடுத்துக்காட்டில் உள்ளதைப் போலவே, தேர்ந்தெடுக்கப்பட்ட விருப்பங்கள் ஒரு வரிசையாக சேகரிக்கப்பட்டு ஒரு சரமாக மாற்றப்படும். தி எடுக்க முறை இந்த தரவை PHP பின்தளத்திற்கு அனுப்புகிறது. இந்த அணுகுமுறை அதன் நெகிழ்வுத்தன்மை மற்றும் அதிக உள்ளுணர்வு தொடரியல் காரணமாக நவீன வலை பயன்பாடுகளில் மிகவும் திறமையானது மற்றும் பரவலாக ஏற்றுக்கொள்ளப்படுகிறது.
மூன்றாவது தீர்வு jQuery ஐப் பயன்படுத்துகிறது, இது ஒரு பிரபலமான ஜாவாஸ்கிரிப்ட் நூலகமாகும், இது பல DOM கையாளுதல்கள் மற்றும் அஜாக்ஸ் செயல்பாடுகளை எளிதாக்குகிறது. இங்கே, தேர்ந்தெடுக்கப்பட்ட விருப்பங்கள் ஐப் பயன்படுத்தி கைப்பற்றப்படுகின்றன .val() முறை, தேர்ந்தெடுக்கப்பட்ட மதிப்புகளை வரிசை வடிவில் நேரடியாக வழங்கும். வரிசை பின்னர் அனுப்பப்படுகிறது $.ajax(), jQuery இல் HTTP கோரிக்கைகளைச் செய்வதற்கான எளிமையான வழி. இந்த அணுகுமுறைக்கு முந்தைய எடுத்துக்காட்டுகளை விட குறைவான கையேடு குறியீடு தேவைப்படுகிறது, இது jQuery ஏற்கனவே உங்கள் திட்டத்தில் சேர்க்கப்படும்போது விரைவான தீர்வாக இருக்கும்.
PHP படிவத்தை சமர்ப்பிப்பதற்காக ஜாவாஸ்கிரிப்டில் பல தேர்வுகளைக் கையாளுதல்
PHP பின்தளத்தில் தேர்ந்தெடுக்கப்பட்ட பல மதிப்புகளைக் கொண்ட படிவத்தைச் சமர்ப்பிப்பதற்கான XMLHttpRequest உடன் JavaScript.
function submitForm() {var formData = new FormData(document.forms["rform"]);var selectedOptions = [];var selectElement = document.getElementsByName("inputa[]")[0];for (var i = 0; i < selectElement.options.length; i++) {if (selectElement.options[i].selected) {selectedOptions.push(selectElement.options[i].value);}}formData.set('inputa', selectedOptions.join(','));var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {alert("Submitted");}};xhttp.open("POST", "test2.php", true);xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xhttp.send(new URLSearchParams(formData).toString());}
மேம்படுத்தப்பட்ட செயல்திறனுக்காக Fetch API ஐப் பயன்படுத்தி பல தேர்வுகளைக் கையாளுதல்
PHP பின்தளத்தில் தேர்ந்தெடுக்கப்பட்ட பல விருப்பங்களைக் கொண்ட படிவத்தைச் சமர்ப்பிக்க, Fetch API உடன் JavaScript.
function submitForm() {var formData = new FormData(document.forms["rform"]);var selectedOptions = [];var selectElement = document.getElementsByName("inputa[]")[0];for (var i = 0; i < selectElement.options.length; i++) {if (selectElement.options[i].selected) {selectedOptions.push(selectElement.options[i].value);}}formData.set('inputa', selectedOptions.join(','));fetch('test2.php', {method: 'POST',headers: {'Content-Type': 'application/x-www-form-urlencoded'},body: new URLSearchParams(formData).toString()}).then(response => response.text()).then(result => alert("Submitted")).catch(error => console.error('Error:', error));}
எளிமைப்படுத்தப்பட்ட தொடரியல் jQuery மூலம் பல தேர்வுகளைக் கையாளுதல்
PHPக்கு தேர்ந்தெடுக்கப்பட்ட பல விருப்பங்களைச் சேகரித்து சமர்ப்பிக்க jQuery ஐப் பயன்படுத்துகிறது.
$('#submitBtn').on('click', function(e) {e.preventDefault();var selectedOptions = $('#inputa').val();$.ajax({type: 'POST',url: 'test2.php',data: { 'inputa': selectedOptions },success: function(response) {alert("Submitted");},error: function() {alert("Error occurred");}});});
பல தேர்வுகளுக்கு ஜாவாஸ்கிரிப்ட் மூலம் படிவத் தரவு கையாளுதலை மேம்படுத்துதல்
படிவங்களுடன் பணிபுரியும் போது, கீழ்தோன்றும் பல தேர்வுகளைக் கையாள்வது பல டெவலப்பர்கள் எதிர்கொள்ளும் சவாலாகும். இயல்பாக, HTML படிவங்கள் a இல் கடைசியாக தேர்ந்தெடுக்கப்பட்ட மதிப்பை மட்டுமே பிடிக்கும் பல-தேர்வு கீழ்தோன்றும், இது முழுமையற்ற தரவு சமர்ப்பிக்கப்படுவதற்கு வழிவகுக்கும். தேர்ந்தெடுக்கப்பட்ட அனைத்து விருப்பங்களும் கைப்பற்றப்படுவதை உறுதிசெய்ய, பின்தளத்திற்கு அனுப்பும் முன் படிவத் தரவைச் செயலாக்கும் முறையைப் புதுப்பிப்பது முக்கியம்.
மிகவும் பயனுள்ள முறைகளில் ஒன்று பயன்படுத்துகிறது FormData API, தேர்ந்தெடுக்கப்பட்ட விருப்பங்களை மீண்டும் செய்யும் JavaScript இன் திறனுடன் இணைந்து. இந்த செயல்முறையானது, தேர்ந்தெடுக்கப்பட்ட அனைத்து மதிப்புகளும் கைப்பற்றப்பட்டு, சேவையகத்திற்கு அனுப்பப்பட்ட தரவில் சேர்க்கப்படுவதை உறுதி செய்கிறது. அமைப்பைப் பொறுத்து, பயன்படுத்துதல் போன்ற தரவு வரிசைப்படுத்தலையும் நீங்கள் கையாள வேண்டியிருக்கும் URLSearchParams, பின்தள அமைப்புகளால் எளிதாகப் பாகுபடுத்தக்கூடிய வடிவத்தில் படிவத் தரவைத் தயாரிக்க.
கருத்தில் கொள்ள வேண்டிய மற்றொரு முக்கியமான அம்சம் பாதுகாப்பு மற்றும் செயல்திறன். படிவத் தரவைக் கையாள்வது நேரடியானதாக இருந்தாலும், ஊசி தாக்குதல்கள் போன்ற பாதிப்புகளைத் தவிர்க்க, முகப்பு மற்றும் பின்தளத்தில் உள்ளீட்டைச் சரிபார்ப்பது மிகவும் முக்கியமானது. கூடுதலாக, போன்ற நவீன APIகளைப் பயன்படுத்துதல் API ஐப் பெறவும் சிறந்த செயல்திறனை உறுதிசெய்து மேலும் நெகிழ்வான பிழை கையாளுதலை அனுமதிக்கிறது, படிவத் தரவைச் சமர்ப்பிக்கும் செயல்முறையை மென்மையாகவும் பாதுகாப்பாகவும் செய்கிறது.
படிவங்களில் பல தேர்வுகளைக் கையாள்வது பற்றிய பொதுவான கேள்விகள்
- JavaScript இல் தேர்ந்தெடுக்கப்பட்ட பல விருப்பங்களை எவ்வாறு மீட்டெடுப்பது?
- நீங்கள் பயன்படுத்தலாம் getElementsByName() தேர்ந்தெடுக்கப்பட்ட உறுப்பு மற்றும் அதன் மூலம் லூப் பெறுவதற்கான முறை options தேர்ந்தெடுக்கப்பட்ட மதிப்புகளை மீட்டெடுக்க.
- JavaScript மூலம் பல தேர்வுகளைச் சமர்ப்பிக்க சிறந்த வழி எது?
- பயன்படுத்தி FormData object, நீங்கள் படிவ உள்ளீடுகளைச் சேகரிக்கலாம் மற்றும் பல தேர்வுகளை கைமுறையாகச் செயல்படுத்தலாம்.
- படிவத்தைச் சமர்ப்பிப்பதற்கு Fetch API ஐப் பயன்படுத்தலாமா?
- ஆம், தி Fetch API சுத்தமான தொடரியல் மற்றும் சிறந்த பிழை கையாளுதலுடன் படிவத் தரவு உட்பட HTTP கோரிக்கைகளை அனுப்ப நவீன வழியை வழங்குகிறது.
- Fetch API மற்றும் XMLHttpRequest ஆகியவற்றுக்கு என்ன வித்தியாசம்?
- இருவரும் HTTP கோரிக்கைகளை அனுப்ப முடியும், Fetch API மிகவும் நவீனமானது, சிறந்த ஒத்திசைவற்ற கையாளுதலுக்கான வாக்குறுதிகளைப் பயன்படுத்துகிறது XMLHttpRequest அழைப்புகளைப் பயன்படுத்துகிறது.
- படிவத்தைச் சமர்ப்பிக்கும் போது ஏற்படும் பிழைகளை எவ்வாறு கையாள்வது?
- இதில் பிழை கையாளும் தர்க்கத்தை நீங்கள் சேர்க்கலாம் fetch() அல்லது XMLHttpRequest() படிவத்தை சமர்ப்பிக்கும் செயல்முறையின் போது எழும் சிக்கல்களைப் பிடிக்க மற்றும் பதிலளிக்கும் முறைகள்.
பல படிவத் தேர்வுகளைக் கையாள்வதற்கான முக்கிய குறிப்புகள்
JavaScript படிவங்களில் தேர்ந்தெடுக்கப்பட்ட பல விருப்பங்களைக் கையாள, படிவத் தரவு எவ்வாறு செயலாக்கப்படுகிறது என்பதை மாற்றியமைக்க வேண்டும். தேர்ந்தெடுக்கப்பட்ட விருப்பங்கள் மூலம் லூப் செய்து ஒவ்வொரு மதிப்பையும் கைப்பற்றுவதன் மூலம், படிவத்தை சமர்ப்பிக்கும் போது அனைத்து தேர்வுகளும் சேர்க்கப்பட்டுள்ளன என்பதை உறுதிப்படுத்திக் கொள்ளலாம்.
பயன்படுத்தினாலும் API ஐப் பெறவும், XMLHttpRequest, அல்லது jQuery, ஒவ்வொரு முறையும் PHP பின்தளத்தில் திறமையான மற்றும் பாதுகாப்பான படிவத்தை சமர்ப்பிக்க அனுமதிக்கிறது. சரியான அணுகுமுறையைத் தேர்ந்தெடுப்பது உங்கள் குறிப்பிட்ட திட்டத் தேவைகள் மற்றும் உங்களிடம் ஏற்கனவே உள்ள கருவிகளைப் பொறுத்தது.
ஜாவாஸ்கிரிப்ட் படிவங்களில் குறிப்புகள் மற்றும் கூடுதல் வாசிப்பு
- போன்ற முறைகள் உட்பட, JavaScript படிவங்களில் தேர்ந்தெடுக்கப்பட்ட பல விருப்பங்களைக் கையாள்வதற்கான விளக்கம் FormData மற்றும் API ஐப் பெறவும். இங்கு கிடைக்கும்: MDN Web Docs: FormData
- பயன்படுத்துவதற்கான விரிவான வழிகாட்டி XMLHttpRequest JavaScript இல் ஒத்திசைவற்ற முறையில் தரவை அனுப்ப: MDN Web Docs: XMLHttpRequest
- பயன்படுத்துவதற்கான விரிவான பயிற்சி API ஐப் பெறவும் நெட்வொர்க் கோரிக்கைகளை கையாள: MDN Web Docs: Fetch API
- படிவங்களை சமர்ப்பிப்பதற்கான jQuery ஆவணங்கள் $.ajax(): jQuery: $.ajax()