Showing posts with label Jsvascript. Show all posts
Showing posts with label Jsvascript. Show all posts

Monday, March 2, 2015

জাভাস্ক্রিপ্ট দিয়ে কিভাবে ডিফল্ট অ্যাপয়েন্টমেন্ট ডেট দেখাবেন ইন্ডিয়ানভিসা-বাংলাদেশ ওয়েবসাইটে

আপনাদের সবাইকে শুভকামনা জানাই, আজ আমি আপনাদের দেখাব আপনারা কিভাবে রিপ্রিন্ট বাটনকে হাইড করে গেট অ্যাপয়েন্টমেন্ট বাঁটনকে বাই ডিফল্ট শো করাবেন। কোন কোন সময় গেট আয়পয়েন্টমেন্ট বাঁটনকে আমরা দেখতে পাইনা। এই ধরনের সমস্যা দূর করার করার জন্যই আমার এই প্রয়াস।

জাভাস্ক্রিপ্ট একটু গভীরে

সর্বপ্রথমে আপনি আপনার ডিফল্ট ব্রাউজারটি খুলুন।
এরপর ইন্ডিয়ানভিসা-বাংলাদেশ ওয়েবসাইটে গিয়ে “Print Registered Application” লিঙ্ক-এ ক্লিক করুন।
ব্রাউজারে ডকুমেন্ট যখন পুরোপুরি লোড হয়ে যাবে তখন ওয়েব পেজটির উপর মাউসের রাইট ক্লিক করে কন্টেক্সট মেনু থেকে ইন্সপেক্ট এলিমেন্টে ক্লিক করুন যেমনটি নিচের প্রদর্শিত চিত্রে দেখানো হয়েছে।
ইন্সপেক্ট এলিমেন্ট টুলসটি খুলে গেলে, আপনি টুলস্টির একদম উপরের বাদিকের কোনায় একটি সার্চ বাটন দেখতে পাবেন, ওইটাতে ক্লিক করুন।
এরপর আপনি ওয়েবপেজ থেকে যে রিপ্রিন্ট বাটনটি আছে সেটাতে ক্লিক করুন, এলিমেন্টস প্যানেলে আপনি তাহলে নিচের মত একটা ফলাফল দেখতে পাবেন।
<input name="Reprint" type="button" class="btn btn-primary" onclick="chkCapRep()" value="Reprint">
আপনি এই কোডটি যদি একটু মনোযোগ দিয়ে লক্ষ্য করেন তাহলে এই এলিমেন্টটিতে কোন স্টাইল অ্যাট্রিবিউট দেখতে পাবেন না, কিন্তু আপনি যদি পরের ইনপুট ট্যাগের দিকে দৃষ্টিপাত করেন তাহলে আপনি স্টাইল অ্যাট্রিবিউট দেখতে পাবেন এরকমঃ
<input name="Appointment" type="button" onclick="chkCapAppt()" style="display:none " class="btn btn-primary" id="Appointment" value="Get Appointment">
style="display:none "
এখন যদি আমরা none লেখাটিকে block দিয়ে পরিবর্তিত করি তাহলে আমরা গেট অ্যাপয়েন্টমেন্ট বাঁটনকে দেখতে পাব।
এখন আমরা জাভাস্ক্রিপ্ট কোড দিয়ে রিপ্রিন্ট বাঁটনকে উঠিয়ে দিয়ে গেট অ্যাপয়েন্টমেন্ট বাঁটনকে আনব।

জাভাস্ক্রিপ্ট কোড

ইন্সপেক্ট এলিমেন্ট এর কনসোল ট্যাব এ গিয়ে নিচের কোডগুলি কপি করে পেস্ট করে দিন, এরপর কী-বোর্ড থেকে এন্টার কী চাপুনঃ
OnlineForm.Reprint.style.display = 'none';
OnlineForm.Appointment.style.display = 'block';
আমাদের জাভাস্ক্রিপ্ট টিউটোরিয়াল এখানেই শেষ, আশা করি আপনি ভাল থাকবেন এবং সবাইকে ভাল রাখবেন।আমাদের নিচের ভিডিওটি পারলে একবার দেখে নিতে পারেন এই টিউটোরিয়ালকে আরও ভিসুয়ালি বোঝার জন্য।

ভিডিও টিউটোরিয়াল


