এইচটিএমএল ফর্মের ডিফল্ট জমা বোতামটি কীভাবে নির্ধারিত হয়?

210

যদি কোনও ফর্ম জমা দেওয়া হয় তবে কোনও নির্দিষ্ট বোতাম দ্বারা নয়, যেমন

  • টিপে Enter
  • HTMLFormElement.submit()জেএস ব্যবহার করে

ব্রাউজারটি কীভাবে একাধিক জমা বোতামগুলির মধ্যে কোনটিকে চাপ দেওয়া হিসাবে ব্যবহার করতে হবে তা নির্ধারণ করার কথা কীভাবে হয়?

এটি দুটি স্তরে উল্লেখযোগ্য:

  • onclickজমা দেওয়ার বোতামের সাথে সংযুক্ত ইভেন্ট হ্যান্ডলারকে কল করা
  • ওয়েব সার্ভারে ফেরত পাঠানো ডেটা

আমার পরীক্ষা-নিরীক্ষা এ পর্যন্ত দেখিয়েছে যে:

  • যখন টিপুন Enter, ফায়ারফক্স, অপেরা এবং সাফারি ফর্মের প্রথম জমা বোতামটি ব্যবহার করুন
  • টিপানোর সময় Enter, আইই প্রথম জমা বোতামটি ব্যবহার করে বা কোনওটিই শর্তগুলির উপর নির্ভর করে আমি বের করতে সক্ষম হইনি depending
  • এই সমস্ত ব্রাউজার কোনও জেএস জমা দেওয়ার জন্য কোনওোটাই ব্যবহার করে না

মান কী বলে?

এটি যদি সহায়তা করে তবে এখানে আমার পরীক্ষার কোডটি রয়েছে (পিএইচপি কেবলমাত্র আমার পরীক্ষার পদ্ধতিতে প্রাসঙ্গিক, আমার নিজের প্রশ্নের সাথে নয়)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<body>

<h1>Get</h1>
<dl>
<?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<h1>Post</h1>
<dl>
<?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
    <input type="text" name="method" />
    <input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
    <input type="text" name="stuff" />
    <input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
    <input type="button" value="submit" onclick="document.theForm.submit();" />
</form>

</body></html>
javascript  html  cross-browser  standards 
— স্টুয়ার্ট
সূত্র

উত্তর:

115

আপনাকে Javascript (অর্থাত মাধ্যমে ফর্ম জমা দেন, তবে formElement.submit()কিছু সমতুল্য), তারপর কেউই এর জমা বোতাম সফল বলে মনে করা হয় এবং তাদের মান কেউই জমা দেওয়া ডেটা অন্তর্ভুক্ত করা হয়। (দ্রষ্টব্য যে আপনি যদি ফর্মটি জমা দিয়ে submitElement.click()তা ব্যবহার করেন তবে আপনার যে উল্লেখটি জমা দেওয়া হয়েছে তা সক্রিয় বলে বিবেচিত হবে; এটি সত্যই আপনার প্রশ্নের জিম্মায় আসবে না কারণ এখানে সাবমিট বাটনটি স্পষ্ট নয় তবে আমি ভেবেছিলাম এটি আমি অন্তর্ভুক্ত করব) যারা প্রথম অংশটি পড়েছেন এবং জেএস ফর্ম জমা দেওয়ার মাধ্যমে কীভাবে একটি সাবমিট বাটন সফল করবেন তা অবাক করে দিয়েছেন Of অবশ্যই, ফর্মটির অনসামিত হ্যান্ডলারের এখনও এইভাবে গুলি চালানো হবে, তবে তারা form.submit()মাছের আর একটি কেটলি হয়ে থাকবে না ...)

