এইচটিএমএল আকারে একাধিক জমা বোতাম


263

ধরা যাক আপনি একটি HTML আকারে একটি উইজার্ড তৈরি করেছেন। একটি বোতাম পিছনে যায়, এবং একটি এগিয়ে যায়। যেহেতু আপনি টিপুন তখন মার্কআপে পিছনের বোতামটি প্রথম প্রদর্শিত হয় Enter, এটি ফর্মটি জমা দেওয়ার জন্য সেই বোতামটি ব্যবহার করবে।

উদাহরণ:

<form>
  <!-- Put your cursor in this field and press Enter -->
  <input type="text" name="field1" />

  <!-- This is the button that will submit -->
  <input type="submit" name="prev" value="Previous Page" />

  <!-- But this is the button that I WANT to submit -->
  <input type="submit" name="next" value="Next Page" />
</form>

কোনও ব্যবহারকারী চাপলে ফর্মটি জমা দেওয়ার জন্য কোন বোতামটি ব্যবহৃত হয় তা আমি সিদ্ধান্ত নিতে চাই Enter। এইভাবে, আপনি যখন Enterউইজার্ডটি টিপবেন তখন পরবর্তী পৃষ্ঠায় চলে যাবে, আগেরটি নয়। এটি করতে tabindexআপনার কি ব্যবহার করতে হবে?

উত্তর:


142

আশা করি এটা কাজে লাগবে. আমি কেবল floatডানদিকে বোতামগুলি যুক্ত করার কৌশলটি করছি ।

এইভাবে Prevবোতামটি বোতামের বামে থাকে Nextতবে NextHTML কাঠামোর মধ্যে প্রথমটি আসে:

.f {
  float: right;
}
.clr {
  clear: both;
}
<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>

অন্যান্য পরামর্শগুলির জন্য সুবিধা: জাভাস্ক্রিপ্ট কোড, অ্যাক্সেসযোগ্য এবং উভয় বোতামই রয়ে গেছে type="submit"


23
ট্যাব ক্রম পরিবর্তন না করে দয়া করে এটি করবেন না, যাতে ট্যাব বোতামটি হিট করা স্ক্রিনে উপস্থিত হওয়ার সাথে সাথে বোতামগুলি সাইকেল চালিয়ে যায়।
স্টিভ

61

পূর্ববর্তী বোতামের ধরণটি এই জাতীয় বোতামে পরিবর্তন করুন:

<input type="button" name="prev" value="Previous Page" />

এখন নেক্সট বোতামটি ডিফল্ট হবে এবং defaultআপনি এটিতে এট্রিবিউটটি যুক্ত করতে পারেন যাতে আপনার ব্রাউজারটি এটি এর মতো হাইলাইট করে:

<input type="submit" name="next" value="Next Page" default />

39
আপনি কোন defaultবৈশিষ্ট্যের কথা বলছেন? কোনও "ডিফল্ট" বৈশিষ্ট্য নেই, যা বৈধ হবে: w3.org/html/wg/drafts/html/master/… (এইচটিএমএল 5, এইচটিএমএল 4.01 ট্রানজিশনাল / স্ট্রাইক্ট , এক্সএইচটিএমএল 1.0 স্ট্রাইক নয়)। আর আমি দেখতে না কেন থেকে ইনপুট টাইপ পরিবর্তন না submitকরার জন্য buttonভাল হবে। আপনার কোনও সমস্যা ছাড়াই এক আকারে একাধিক জমা টাইপ ইনপুট উপাদান থাকতে পারে। আমি কেন বুঝতে পারছি না যে এই উত্তরটি এত বেশি উত্সাহিত হয়েছে।
Sk8erPeter

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

