example এক HTML ফর্ম একাধিক জমা বাটন




html computer code (19)

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

উদাহরণ:

<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 ব্যবহার করতে হবে?


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

<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>


পূর্ববর্তী বোতামের ধরনটি বাছাইয়ের মতো একটি বোতামে পরিবর্তন করা আপনার পক্ষে সম্ভব হবে:

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

এখন পরবর্তী বোতামটি ডিফল্ট হবে, প্লাস এছাড়াও আপনি এতে default বৈশিষ্ট্য যুক্ত করতে পারেন যাতে আপনার ব্রাউজার এটির মতো হাইলাইট করবে:

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

আশা করি এইটি কাজ করবে.


https://html.spec.whatwg.org/multipage/forms.html#implicit-submission থেকে

একটি ফর্ম উপাদান এর ডিফল্ট বোতাম প্রথম অর্ডার বাটন যার আকার ফর্ম ফর্ম উপাদান।

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

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

<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>

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

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

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

কাজ উদাহরণ:

<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>


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

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

শুধু যদি কেউ এটি করার জন্য ASP.net বাটন উপায় খুঁজছেন হয়।


আমি ফর্ম জমা দিতে জাভাস্ক্রিপ্ট ব্যবহার করব। ফাংশনটি ফর্ম উপাদানটির অনকেপেশ ইভেন্ট দ্বারা ট্রিগার করা হবে এবং এন্টার কী নির্বাচন করা হয়েছে তা সনাক্ত করবে। এই ক্ষেত্রে যদি, এটি ফর্ম জমা দিতে হবে।

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

<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)" />

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

এবং follwing কোডিং লিখুন:

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

কেভিন, এই বিশুদ্ধ এইচটিএমএল সঙ্গে সম্পন্ন করা যাবে না। আপনি এই কৌতুক জন্য জাভাস্ক্রিপ্ট উপর নির্ভর করতে হবে।

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

ফর্ম 1 পূর্ববর্তী বাটন আছে।

Form2 কোন ব্যবহারকারী ইনপুট + পরবর্তী বোতাম থাকবে।

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


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

এভাবে পূর্ববর্তী বোতামটি পরবর্তী বোতাম থেকে বাদ দেওয়া হয় তবে পরবর্তীতে এইচটিএমএল কোডে পরবর্তী আসে:

.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"


যদি আপনি সত্যিই এটি একটি ইনস্টল ডায়ালগের মতো কাজ করতে চান তবে কেবল "পরবর্তী" বোতাম OnLoad এ ফোকাস দেওয়ার বিষয়ে কী। ব্যবহারকারী রিটার্ন হিট করে যেভাবে, ফর্ম জমা এবং এগিয়ে যায়। তারা যদি ফিরে যেতে চায় তবে তারা ট্যাবটি চাপতে বা বাটনে ক্লিক করতে পারে।


এটা সিএসএস দিয়ে কাজ করতে পারেন

পরবর্তী বোতামটি প্রথমে মার্কআপে রাখুন, তারপরে পূর্ববর্তী বোতামটি পরবর্তী।

তারপরে সিএসএসটি ব্যবহার করুন যাতে আপনি চান সেই ভাবে প্রকাশ করতে পারেন


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

<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();

}

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

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

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

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

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

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

রেফারেন্স: একটি একক ফর্ম একাধিক জমা বাটন ব্যবহার করে


আপনি এই সমস্যা সমাধানের জন্য Tabindex ব্যবহার করতে পারেন, এছাড়াও বাটন ক্রম পরিবর্তন এই অর্জন করার আরো কার্যকর উপায় হবে। বোতামের আদেশ পরিবর্তন করুন এবং আপনার HTML ভিউতে আপনি যে পছন্দসই অবস্থানটি প্রদর্শন করতে চান তা বরাদ্দ করতে float মান যোগ করুন।


কেভিন,

এটি সর্বাধিক ব্রাউজারগুলিতে জাভাস্ক্রিপ্ট বা CSS ছাড়া কাজ করে:

<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>

ফায়ারফক্স, অপেরা, সাফারি, গুগল ক্রোম সব কাজ।
সবসময় হিসাবে, IE সমস্যা হয়।

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

<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>

সুতরাং এই সমাধান ত্রুটি হল:
আপনি জাভাস্ক্রিপ্ট বন্ধ সঙ্গে IE ব্যবহার করে পূর্ববর্তী পাতা কাজ করে না।
মনে রেখো, ব্যাক বোতামটি এখনও কাজ করে!


কখনও কখনও @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>

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

<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 "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click

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

ফর্মের ডিফল্ট বাটন হিসাবে এন্টার কীপ্রেস এ আপনি ট্রিগার করতে চান এমন প্রথম বোতামটি চিহ্নিত করুন। দ্বিতীয় বোতামে এটি কীবোর্ডে ব্যাকস্পেস বোতামে যুক্ত করুন। ব্যাকস্পেস ইভেন্ট কোড 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>

আশাকরি এটা সাহায্য করবে.







submit-button