যদি কোনও টেক্সারিয়া ক্ষেত্রের না থাকাকালীন ফর্মটি যদি এন্টার দিয়ে হিট করে জমা দেওয়া হয়, তবে এটি এখানে কী চায় তা সিদ্ধান্ত নেওয়ার জন্য এটি প্রকৃতপক্ষে ব্যবহারকারী এজেন্টের হাতে রয়েছে। চশমা একটি ফর্ম জমা দেওয়ার একটি পাঠ্য এন্ট্রি ক্ষেত্রে মুখ্য যখন প্রবেশ ব্যবহার সম্পর্কে কিছু বলো না (যদি আপনি একটি বাটন ট্যাব এবং স্থান বা যাই হোক না কেন ব্যবহার করে এটি সক্রিয়, তারপর unambiguously ব্যবহার করা হয় নির্দিষ্ট জমা বোতামটি যেমন কোন সমস্যা নেই)। কেবলমাত্র এটিই বলেছে যে সাবমিট বাটনটি সক্রিয় হওয়ার পরে একটি ফর্ম অবশ্যই জমা দিতে হবে, এমনকি এটি প্রবেশের প্রয়োজনও নয় যেমন টেক্সট ইনপুট ফর্মটি জমা দেবে।

আমি বিশ্বাস করি যে ইন্টারনেট এক্সপ্লোরার উত্সটিতে প্রথম প্রদর্শিত সাবমিট বাটনটি বেছে নেয়; আমার অনুভূতি আছে যে ফায়ারফক্স এবং অপেরা সর্বনিম্ন ট্যাবিনডেক্সের সাথে বোতামটি বেছে নিয়ে অন্য কোনও কিছু সংজ্ঞায়িত না হলে প্রথম সংজ্ঞায়িত হয়ে ফিরে আসবে। জমা দেওয়ার কোনও ডিফল্ট মান বৈশিষ্ট্য আইআইআরসি আছে কিনা তা নিয়েও কিছু জটিলতা রয়েছে।

সরে যাওয়ার বিষয়টি হ'ল এখানে যা ঘটে তার জন্য কোনও সংজ্ঞায়িত মান নেই এবং এটি সম্পূর্ণরূপে ব্রাউজারের ঝাঁকুনিতে - তাই আপনি যা কিছু করেন না কেন যতটা সম্ভব সম্ভব, কোনও নির্দিষ্ট আচরণের উপর নির্ভর না করার চেষ্টা করুন। আপনি যদি সত্যিই জানতেই পারেন তবে আপনি সম্ভবত বিভিন্ন ব্রাউজার সংস্করণগুলির আচরণটি সন্ধান করতে পারেন তবে কিছুক্ষণ আগে যখন আমি এটি তদন্ত করেছি তখন বেশ কয়েকটি কনভোলিউড শর্ত ছিল (অবশ্যই নতুন ব্রাউজার সংস্করণগুলির সাথে পরিবর্তিত হতে পারে) এবং আমি পরামর্শ দেব আপনি যদি সম্ভব হয় তা এড়াতে!

— আন্দ্রেজেজ ডয়েল
সূত্র
1
পুনরায় প্যারা: আমার প্রাথমিক প্রশ্নটি ছিল "" যদি ব্রাউজারটি কোনও জমা দেওয়ার ব্যবস্থা নির্দিষ্ট করে না দিয়ে কোনও ফর্ম জমা দেওয়ার কোনও উপায় সরবরাহ করে ... "এর প্রভাবটিতে কোনও কিছু আছে কিনা।" তবে আমি ডেভিডের জবাব থেকে জড়ো করেছি যে নেই। আই আই সম্পর্কে আমার বক্তব্যটি হ'ল কখনও কখনও এন্টার টিপে ফর্ম জমা দেয় এবং কোনও জমা বোতাম সেট করে না। ফলাফলটি হ'ল, যদি আপনার কাছে একই স্ক্রিপ্টে একাধিক ফর্ম জমা থাকে তবে আপনি সেগুলি পার্থক্য করার জন্য সাবমিট বোতামগুলির উপর নির্ভর করতে পারবেন না। আমি যে প্রকল্পে কাজ করছি এটি এটি প্রকাশিত হয়েছিল।
— স্টুয়ার্ট
1
খুব দরকারী প্রথম অনুচ্ছেদের বন্ধনী বিভাগ - ধন্যবাদ।
— rbassett
63

