ফর্ম জমা দেওয়ার জন্য একটি সাধারণ লিঙ্ক ব্যবহার করুন


130

আমি একটি ফর্ম জমা দিতে চাই। তবে আমি জমা টাইপের সাথে একটি ইনপুট বোতামটি ব্যবহার করার প্রাথমিক পদ্ধতিতে যাচ্ছি না তবে একটি লিঙ্ক।

নীচের চিত্রটি কেন দেখায়। আমি ফর্মটি সংরক্ষণ / জমা দিতে চিত্রের লিঙ্কগুলি ব্যবহার করছি। কারণ আমার কাছে ইমেজ লিঙ্কগুলির জন্য স্ট্যান্ডার্ট সিএসএস মার্কআপ আছে আমি ইনপুট জমা বোতাম ব্যবহার করতে চাই না।

আমি উপাদানটিতে অনক্লিক = "ডকুমেন্ট.ফর্মনেম.সমনমিট ()" প্রয়োগ করার চেষ্টা করেছি তবে আমি এইচটিএমএল পদ্ধতিটি পছন্দ করব।

বিকল্প পাঠ

কোন ধারনা?


3
চিত্রটি প্রদর্শন করতে বা জাভাস্ক্রিপ্ট ব্যবহার করতে এটি বোতাম এবং সিএসএস ব্যবহার করুন, জাভাস্ক্রিপ্ট ব্যতীত ফর্ম জমা দেওয়ার সহজ হ্রেফ করার কোনও আসল উপায় নেই।
আন্তন এস

আমি দ্বিতীয় যে, দুর্ভাগ্যক্রমে এই সহজ উপায়
ডাব্লু

4
এটি করার আপনার কারণটি ভ্রান্ত অর্থনীতির মতো মনে হচ্ছে। জমা দেওয়ার বোতামগুলির জন্য কেবলমাত্র একটি স্ট্যান্ডার্ড সিএসএস নিয়ে আসা এবং ফর্মগুলি সেগুলি ব্যবহার করার জন্য ডিজাইন করা হয়েছিল সেভাবে ব্যবহার করা আরও ভাল। সেখানে বোতাম CSS কৌশল একটি গাদা এখানে বর্ণনা আছেন: tripwiremagazine.com/2009/06/...
dnagirl

উত্তর:


169

দুইটি রাস্তা. হয় একটি বোতাম তৈরি করুন এবং এটি স্টাইল করুন যাতে এটি CSS এর সাথে কোনও লিঙ্কের মতো দেখায়, বা একটি লিঙ্ক তৈরি করে ব্যবহার করে onclick="this.closest('form').submit();return false;"


55
: Aaaaaaaand এখানে একটি লিঙ্ক হিসাবে একটি বোতাম শৈলী কিভাবে জন্য একটি রেফারেন্স এর stackoverflow.com/questions/1367409/...
flipchart

3
নোট করুন যে form.submit()জাভাস্ক্রিপ্ট ছাড়া কাজ করবে না
ব্যাপটেক্স

3
@ ব্যাপটেক্স এমনকি পুরানো স্মার্ট ফোনগুলি জাভাস্ক্রিপ্ট সক্ষম করেছে
মাহদি জাজিনি

2
@ মাহদী জাজিনি প্রচুর লোক জাভাস্ক্রিপ্ট ডিফল্টরূপে অক্ষম করে যা কিছু ক্ষেত্রে অনুপ্রবেশকারী এবং কার্যকারিতা প্রভাবিত করতে পারে। যদি জাভাস্ক্রিপ্ট ব্যর্থ হয় তবে এটি পুরো ওয়েবসাইটটি ভেঙে ফেলতে পারে (যেমন স্থানীয় ফ্যালব্যাক ছাড়াই সিডিএন ব্যবহার করে এবং তৃতীয় পক্ষের ডোমেনটি অবরুদ্ধ থাকে)। যদি এইচটিএমএল ত্রুটি থাকে তবে আপনি এখনও ওয়েবসাইটটি ব্যবহার করতে পারেন। পরিবর্তে বিকাশকারীদের প্রগতিশীল বর্ধনের নীতি অনুসরণ করা উচিত।
5

3
আপনি যদি জাভাস্ক্রিপ্ট ছাড়াই ব্যবহারকারীদের সমর্থন করতে চান তবে এই উত্তরে বর্ণিত প্রথম বিকল্পটি করুন, লিঙ্কের মতো বোতামটি স্টাইল করুন। উদাহরণস্বরূপ input[type=submit].link { border: none; background: none; display: inline; color: blue; text-decoration: underline; }এবং<input type=submit class="link" />
জান Sverre

87

আমার জ্ঞানের সেরাটিতে কোনওরকম স্ক্রিপ্টিং ছাড়া আপনি সত্যই এটি করতে পারবেন না।

<form id="my_form">
<!-- Your Form -->    
<a href="javascript:{}" onclick="document.getElementById('my_form').submit(); return false;">submit</a>
</form>

এখান থেকে উদাহরণ ।


1
এবং প্রিয় দর্শনার্থী ... >>> আইডি = "আমার_ফর্ম" এটির আইডির নাম নয় সেট করতে ভুলবেন না: ডি
মাহদী জাজিনি

এটি সর্বোত্তম এবং স্পষ্ট উত্তর হওয়া উচিত, ধন্যবাদ!
ইয়াহানী

28

input type="submit"এই ধরণের স্টাইলিং আমার জন্য কাজ করেছে:

.link-button { 
     background: none;
     border: none;
     color: #0066ff;
     text-decoration: underline;
     cursor: pointer; 
}
<input type="submit" class="link-button" />