2
@ Sk8erPeter, @ Jonas .... হুম .. আমি সন্দেহ করি যে এই defaultবৈশিষ্ট্যটি একটি গ্লোবাল বৈশিষ্ট্য; গণিত বৈশিষ্ট্য .. যা গণনার সাথে সম্পর্কিত: w3.org/html/wg/drafts/html/master/… । বিন্দুটি বাদে .. উত্তরের বোতামের দিকটি কোনও উত্তর নয় .. এটি একটি ' শর্তসাপেক্ষ পরামর্শ ' বা একটি প্রশ্ন ( নিজেই প্রশ্ন )।
ব্রেট ক্যাসওয়েল

3
@ জোনাস: হ্যাঁ, type="button"ফর্মটি জমা দেয় না , করে না type="submit", তবে এই বোতামগুলির প্রকারটি পরিবর্তন করা অবশ্যই সমাধান নয়, কারণ এই বোতামগুলি মূলত একইভাবে আচরণ করা উচিত - "নেক্সট" বোতামটি কীভাবে কীভাবে তৈরি করা যায় সে বিষয়ে ওপি'র প্রশ্ন ছিল এন্টার কী টিপুন জন্য ডিফল্ট। এবং গৃহীত উত্তরের একটি সম্ভাব্য সমাধান রয়েছে।
Sk8erPeter

4
@ ব্র্যাটক্যাসওয়েল: এই বোতামগুলির ধরণের পরিবর্তন করা একটি খারাপ কাজ (আমার আগের মন্তব্যটি দেখুন)। defaultএইচটিএমএলে inputট্যাগগুলির জন্য কোনও বৈধ বৈশিষ্ট্য নেই (যেমন আমি আগে বলেছি), এবং (জনপ্রিয়) ব্রাউজারগুলি এই বৈশিষ্ট্যটির বোতামটি হাইলাইট করবে না যার অর্থ এই বৈশিষ্ট্যের কোনও মানহীন বাস্তবায়ন নেই - তাই আমি এখনও জানি না @ ওয়ালি লাউলেস কী সম্পর্কে কথা বলছিলেন এবং কেন এই উত্তরটি এতটা ওভাররেটেড। শুধুমাত্র এক বৈধ defaultঅ্যাট্রিবিউট HTML5 এর মধ্যে চালু, কিন্তু শুধুমাত্র জন্য <track>: TAG developer.mozilla.org/en-US/docs/Web/HTML/Element/track
Sk8erPeter

56

আপনার জমা বোতামগুলিকে একই নাম দিন:

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

যখন ব্যবহারকারী টিপুন Enterএবং অনুরোধটি সার্ভারে যায়, আপনি submitButtonনিজের সার্ভার-পাশের কোডটিতে ফর্ম জোড়ের সংকলন সহ মানটি পরীক্ষা করতে পারেন name/value। উদাহরণস্বরূপ, এএসপি ক্লাসিকে :

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for the previous page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for the next page
End If

তথ্যসূত্র: একক ফর্মে একাধিক জমা বোতাম ব্যবহার করা


26
এটি ব্যবহারকারী জিজ্ঞাসা করলেন না। প্রবেশদ্বারটি যখন চাপানো হয় তখন কোনও ফর্মের কোন জমা দেওয়ার বোতামটি সক্রিয় হয় তা কীভাবে নিয়ন্ত্রণ করতে হয় তা ব্যবহারকারী জানতে চেয়েছিলেন। ডিফল্ট বোতাম যা।
kosoant

20
I18n অ্যাপ্লিকেশনটিতে কাজ করে না যেখানে আপনি বোতামটির লেবেলটি জানেন না।
ক্রিস

কোন সিস্টেম বা প্রযুক্তি সমাধানে সার্ভার নিজেই জানত না যে লেবেলটি পরবর্তী এবং পিছনের বোতামটির জন্য ব্যবহৃত হয়েছিল? সার্ভারটি প্রথম স্থানে পরবর্তী এবং পিছনের বোতামটি তৈরি করে নি? (স্থানীয়করণ যদি ক্লায়েন্টের পক্ষ থেকে পরিচালিত হয় তবে আমি কল্পনা করি যে সার্ভারটি হয়ত এটি জানেন না, তবে এইচটিএমএল এর জন্য আমি এর আগে কখনও শুনিনি)
জ্যাকব