এইচটিএমএল 4 এটি সুস্পষ্ট করে না। বর্তমান এইচটিএমএল 5 এর কার্যকরী খসড়া উল্লেখ করে যে প্রথম জমা বোতামটি অবশ্যই ডিফল্ট হতে হবে :

একটি formউপাদান এর ডিফল্ট বোতাম প্রথম বোতাম জমা মধ্যে গাছ অর্ডার যার ফর্মের মালিককে যে formউপাদান।

যদি ব্যবহারকারী এজেন্ট ব্যবহারকারীকে ফর্ম জমা দেওয়ার অনুমতি দেয় (উদাহরণস্বরূপ, কিছু প্ল্যাটফর্মে কোনও পাঠ্য ক্ষেত্রটি ফর্মটি জমা দেওয়ার সময় "enter" কী টিপুন), তবে এমন কোনও ফর্মের জন্য এটি করা যার ডিফল্ট বোতামটির একটি সংজ্ঞায়িত অ্যাক্টিভেশন রয়েছে আচরণ করতে ইউজার এজেন্ট হতে হবে কৃত্রিম ক্লিক অ্যাক্টিভেশন পদক্ষেপ চালানোর যে ডিফল্ট বোতাম ।

— কোয়েন্টিন
সূত্র
ঠিক আছে, তাই এটি করা উচিত। ন্ন?
— পেসারিয়ার
এইচটিএমএল 5 এ "অন্তর্ভুক্ত জমা" দেখে আমি আনন্দিত।
— ক্লিন্ট পাচল
61

আন্ড্রেজ খুব সুন্দরভাবে পেরেক পেয়েছে ... তবে এখানে একটি সহজ ক্রস-ব্রাউজার সমাধান।

এর মতো একটি ফর্ম নিন: 

<form>
    <input/>
    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>

    <button type="submit" value="default action"/>
</form>

এবং এটিতে রিফ্যাক্টর: 

<form>
    <input/>

    <button style="overflow: visible !important; height: 0 !important; width: 0 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; display: block !important;" type="submit" value="default action"/>

    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>
    <button type="submit" value="still another non-default action"/>

    <button type="submit" value="default action"/>
</form>

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

দুর্ভাগ্যক্রমে, কেবল প্রদর্শন শৈলী যুক্ত : কিছুই নয়; কাজ করবে না কারণ ডাব্লু 3 সি অনুমান করে যে কোনও লুকানো উপাদান ব্যবহারকারীর ইন্টারঅ্যাকশন থেকে বাদ দেওয়া উচিত। সুতরাং এটিকে পরিবর্তে সরল দৃষ্টিতে লুকিয়ে রাখুন!

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

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

— জেমস
সূত্র
5
ধন্যবাদ। ডিসপ্লে জুড়ে হোঁচট খেয়েছে : সমস্যাও তেমন নেই । বোতামটি ছোট করার পরিবর্তে আপনি এটিকে একটি দিয়ে আরও বাড়িয়ে পৃষ্ঠার বাইরে নিয়ে যেতে পারেন <div style="position: fixed; left: -1000px; top: -1000px />। আরও একটি বিষয় উদ্বেগের বিষয়: সিএসএসের সাহায্যে পৃষ্ঠা প্রবাহ থেকে কেবলমাত্র বোতামটি হ্রাস বা সরিয়ে নেওয়া ডাব্লুআইএআই বিষয়গুলি আনতে পারে, কারণ পর্দার পাঠকরা এখনও ডিফল্ট বোতামটি দেখতে পাবেন।
— স্টিফান হ্যাবারেল
2
এই বিস্তারিত উত্তরের জন্য আপনাকে জেমস ধন্যবাদ।
— নাথন
1
এটি আমার জন্য কাজ করেছে, ধন্যবাদ। বোতাম সীমানার জন্য আমাকে এটি যুক্ত করতে হয়েছিল: কোনওটি নয়; এটি প্রশংসনীয়ভাবে অদৃশ্য হয়ে যায়
— ম্যাকুম্বোমুয়ের্তে
4
আপনি কেবল লুকানো বোতামটির ট্যাবিনডেক্স বৈশিষ্ট্যটি -1
— tvanc
2
<input/>সেখানে কি আছে?
— জেড
16