ডাউনলোড

আপনি আমাদের Fresh Tech Bloggers ওয়েবসাইটে গিয়ে সোর্স কোডটি ডাউনলোড করে নিতে পারেন। আমাদের পরবর্তী টিউটোরিয়াল এ আপনাকে শেখাব যে আপনি কিভাবে ভিসা তথ্য অনলাইন ইন্ডিয়ান ভিসা সরকার ওয়েব সাইটে অনায়াসেই পুরণ করতে পারবেন।
Posted by at 1 comment:
Labels: , ,

Sunday, March 1, 2015

অনলাইনে Indindianvisa-bangladesh website এ ক্যাপচা কোড পুনরায় রিলোড করুন সহজ উপায়ে

আজকে আমি এমন একটা জাফাস্ক্রিপ্ট ফাংশন তৈরী করতে যাচ্ছি যাতে এক্সেস কোড ইনপুট বক্সে ক্লিক করলেই ক্যাপচা কোডটি পুনরায় রিলোড হয়। ট্যাব প্রেস করেও এক্সেক কোড বক্সে ফোকাস করে এই ফাংশনকে কাজ কাজ করানো যাবে। আমরা যখন পুরনো ওয়েসবসাইটে কাজ করতাম তখন কিন্তু আমাদের ক্যাপচা কোড রিলোড করার মত তেমন কোন পদ্ধতি ছিল না, যার ফলে আমাদের ভীষণ খাটতে হত অর্থাৎ নতুন করে পেজটি রিলোড করে আবার সমস্ত ভিসা তথ্য দিয়ে ফর্ম ফিলাপ করতে হত। তাছাড়া রিপ্রিন্ট পেজটাকে যখন আমরা বেশ কিছুক্ষণ ধরে রেখে দিতাম সাবমিট না করে, তাহলে কেপচা কোড লিখে সাবমিট করলেই এক্সেস কোড ভুল দেখাত, ফলে আমাদের সব কাজ ভন্ডুল হয়ে যেত ওই একটিমাত্র কারনে। চলুন শুরু করা যাক আমাদের এই ক্যাপচা কোড রিলোড করার জাভাস্ক্রিপ্ট কেরামতি।

জাভাস্ক্রিপ্টের একটু গভীরে

আপনি এখন আপনার ডিফল্ট ব্রাউজারটি ওপেন করুন।
এরপর, ইন্ডিয়ান-বাংলাদেশ ভিসার অফিশিয়াল ওয়েবসাইটে গিয়ে “প্রিন্ট রেজিস্টারড অ্যাপ্লিকেশন” লিঙ্কে ক্লিক করুন।
যখন পেজটি সম্পূর্ণভাবে ব্রাউজারে লোড হবে, তখন আপনি CTRL+U বা মাউসের রাইট ক্লিক করে “ভিউ পেজ সোর্স”-এ ক্লিক করতে পারেন। আপনি এখন একটা সোর্স কোড এর পেজ দেখতে পাচ্ছেন, আপনি যদি এই সোর্স কোডের একেবারে উপরের দিকে লক্ষ্য করেন তাহলে আপনি refreshCaptcha ফাংশান দেখতে পাবেন নিচে প্রদর্শিত চিত্রের মত।