এই উত্তরটি পুরোপুরি প্রশ্নটিকে মিস করে, সম্ভবত এটি অন্য প্রশ্নের জন্য। এত উর্ধ্বে কেন ??? কারও কাছে কখনও বোতামটির লেবেল যাচাই করা উচিত নয় বলে উল্লেখ করা উচিত নয় ... প্রচুর ঝামেলার আহ্বান জানায়। এমনকি সহজ কেস: "আমাদের" পূর্ববর্তী পৃষ্ঠা "তে স্ট্রিংটি সংক্ষিপ্ত করে তুলতে হবে" আপনার সাইটের কার্যকারিতা নষ্ট করবে।
টায়লা

30

যদি ডিফল্টরূপে প্রথম বোতামটি ব্রাউজারগুলিতে ব্যবহার করা হয় তবে এগুলি উত্স কোডের মধ্যে সঠিক উপায়ে রাখুন এবং তারপরে তাদের উপস্থিত অবস্থানগুলিতে পরিবর্তন করতে CSS ব্যবহার করুন।

float তাদের বাম এবং ডান এগুলিকে চাক্ষুষভাবে ঘুরিয়ে আনতে উদাহরণস্বরূপ।


18

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

<html>
<head>
    <style>
        div.defaultsubmitbutton {
            display: none;
        }
    </style>
</head>
<body>
    <form action="action" method="get">
        <div class="defaultsubmitbutton">
            <input type="submit" name="next" value="Next">
        </div>
        <p><input type="text" name="filter"><input type="submit" value="Filter"></p>
        <p>Filtered results</p>
        <input type="radio" name="choice" value="1">Filtered result 1
        <input type="radio" name="choice" value="2">Filtered result 2
        <input type="radio" name="choice" value="3">Filtered result 3
        <div>                
            <input type="submit" name="prev" value="Prev">
            <input type="submit" name="next" value="Next">
        </div>
    </form>
</body>
</html>

17

আমি ফর্ম জমা দেওয়ার জন্য জাভাস্ক্রিপ্ট ব্যবহার করব। ফর্ম উপাদানটির onKeyPress ইভেন্ট দ্বারা ট্রিগার করা হবে এবং Enterকীটি নির্বাচন করা হয়েছে কিনা তা সনাক্ত করবে would যদি এটি হয় তবে এটি ফর্মটি জমা দেবে।

এখানে দুটি পৃষ্ঠা রয়েছে যা এটি কীভাবে করার কৌশল দেয়: 1 , 2 । এর উপর ভিত্তি করে, এখানে ব্যবহারের উদাহরণ ( এখানে ভিত্তি করে ):

<SCRIPT TYPE="text/javascript">//<!--
function submitenter(myfield,e) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) {
    keycode = e.which;
  } else {
    return true;
  }

  if (keycode == 13) {
    myfield.form.submit();
    return false;
  } else {
    return true;
  }
}
//--></SCRIPT>

<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />

2
জাভাস্ক্রিপ্ট অক্ষম থাকলে কী হবে?
জন উইনস্টলি


2
@ মেরেকি তারা জেএসকে মন্তব্য করার দরকার নেই not <script> সমর্থনকারী ব্রাউজারে <script> এর বিষয়বস্তুগুলি পার্স করার সময় এগুলি উপেক্ষা করা হয়। আজ তাদের সত্যই প্রয়োজন নেই। তবে খুব প্রাচীন ব্রাউজারগুলিতে, স্ক্রিপ্টটিকে সরল পাঠ্য হিসাবে মুদ্রণ করা এড়াতে এটি একটি সামঞ্জস্য হ্যাক।
লীমস

17

আপনি যদি সত্যিই এটি কোনও ইনস্টল ডায়লগের মতো কাজ করতে চান তবে কেবলমাত্র "নেক্সট" বোতামটি অনলোড করুন focus