আমি মনে করি কেউ এই পোস্টটি jQuery দিয়ে করতে চাইলে সহায়তা করবে:

http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/

মূল সমাধানটি হ'ল:

$(function() {
    $("form input").keypress(function (e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $('input[type=submit].default').click();
        return false;
    } else {
        return true;
    }
    });
});

এবং অন্যটি আমার পছন্দ হয়েছিল:

jQuery(document).ready(function() {
$("form input, form select").live('keypress', function (e) {
if ($(this).parents('form').find('button[type=submit].default, input[type=submit].default').length <= 0)
return true;

if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(this).parents('form').find('button[type=submit].default, input[type=submit].default').click();
return false;
} else {
return true;
}
});
});
— রদ্রিগো ক্যাবলেরো
সূত্র
jQuery.Event এর সর্বদা এর .wichবৈশিষ্ট্য থাকে। এছাড়াও ডিওএমের .keyCode(বা .charCodeসেই বিষয়ে) ফিরে যাওয়ার দরকার নেই ।
— আরজান
এখানে jQuery সম্পর্কিত আরেকটি সমস্যা অনাদায়ী ডাবল কোয়েরি। যেহেতু সত্যায় ফেরার কোনও প্রয়োজন নেই, তদ্ব্যতীত, jQuery সংস্করণটি আরজানের পরামর্শ অনুসারে হ্রাস সংহতকরণকে সংহত করার ক্ষেত্রে সত্যই স্পষ্ট এবং সংক্ষিপ্ত হয়ে পড়ে।
— soletan
আমি কিপ্রেসের পরিবর্তে কীডাউন ব্যবহার করেছি (কীআপের জন্য অপেক্ষা করা এড়াতে) এবং আমি e.preventDefault();"আসল" ডিফল্ট বোতামটি কার্যকর করতে এড়াতে এই ফাংশনের শুরুতে যুক্ত করেছি । সত্যিই ভাল কাজ করে।
— ম্যাট রায়
6

আমার এতে 11 টি বোতাম জমা দেওয়ার একটি ফর্ম ছিল এবং যখন ব্যবহারকারী প্রবেশ করানো টিপবে তখন সর্বদা এটি প্রথম জমা বোতামটি ব্যবহার করবে। আমি অন্য কোথাও পড়েছি যে কোনও ফর্মের একাধিক জমা বোতাম থাকা ভাল ধারণা (খারাপ অভ্যাস) নয় এবং এটি করার সর্বোত্তম উপায় হ'ল ফর্মের একমাত্র জমা বোতাম হিসাবে আপনার ডিফল্টরূপে চাওয়া বোতামটি। অন্যান্য বোতামগুলি "টিওয়াইপি = বাটন" তৈরি করা উচিত এবং একটি অনক্লিক ইভেন্ট যুক্ত করা উচিত যা জাভাস্ক্রিপ্টে আপনার নিজের জমা দেওয়ার রুটিনকে কল করে। এটার মতো কিছু :-

<SCRIPT Language="JavaScript">
function validform()
{
  // do whatever you need to validate the form, and return true or false accordingly
}

function mjsubmit()
{
  if (validform()) { document.form1.submit(); return true;}
  return false;
}
</SCRIPT>
<INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue='button1'; return mjsubmit();">
<INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue='button2'; return mjsubmit();">
<INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue='button3'; return validform();">
<INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue='button4'; return mjsubmit();">

এখানে, বাটন 3টি ডিফল্ট এবং আপনি অন্যান্য বোতামগুলির সাথে প্রোগ্রামক্রমে ফর্মটি জমা দিচ্ছেন, এমজেসবমিট রুটিন এগুলিকে বৈধতা দেয়। আছে HTH।