ক্রোম, IE 7-9, ফায়ারফক্সে পরীক্ষিত


কেবল রেকর্ডের জন্য: inputএইচটিএমএল উপাদানটির সাথে কোনও শ্রেণি সংযুক্ত না করে আপনার সিএসএস নির্বাচক ব্যবহার করে উপযুক্ত উপাদানটি নির্বাচন করা উচিত ।
এরিক কাপলুন

যদিও আপনার মন্তব্যটি পছন্দের উপায়, এটি সর্বদা সম্ভব নয়
সেরজ সাগান

কেন যে পছন্দসই উপায়?
চিহ্নিত করুন

এটি একটি অর্ধ-প্রতিষ্ঠিত কোডিং অনুশীলন, সাধারণত ক্লিনার এইচটিএমএলকে ছেড়ে যায় ... তবে এটি কোনও বিশাল চুক্তি নয়
সেরজ সাগান

1
এই উত্তরটি জাভাস্ক্রিপ্টের উপর নির্ভর করে না যা নিয়ে চিন্তা করা কম জিনিস
ম্যাথু লক

10

আপনি জমা দেওয়ার জন্য ছবি ব্যবহার করছেন .. যাতে আপনি কেবল একটি type="image"ইনপুট "বোতাম" ব্যবহার করতে পারেন :

<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" />

1
... বা এর <button>সাথে একটি <img/>উপাদান রয়েছে।
ড্যানমান

অন্য কেউ যদি কোনও উত্স চায় তবে এর জন্য এমডিএন লিঙ্কটি এখানে রয়েছে: developer.mozilla.org/en-US/docs/ ওয়েব
সাম

5

ব্যবহার করুন:

<input type="image" src=".."/>

বা:

<button type="send"><img src=".."/> + any html code</button>

প্লাস কিছু সিএসএস


0

অবশ্যই, একটি লিঙ্ক ( a) ট্যাগ সহ ফর্ম জমা দেওয়ার জন্য খাঁটি HTML সহ কোনও সমাধান নেই । মানক এইচটিএমএল কেবলমাত্র বোতাম বা চিত্র গ্রহণ করে। অন্য কিছু সহযোগী যেমন বলেছে, কেউ একটি বোতাম ব্যবহার করে কোনও লিঙ্কের উপস্থিতি অনুকরণ করতে পারে তবে আমার ধারণা এটি প্রশ্নের উদ্দেশ্য নয়।

আইএমএইচও, আমি বিশ্বাস করি যে প্রস্তাবিত এবং গৃহীত সমাধানগুলি কাজ করে না।

আমি এটি কোনও ফর্মটিতে পরীক্ষা করেছি এবং ব্রাউজারটি ফর্মটির রেফারেন্স খুঁজে পায় নি।

সুতরাং এটি জাভাস্ক্রিপ্টের একক লাইন ব্যবহার করে এটি সমাধান করা সম্ভব, thisঅবজেক্টটি ব্যবহার করে , যা ক্লিক করা উপাদানটির উল্লেখ করে, যা ফর্মের চাইল্ড নোড, যা জমা দেওয়া দরকার। সুতরাং this.parentNodeফর্ম নোড হয়। এটির পরে কেবল submit()সেই ফর্মটি কল করার পদ্ধতি। সঠিক ফর্মটি খুঁজে পেতে এটি পুরো দস্তাবেজ থেকে প্রয়োজনীয় গবেষণা নয়।

<form action="http://www.greatsolutions.com.br/indexint.htm"                   
   method="get">
    <h3> Enter your name</h3>
    First Name <input type="text"  name="fname"  size="30"><br>
    Last Name <input type="text" name="lname" size="30"><br>
    <a href="#" onclick="this.parentNode.submit();"> Submit here</a>
</form>

মনে করুন আমি নিজের নামের সাথে প্রবেশ করলাম:

ভরাট ফর্ম

আমি getফর্ম পদ্ধতি বৈশিষ্ট্যটি ব্যবহার করেছি কারণ জমা দেওয়ার পরে লোড পৃষ্ঠাতে URL এ সঠিক পরামিতিগুলি দেখা সম্ভব।

http://www.greatsolutions.com.br/indexint.htm?fname=Paulo&lname=Buchsbaum

এই সমাধানটি স্পষ্টতই এমন কোনও ট্যাগের জন্য প্রযোজ্য যা onclickইভেন্ট বা কিছু অনুরূপ ইভেন্ট গ্রহণ করে ।

thiseventপরিবর্তনশীল (সমস্ত বড় ব্রাউজার এবং আই 9 এর পরে উপলব্ধ) এর সাথে একত্রে প্রসঙ্গটি পুনরুদ্ধার করার জন্য একটি দুর্দান্ত পছন্দ যা সরাসরি কোনও ফাংশনের যুক্তি হিসাবে ব্যবহার করা যেতে পারে বা পাস হতে পারে।

এই ক্ষেত্রে, aসম্পত্তি ব্যবহার করে নীচের লাইন দ্বারা ট্যাগের সাথে রেখাটি প্রতিস্থাপন করুন target, এটি ইভেন্টটি শুরু হওয়া উপাদানটিকে নির্দেশ করে।

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a>

@ নাথান, আমার লেখার তেমন অভ্যাস নেই Stackoverflow। আমি আশা করি আপনার সংশোধনগুলি আমার শৈলীর উন্নতি করতে সহায়তা করবে। আমার ইংরেজিও ভাল না।
পাওলো বুচসবাউম

0

আপনি অনক্লিক = "ডকুমেন্ট.সেটমেন্ট বিইআইডি ('ফর্ম আইডি_এনওআইএআইএআইএল') ব্যবহার করতে পারেন S সাবমিট ()"

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.