যদি ব্যবহারকারী হিট করে Returnতবে ফর্মটি জমা দেয় এবং এগিয়ে যায়। যদি তারা ফিরে যেতে চায় তবে তারা Tabবোতামটি টিপুন বা ক্লিক করতে পারে ।


2
তার অর্থ কেউ পাঠ্য ক্ষেত্রে থাকাকালীন কোনও ফর্ম পূরণ করে এবং ফিরতি হিট করে।
জর্ডান রিয়েটার

17

খাঁটি এইচটিএমএল দিয়ে এটি করা যায় না। এই কৌশলটির জন্য আপনাকে অবশ্যই জাভাস্ক্রিপ্টের উপর নির্ভর করতে হবে।

তবে, আপনি যদি HTML পৃষ্ঠায় দুটি ফর্ম রাখেন তবে আপনি এটি করতে পারেন।

ফর্ম 1 এর আগের বোতামটি থাকবে।

ফর্ম 2-এর যে কোনও ব্যবহারকারীর ইনপুট + পরবর্তী বোতাম থাকবে।

যখন ব্যবহারকারী Enterফর্ম 2 এ টিপুন, পরবর্তী জমা বোতামটি ফায়ার হবে fire


16

আপনি এটি CSS এর মাধ্যমে করতে পারেন।

Nextপ্রথমে বোতামটি মার্কআপে বোতামগুলি রাখুন , তারপরে Prevবোতামটি পরে দিন।

তারপরে সিএসএস ব্যবহার করুন যাতে আপনি চান সেভাবে প্রদর্শিত হয়।


14

এটি বেশিরভাগ ব্রাউজারে জাভাস্ক্রিপ্ট বা সিএসএস ছাড়াই কাজ করে:

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

ফায়ারফক্স, অপেরা, সাফারি এবং গুগল ক্রোম সব কাজ করে।
বরাবরের মতোই ইন্টারনেট এক্সপ্লোরার সমস্যা।

এই সংস্করণটি যখন জাভাস্ক্রিপ্ট চালু হয় কাজ করে:

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

সুতরাং এই সমাধানের ত্রুটিটি হ'ল:

আপনি যদি জাভাস্ক্রিপ্ট বন্ধ করে ইন্টারনেট এক্সপ্লোরার ব্যবহার করেন তবে পূর্ববর্তী পৃষ্ঠাটি কাজ করে না।

মনে মনে, পিছনে বোতামটি এখনও কাজ করে!


1
জাভাস্ক্রিপ্ট ব্যতীত আপনি "পূর্ববর্তী পৃষ্ঠা" বোতামটি সক্রিয় করতে পারবেন না, কারণ টাইপ = "বোতাম"!
ঝুঁকিপূর্ণ

আপনার পরামর্শের সাথে সমস্যাটি হ'ল একটি বোতামের টাইপ = "বোতাম" ফর্মটি পোস্ট করে না, সুতরাং এটি মূলত কিছুই করে না, যখন অ্যাঙ্কর সহ দ্বিতীয় সংস্করণটি একটি পোষ্টের পরিবর্তে জিইটি তৈরি করে।
টায়লা

12

যদি আপনার এক পৃষ্ঠায় একাধিক সক্রিয় বোতাম থাকে তবে আপনি এই জাতীয় কিছু করতে পারেন:

Enterফর্মের ডিফল্ট বোতাম হিসাবে আপনি কী টিপলে ট্রিগার করতে চান এমন প্রথম বোতামটি চিহ্নিত করুন । দ্বিতীয় বোতামটির জন্য, এটি Backspaceকীবোর্ডের বোতামের সাথে যুক্ত করুন। BackspaceEventcode 8।

$(document).on("keydown", function(event) {
  if (event.which.toString() == "8") {
    var findActiveElementsClosestForm = $(document.activeElement).closest("form");

    if (findActiveElementsClosestForm && findActiveElementsClosestForm.length) {
      $("form#" + findActiveElementsClosestForm[0].id + " .secondary_button").trigger("click");
    }
  }
});
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