— গ্রাফিক
সূত্র
19
খারাপ ধারণা। আপনার ফর্মটি জেএস অক্ষমদের সাথে কাজ করবে না। জেএসকে নিরবচ্ছিন্নভাবে ব্যবহার করা উচিত।
— বালুসসি
7
খুব কম ব্রাউজারের ডিফল্টরূপে জেএস বন্ধ রয়েছে, এমনকি আইপডেও! আমি যে ফর্মটির উদ্ধৃতি দিচ্ছিলাম, জেএস বন্ধ করে দিবে এটি অকেজো! জেএসে এতটাই জড়িয়ে আছে।
— গ্রাফিক 13
7
ডিফল্টরূপে বন্ধ করা হয়েছে বা না, যাদের জেএস অক্ষম আছে তাদের উচিত এইরকম মূর্খ ছোট্ট ছিনতাই পেতে কেবল এটি চালু করা উচিত নয়।
— স্টুয়ার্ট
2
কী ধরনের ফর্মের 11 টি বোতাম জমা আছে ?? ( কৌতূহল )
— বেন
2
আমি নিরবচ্ছিন্ন জাভাস্ক্রিপ্টকে বৈধতা দেওয়ার সবচেয়ে বড় কারণটি হ'ল বিঘ্নিত জাভাস্ক্রিপ্ট হুড়োহুড়ি করে। আমি কী ভাবছি তার যোগ্যতা অর্জনের বিষয়ে আমি নিশ্চিত নই, তবে আমি যখন পৃষ্ঠাগুলিকে জেএসের উপর একেবারে নির্ভরশীল দেখি তখন আমি বাজিও বানাচ্ছি যে আমি আমার ডোমের সাথে কিছু কৌতুকপূর্ণ জিনিস করতে পারি এবং সার্ভারে অনিচ্ছাকৃত কিছু করতে পারি।
— সামান্থা ব্রানহাম
6

এটি এখন ব্যবহার করে সমাধান করা যেতে পারে flexbox:

এইচটিএমএল

<form>
    <h1>My Form</h1>
    <label for="text">Input:</label>
    <input type="text" name="text" id="text"/>

    <!-- Put the elements in reverse order -->
    <div class="form-actions">
        <button>Ok</button> <!-- our default action is first -->
        <button>Cancel</button>
    </div>
</form>

সিএসএস

.form-actions {
    display: flex;
    flex-direction: row-reverse; /* reverse the elements inside */
}

Explaination
আনমন বাক্স ব্যবহার করে, আমরা একটি ধারক উপাদানের ক্রম বিপরীত করতে পারে ব্যবহারসমূহ display: flexএছাড়াও সিএসএস নিয়ম ব্যবহার করে: flex-direction: row-reverse। এটির জন্য কোনও সিএসএস বা লুকানো উপাদান দরকার নেই। পুরানো ব্রাউজারগুলির জন্য যা ফ্লেক্সবক্স সমর্থন করে না, তারা এখনও একটি কার্যক্ষম সমাধান পান তবে উপাদানগুলি বিপরীত হবে না।

ডেমো
http://codepen.io/Godwin/pen/rLVKjm

— Godwin
সূত্র
2

আমি একই প্রশ্নের সাথে লড়াই করেছি যেহেতু আমি মাঝখানে বোতাম জমা দিয়েছিলাম যা থেকে অন্য পৃষ্ঠায় পুনঃনির্দেশিত জমা দেওয়া হয়েছে, যেমন:

<button type="submit" onclick="this.form.action = '#another_page'">More</button>

ব্যবহারকারীরা এন্টার কী চাপলে, অন্য বোতামের বোতামের পরিবর্তে এই বোতামটি ক্লিক করা হয়েছিল।

তাই আমি একাধিক জমা বোতাম এবং বিভিন্ন দৃশ্যমানতার বিকল্পগুলি দিয়ে একটি তৈরি করে এবং কোন বোতামটি ক্লিক করা হয়েছিল তা অনক্লিক ইভেন্টটি সতর্ক করে কিছু প্রাথমিক পরীক্ষা করেছি: https://jsfiddle.net/aqfy51om/1/

ব্রাউজার এবং ওএস আমি পরীক্ষার জন্য ব্যবহার করেছি:

উইন্ডোজ

  • গুগল ক্রোম 43 (সিমন গুগল: ডি)
  • মজিলা ফায়ারফক্স 38
  • ইন্টারনেট এক্সপ্লোরার 11
  • অপেরা 30.0