আমাদের শুধুমাত্র refreshCaptcha  কপি করতে হবে, কোড পরীক্ষা করার প্রয়োজন হবে না। এখন সোর্স পেজটিকে বন্ধ করে দিয়ে Reprint.jsp পেজ এ ফিরে যান, এরপর ওয়েব পেজ এর উপর মাউসের রাইট ক্লিক করুন এবং কনটেক্সট মেনু থেকে ইন্সপেক্ট এলিমেন্ট অপশনে ক্লিক করুন। স্বাভাবিকভাবে আমরা জেভাবে কন্সোল ট্যাবে যাই সেভাবেই কন্সোলে ট্যাব এ ক্লিক করুন।
প্রথমে আমাদের ফর্ম এর নাম কি জানা প্রয়োজন, সুতরাং, নিচের কোডটি টাইপ করে এন্টার কী প্রেস করুন:
document.forms[0]
ব্রাউজারের কন্সোল প্যানেলে এই রেজাল্ট দেখতে পাবেনঃ
<body onpest="return false;" oncopy="return false;" oncut="return false;">...</body>
আপনি কনসোল প্যানেলের কোডটি থেকে বুঝতেই পারছেন যে ফর্মটির নাম OnlineForm । আমাদের এখন এক্সেস কোড ইনপুট বক্সটির নাম জানা প্রয়োজন,  তাহলে আমরা যদি নিচের কোডটি টাইপ করে এন্টার বাটনে চাপ দিই তাহলে যতগুলি HTML ইনপুট এলিমেন্ট আছে আমাদের কনসোল প্যানেলে সেগুলি শো করবেঃ
OnlineForm.getElementsByTagName('input');
রেজাল্টঃ
[
<input name="fileno" type="text" class="textBoxDashed" id="fileno" value="" size="20" maxlength="12" title="Please Enter your Application Id" onkeyup="chkAlphaNum(this)" onblur="trim1(this)" isdatepicker="true">
<input name="birthdate" type="text" value="" title="Please Enter you Date of Birth As in Passport" class="textBoxDashed" id="birthdate" datepicker="true" datepicker_max="01/03/2015" size="20" maxlength="10" datepicker_format="DD/MM/YYYY" isdatepicker="true">
<input name="passport_no" type="text" title="Please Enter you Passport No. As in Passport" class="textBoxDashed" id="passport_no" value="" size="20" maxlength="14" onkeyup="chkAlphaNum(this)" onblur="trim1(this);" isdatepicker="true">
<input name="ImgNum" type="text" class="textBoxDashed1" id="ImgNum" onkeyup="chkAlphaNum(this)" size="20" maxlength="6" isdatepicker="true">
<input name="Reprint" type="button" class="btn btn-primary" onclick="chkCapRep()" value="Reprint">
<input name="Appointment" type="button" onclick="chkCapAppt()" class="btn btn-primary" id="Appointment" value="Get Appointment">
<input type="hidden" name="Date" value="01/03/2015">]
যে ফলাফল গুলি কনসোল প্যানেলে দেখায় সেগুলোর একেকটায় আপনি মাউসের দ্বারা ক্লিক করবেন, তাহলে রিপ্রিন্ট পেজের একেকটা ইনপুট ফিল্ড হাইলাইট হয়ে যাবে।আমাদের শুধু এক্সেস কোড এর টেক্সট ইনপুট ফিল্ডের নাম টা জানা জরুরি, তাই আপনি যখন দেখবেন ওই ইনপুট ফিল্ডটা হাইলাইট হয়ে গেছে তখন আপনি কন্সোল প্যানেলের ওই ইনপুট এলেমেন্টের নেম অ্যাট্রিবিউটকেই নোট করে নেবেন, আপনি তাহলে এখন কি দেখতে পাচ্ছেন, ImgNum নিশ্চয়ই। ঠিকই ধরেছেন। আমাদের কনসোল প্যানেল যেহেতু কোডগুলির দ্বারা ভর্তি হয়ে গেছে তাই আমরা CTRL+L প্রেস করে ওইগুলোকে ক্লিয়ার করে নেব।

জাভাস্ক্রিপ্ট কোড

ImgNum.addEventListener('focus', function () {
    refreshCaptcha();
});
এখন আপনি নিচের কোডটি কপি করে কন্সোলে পেস্ট করে দিয়ে এন্টার প্রেস করুন। এরপর আপনি যখন ওই এক্সেস কোডের ইনপুট বক্সে ক্লিক করবেন অথবা ট্যাব প্রেস করে কারসারটিকে এক্সেস কোডের ইনপুট ফিল্ডে আনবেন তখন ক্যাপচা কোড রিলোড হচ্ছে দেখতে পাবেন।

ভিডিও টিউটোরিয়াল



ডাউনলোড

আপনি আমাদের Fresh Tech Bloggers ওয়েবসাইটে গিয়ে সোর্স কোডটি ডাউনলোড করে নিতে পারেন। আমাদের পরবর্তী টিউটোরিয়াল এ আপনাকে শেখাব যে আপনি কিভাবে ভিসা তথ্য অনলাইন ইন্ডিয়ান ভিসা ওয়েব সাইটে অনায়াসেই পুরণ করতে পারবেন।
Posted by at 1 comment:
Labels: , ,
Subscribe to: Posts (Atom)