<form action="action" method="get" defaultbutton="TriggerOnEnter">
  <input type="submit" id="PreviousButton" name="prev" value="Prev" class="secondary_button" />
  <input type="submit" id='TriggerOnEnter' name="next" value="Next" class="primary_button" />
</form>


11

ট্যাব ক্রম পরিবর্তন করা এটি সম্পাদন করতে সমস্ত প্রয়োজন। সহজবোধ্য রাখো.

আর একটি সহজ বিকল্প হ'ল এইচটিএমএল কোডে সাবমিট বোতামের পরে পিছনের বোতামটি রাখা হবে তবে এটি বামে ভাসা যাতে এটি বোতামটি জমা দেওয়ার আগে প্রদর্শিত হয়।


10
<input type="submit" name="perv" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page"> 

সমস্ত জমা বোতামের নাম একই রাখুন - "পূর্ব"।

একমাত্র পার্থক্য হ'ল valueঅনন্য মান সহ বৈশিষ্ট্য। যখন আমরা স্ক্রিপ্টটি তৈরি করি, তখন এই অনন্য মূল্যবোধগুলি আমাদের জমা দেওয়া বোতামগুলির মধ্যে কোনটি চাপছিল তা নির্ধারণ করতে সহায়তা করবে।

এবং নিম্নলিখিত কোডিং লিখুন:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if

সমস্যাটি হ'ল কোনও পাঠ্য ক্ষেত্রে প্রবেশ করানো প্রথমে জমা দেওয়ার বোতামটি দিয়ে ফর্মটি জমা দেবে, উদ্দেশ্যযুক্তটির সাথে নয় (উদাহরণের মধ্যে দ্বিতীয়টি)। ফর্মটি জমা দেওয়ার জন্য কোন সাবমিট বাটন ব্যবহার করা হয়েছিল তা সন্ধান করা সহজ, এবং এটাই প্রশ্ন ছিল না!
ঝুঁকিপূর্ণ


10

আর একটি সহজ বিকল্প হ'ল এইচটিএমএল কোডে সাবমিট বোতামের পরে পিছনের বোতামটি রাখা, তবে এটি বামে ভাসা করা উচিত, সুতরাং এটি সাবমিট বোতামের আগে পৃষ্ঠায় প্রদর্শিত হবে।

ট্যাব ক্রম পরিবর্তন করা এটি সম্পাদন করতে সমস্ত প্রয়োজন। সহজবোধ্য রাখো.


10

আমি যখন প্রথমবারের বিরুদ্ধে এলাম, তখন আমি অনক্লিক () / জাভাস্ক্রিপ্ট হ্যাক নিয়ে এসেছি যখন পছন্দগুলি পূর্ববর্তী / পরবর্তী না হয় যা আমি এখনও এর সরলতার জন্য পছন্দ করি। এটা এইভাবেই চলে:

@model myApp.Models.myModel

<script type="text/javascript">
    function doOperation(op) {
        document.getElementById("OperationId").innerText = op;
        // you could also use Ajax to reference the element.
    }
</script>

<form>
  <input type="text" id = "TextFieldId" name="TextField" value="" />
  <input type="hidden" id="OperationId" name="Operation" value="" />
  <input type="submit" name="write" value="Write" onclick='doOperation("Write")'/>
  <input type="submit" name="read" value="Read" onclick='doOperation("Read")'/>
</form>

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

// Do operation according to which submit button was clicked
// based on the contents of the hidden Operation field.
if (myModel.Operation == "Read")
{
     // Do read logic
}
else if (myModel.Operation == "Write")
{
     // Do write logic
}
else
{
     // Do error logic
}

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


9

থেকে https://html.spec.whatwg.org/m মাল্টিপেজ / সফটওয়্যারস html# অপরিশোধিত- জমা

কোনও ফর্ম উপাদানটির ডিফল্ট বোতাম হ'ল গাছের ক্রমে প্রথম জমা দেওয়া বোতাম যার ফর্মের মালিক সেই ফর্ম উপাদান।