ওএসএক্স

  • গুগল ক্রোম 43
  • সাফারি 7.1.6

এই ব্রাউজারগুলির বেশিরভাগই দৃশ্যমানতার বিকল্পগুলি প্রয়োগ করা সত্ত্বেও খুব সহজেই প্রথম বোতামটি ক্লিক করে IE এবং সাফারি যা তৃতীয় বোতামটি ক্লিক করেছে, এটি "লুকানো" ধারকটির ভিতরে "দৃশ্যমান" রয়েছে:

<div style="width: 0; height: 0; overflow: hidden;">
    <button type="submit" class="btn btn-default" onclick="alert('Hidden submit button #3 was clicked');">Hidden submit button #3</button>
</div>

সুতরাং আমার পরামর্শ, যা আমি নিজেকে ব্যবহার করব, তা হ'ল:

আপনার যদি ফর্মের বিভিন্ন অর্থ সহ একাধিক জমা বোতাম থাকে তবে ফর্মের শুরুতে ডিফল্ট ক্রিয়া সহ জমা বোতামটি অন্তর্ভুক্ত করুন যা হয়:

  1. সম্পূর্ণ দৃশ্যমান
  2. সঙ্গে একটি পাত্রে আবৃত style="width: 0; height: 0; overflow: hidden;"

সম্পাদনা করুন আরেকটি বিকল্প হতে পারে বোতামটি অফসেট করা (এখনও এর শুরুতে) style="position: absolute; left: -9999px; top: -9999px;", কেবল এটি-তে চেষ্টা করে - কাজ করেছেন, তবে এটি কী স্ক্রু আপ করতে পারে তা সম্পর্কে আমার কোনও ধারণা নেই, উদাহরণস্বরূপ মুদ্রণ ..

— ক্রিস্টিয়ান
সূত্র
1

আপনার মন্তব্য থেকে:

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

আমি <input type="hidden" value="form_name" />প্রতিটি ফর্ম মধ্যে একটি ড্রপ ।

জাভাস্ক্রিপ্টের সাথে জমা দিলে: ফর্মগুলিতে ইভেন্টগুলি জমা দিন, ইভেন্টগুলিতে তাদের বোতামে ক্লিক করবেন না। সাভি ব্যবহারকারীরা খুব ঘন ঘন তাদের মাউস স্পর্শ করেন না।

— রায়ান ফ্লোরেন্স
সূত্র
প্রকৃতপক্ষে, তবে এটি এই প্রশ্নটির জন্ম দেয়: স্ট্যাকওভারফ্লো.com
— স্টিয়ার্ট
1

যখন আপনার একক ফর্মের একাধিক জমা বোতাম রয়েছে এবং কোনও ব্যবহারকারী কোনও পাঠ্য ক্ষেত্র থেকে ফর্মটি জমা দেওয়ার জন্য ENTER কী টিপেন, এই কোডটি মূল প্রেস ইভেন্ট থেকে ফর্মটিতে জমা দেওয়া ইভেন্টটি কল করে ডিফল্ট কার্যকারিতা ওভাররাইড করে। এই কোডটি এখানে:

$('form input').keypress(function(e){

    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)){ $(e.target).closest('form').submit(); return false; }
    else return true;

});
— axiom82
সূত্র
সরল এবং ইস্যু সমাধান করে
— toddmo
1

অদ্ভুত যে প্রথম বোতাম এন্টার সর্বদা প্রথম বোতামে যায় নির্বিশেষে দৃশ্যমান বা না হয়, যেমন jquery ব্যবহার করে show/hide()। অ্যাট্রিবিউট যুক্ত করা .attr('disabled', 'disabled')পুরোপুরি এন্টার সাবমিট বাটন প্রাপ্তি প্রতিরোধ করে। উদাহরণস্বরূপ রেকর্ড ডায়লগগুলিতে সন্নিবেশ / সম্পাদনা + বোতামের দৃশ্যমানতা মোছার সময় এটি সমস্যা problem আমি সন্নিবেশের সামনে কম হ্যাকিশ এবং সহজ প্লেসিং সম্পাদনা পেয়েছি