যদি ব্যবহারকারী এজেন্ট ব্যবহারকারীকে ফর্ম জমা দেওয়ার অনুমতি দেয় তবে (উদাহরণস্বরূপ, কিছু প্ল্যাটফর্মে কোনও পাঠ্য ক্ষেত্রটি ফর্ম জমা দেওয়ার সময় "প্রবেশ" কী টিপুন) ...

পরের ইনপুটটি টাইপ = "জমা দিন" এবং পূর্ববর্তী ইনপুটটি = "বোতাম" টাইপ করতে পছন্দসই ডিফল্ট আচরণ দেওয়া উচিত।

<form>
   <input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->

   <input type="button" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
   <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

9

এটি আমি চেষ্টা করে দেখেছি:

  1. আপনার বোতামগুলির বিভিন্ন নাম দেওয়া উচিত তা নিশ্চিত করতে হবে
  2. একটি ifবিবৃতি লিখুন যা উভয় বাটন ক্লিক করা হলে প্রয়োজনীয় ক্রিয়া করবে।

 

<form>
    <input type="text" name="field1" /> <!-- Put your cursor in this field and press Enter -->

    <input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
    <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

পিএইচপি-তে,

if(isset($_POST['prev']))
{
    header("Location: previous.html");
    die();
}

if(isset($_POST['next']))
{
    header("Location: next.html");
    die();
}

সমস্যাটি হ'ল কোনও পাঠ্য ক্ষেত্রে প্রবেশ করানো প্রথমে জমা দেওয়ার বোতামটি দিয়ে ফর্মটি জমা দেবে, উদ্দেশ্যযুক্তটির সাথে নয় (উদাহরণের মধ্যে দ্বিতীয়টি)। ফর্মটি জমা দেওয়ার জন্য কোন সাবমিট বাটন ব্যবহার করা হয়েছিল তা সন্ধান করা সহজ, এবং এটাই প্রশ্ন ছিল না!
ঝুঁকিপূর্ণ

7

মূলত একই জিনিসটির উত্তর খোঁজার চেষ্টা করার সময় আমি এই প্রশ্নটি ঘুরে এসেছি, কেবলমাত্র এএসপি.এনইটি নিয়ন্ত্রণের সাথে, যখন আমি বুঝতে পেরেছিলাম যে এএসপি বোতামটির এমন একটি সম্পত্তি রয়েছে UseSubmitBehaviorযা আপনাকে কোনটি জমা দিতে পারে তা সেট করতে দেয়।

<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />

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


6

জাভাস্ক্রিপ্ট (এখানে jQuery) দিয়ে, আপনি ফর্মটি জমা দেওয়ার আগে পূর্ব বোতামটি অক্ষম করতে পারেন।

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});

1

এটা চেষ্টা কর..!

<form>
  <input type="text" name="Name" />
  <!-- Enter the value -->

  <input type="button" name="prev" value="Previous Page" />
  <!-- This is the button that will submit -->
  <input type="submit" name="next" value="Next Page" />
  <!-- But this is the button that I WANT to submit -->
</form>


1

আমি খুব অনুরূপ সমস্যাটি এইভাবে সমাধান করেছি:

  1. যদি জাভাস্ক্রিপ্ট সক্ষম করা থাকে (বেশিরভাগ ক্ষেত্রে আজকাল) তবে সমস্ত জমা দেওয়া বোতাম জাভাস্ক্রিপ্ট (jQuery) এর মাধ্যমে পৃষ্ঠা লোডের বোতামগুলিতে " অবনমিত " হয়। " অবনমিত " বোতামের টাইপ করা বোতামগুলির ইভেন্টগুলি ক্লিক করুন জাভাস্ক্রিপ্টের মাধ্যমে পরিচালনা করা হয়।

  2. যদি জাভাস্ক্রিপ্ট সক্ষম না করা থাকে তবে ফর্মটি একাধিক জমা বোতামগুলির সাথে ব্রাউজারে পরিবেশন করা হবে। এক্ষেত্রে ফর্মের অভ্যন্তরে হিট Enterকরা পূর্বনির্ধারিত ডিফল্টেরtextfield পরিবর্তে প্রথম বোতামের সাহায্যে ফর্মটি জমা দেবে তবে কমপক্ষে ফর্মটি এখনও ব্যবহারযোগ্য is আপনি পূর্ব এবং পরবর্তী উভয় বোতামের সাথে জমা দিতে পারেন ।

কাজের উদাহরণ:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>

    <body>
        <form action="http://httpbin.org/post" method="post">
            If JavaScript  is disabled, then you CAN submit the form
            with button1, button2 or button3.

            If you press enter on a text field, then the form is
            submitted with the first submit button.

            If JavaScript is enabled, then the submit typed buttons
            without the 'defaultSubmitButton' style are converted
            to button typed buttons.

            If you press Enter on a text field, then the form is
            submitted with the only submit button
            (the one with class defaultSubmitButton)

            If you click on any other button in the form, then the
            form is submitted with that button's value.

            <br />

            <input type="text" name="text1" ></input>
            <button type="submit" name="action" value="button1" >button 1</button>
            <br />

            <input type="text" name="text2" ></input>
            <button type="submit" name="action" value="button2" >button 2</button>
            <br />

            <input type="text" name="text3" ></input>
            <button class="defaultSubmitButton" type="submit" name="action" value="button3" >default button</button>
        </form>

        <script>
            $(document).ready(function(){

                /* Change submit typed buttons without the 'defaultSubmitButton'
                   style to button typed buttons */
                $('form button[type=submit]').not('.defaultSubmitButton').each(function(){
                    $(this).attr('type', 'button');
                });

                /* Clicking on button typed buttons results in:
                   1. Setting the form's submit button's value to
                      the clicked button's value,
                   2. Clicking on the form's submit button */
                $('form button[type=button]').click(function( event ){
                    var form = event.target.closest('form');
                    var submit = $("button[type='submit']",form).first();
                    submit.val(event.target.value);
                    submit.click();
                });
            });
        </script>
    </body>
</html>


0

তুমি ব্যবহার করতে পার Tabindex এই সমস্যাটি সমাধান । এছাড়াও বোতামগুলির ক্রম পরিবর্তন করা এটি অর্জনের আরও কার্যকর উপায় হবে।

বোতামগুলির ক্রম পরিবর্তন করুন এবং floatআপনি আপনার HTMLদৃষ্টিতে প্রদর্শন করতে চান এমন পছন্দসই অবস্থান নির্ধারণের জন্য মানগুলি যুক্ত করুন ।


-4

আপনি যে উদাহরণটি দিয়েছেন তা ব্যবহার করে:

<form>
    <input type="text" name="field1" /><!-- Put your cursor in this field and press Enter -->
    <input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
    <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

আপনি যদি "পূর্ববর্তী পৃষ্ঠা" তে ক্লিক করেন তবে কেবলমাত্র "পূর্ব" এর মান জমা দেওয়া হবে। আপনি যদি "নেক্সট পৃষ্ঠা" ক্লিক করেন তবে কেবলমাত্র "পরবর্তী" এর মান জমা দেওয়া হবে।

তবে, আপনি Enterফর্মের কোথাও টিপুন , "পূর্ব" বা "পরবর্তী" উভয়ই জমা দেওয়া হবে না।

সুতরাং সিউডোকোড ব্যবহার করে আপনি নিম্নলিখিতগুলি করতে পারেন:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click

1
কখনই কোনও পরিস্থিতি হয় না (জেএস ব্যবহার না করে) যখন কোনও বোতামের ট্রিগার হয় না। আপনি ENTER টিপলে কোডের প্রথম বোতামটি ইভেন্টটি ধরবে। এইচটিএমএল-উদাহরণে এটি পূর্ব-বোতাম।
সাইমনসিমিটি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.