<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="insert">Insert</button>
<button type="submit" name="action" value="delete">Delete</button>

এবং জাভাস্ক্রিপ্ট কোড ব্যবহার করুন:

$("#formId button[type='submit'][name='action'][value!='insert']").hide().attr('disabled', 'disabled');
$("#formId button[type='submit'][name='action'][value='insert']").show().removeAttr('disabled');
— TMA
সূত্র
0

আমার রেসিপি:

<form>
<input type=hidden name=action value=login><!-- the magic! -->

<input type=text name=email>
<input type=text name=password>

<input type=submit name=action value=login>
<input type=submit name=action value="forgot password">
</form>

যদি কোনও বোতাম 'ক্লিক করা' না থাকে তবে এটি ডিফল্ট লুকানো ক্ষেত্রটি প্রেরণ করবে।

যদি তারা ক্লিক করা হয় তবে তাদের অগ্রাধিকার রয়েছে এবং এর মানটি পাশ হয়ে গেছে।

— gcb
সূত্র
2
কিন্তু এই আচরণটি কি মান দ্বারা নির্দিষ্ট করা হয়? এবং ব্রাউজারগুলি এটি সঠিকভাবে প্রয়োগের জন্য বিশ্বাসযোগ্য হতে পারে?
— স্টিয়ার্ট
ভাল প্রশ্ন. আমি এটি সমস্ত ব্রাউজারে (ইউই ব্রাউজার ম্যাট্রিক্স থেকে) কাজ করার জন্য পরীক্ষা করেছি এবং এটি সত্যিকার জীবনে আমি সবচেয়ে বেশি স্বচ্ছন্দ হয়ে উঠতে পেরেছি (মানগুলি যা নির্দিষ্ট করে নির্বিশেষে)
— গিসিবি
@ কি হয়? পরে একবার দেখে নেব
— gcb
1
আমার ভুল, আমি টাইপ = "লুকানো" changed পরিবর্তন করেছি এবং আমি একই 'নাম' মানগুলি লক্ষ্য করি না।
— হলুদ এবং লাল
আইই 11 বা এফএক্স 30 এ এটি আমার পক্ষে কাজ করে না। মানটি সর্বদা লুকানো মানকে সেট করা থাকে।
— জেমি কিটসন
0

আমি যে অন্য সমাধানটি ব্যবহার করেছি তা হ'ল ফর্মটিতে একটি বোতাম রাখা এবং অন্য বোতামগুলি জাল করা।

এখানে একটি উদাহরণ:

<form>
  <label for="amount">Amount of items</label>
  <input id="amount" type="text" name="amount" />
  <span id="checkStock" class="buttonish">Check stock</span>
  <button type="submit" name="action" value="order">Place order</button>
</form>

আমি তখন বোতামটির মতো দেখতে স্প্যান উপাদানগুলিকে স্টাইল করি। একজন জেএস শ্রোতা স্প্যানটি পর্যবেক্ষণ করে একবার ক্লিক করলে কাঙ্ক্ষিত অপারেশন করে।

অগত্যা সমস্ত পরিস্থিতিতে সঠিক নয়, তবে কমপক্ষে এটি করা বেশ সহজ।

— জোহান ফ্রেডরিক ভারেন
সূত্র
1
জেএস অক্ষম করা ব্যবহারকারীদের ফ্যালব্যাক কী?
— স্টুয়ার্ট
জেএস অক্ষম ব্যবহারকারীরা ইন্টারনেট ব্যবহার করতে পারবেন না, এটি আজকালকার মতো সহজ।
— ক্রিস্টোফার বুবাচ
0

থেকে এইচটিএমএল 4 বৈশিষ্ট :

যদি কোনও ফর্মটিতে একাধিক জমা বোতাম থাকে তবে কেবল সক্রিয় জমা দেওয়া বোতামটি সফল।

এর অর্থ হ'ল 1 টিরও বেশি জমা বোতাম দেওয়া হয়েছে এবং কোনওটিই সক্রিয় হয়নি (ক্লিক করা), কোনওটিই সফল হওয়া উচিত নয়।

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

সুতরাং আমি মনে করি এটির প্রথম বা অন্য কোনও বোতাম যা ব্যবহারকারী এটির (ক্লিক) সংজ্ঞায়িত করে না এটি ব্যবহার করা ভাল ধারণা নয়। তবুও, ব্রাউজারগুলি অবশ্যই এটি করছে।

— ক্রিস্টোফার কে।
সূত্র
-2

সম্পাদনা: দুঃখিত, এই উত্তরটি লেখার সময় আমি সাধারণ অর্থে বোতাম জমা দেওয়ার বিষয়ে ভাবছিলাম। নীচের উত্তরটি একাধিক type="submit"বোতাম সম্পর্কে নয় , কারণ এটি কেবল একটি ছেড়ে দেয় type="submit"এবং অন্যটিতে পরিবর্তন করে type="button"। আমি এখানে উত্তরটি রেখে দিচ্ছি কারণ ক্ষেত্রে যদি এমন কাউকে সহায়তা করে typeযা তাদের ফর্মটিতে পরিবর্তন করতে পারে:

এন্টার টিপে কী বোতাম টিপছে তা নির্ধারণ করতে, আপনি এটি দিয়ে চিহ্নিত করতে পারেন type="submit"এবং অন্যান্য বোতামগুলি সেগুলি দিয়ে চিহ্নিত করে type="button"। উদাহরণ স্বরূপ:

<input type="button" value="Cancel" />
<input type="submit" value="Submit" />
— জেসেস কেরেরা
সূত্র
টাইপ "বোতাম" ফর্মটি জমা দেওয়ার কারণ হয় না। এটি কেবল ক্লায়েন্ট-সাইড স্ক্রিপ্টগুলি ট্রিগার করতে ব্যবহৃত হয়।
— স্টুয়ার্ট
ঠিক এই কারণেই যখন আপনি প্রবেশ টিপুন তখন ব্রাউজার এটিকে এড়িয়ে যায়, এবং "জমা দিন" টাইপের একটিটি কার্যকর হয়ে যায়। উদাহরণস্বরূপ ক্লিকের উপর অন্য যে কোনও কিছু করতে আপনি টাইপযুক্ত "বোতাম" ব্যবহার করতে পারেন। নেতিবাচক ভোট সরান দয়া করে।
— জেসেস ক্যারিরা
প্রশ্নটি ছিল একাধিক জমা বোতাম সম্পর্কে ।
— স্টুয়ার্ট
আমার উদাহরণ একাধিক জমা বোতামের জন্য সম্পূর্ণ বৈধ। "সাবমিট" টাইপযুক্ত যাকে চাপ দেওয়া হিসাবে কাজ করার জন্য ব্রাউজার দ্বারা নির্ধারিত হয় (যা প্রশ্নটি ছিল সেটাই ছিল)। তারপরে অন্যান্য বোতামের সাহায্যে আপনি জাভাস্ক্রিপ্ট ইভেন্টগুলি অনক্লিক ইভেন্টের মতো আপনার উদাহরণটিতে থাকা জাভাস্ক্রিপ্ট ইভেন্টগুলি ব্যবহার করে তা সাবমিট বাটন হিসাবে ব্যবহার করতে পারেন। সুতরাং আমার উত্তর প্রাসঙ্গিক এবং ডাউন ভোটের যোগ্য নয়। দয়া করে এটি সরান।
— জেসেস ক্যারিরা
1
যদি আপনার বক্তব্যটি ছিল কেবলমাত্র তাদের মধ্যে একটির "সাবমিট" টাইপ করে এবং অন্য বোতামগুলি প্রয়োগ করতে জাভাস্ক্রিপ্ট ব্যবহার করে অস্পষ্টতা সরিয়ে ফেলার পরামর্শ দেওয়া হয়, তবে এটি গ্রাফিকের জবাবের সদৃশ এবং এটি ইতিমধ্যে একটি খারাপ ধারণা হিসাবে প্রত্যাখ্যান করা হয়েছে।
— স্টিয়ার্ট
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.