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




html computer code (16)

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

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

যখন ব্যবহারকারী এন্টার submitButton এবং অনুরোধটি সার্ভারে যায়, আপনি নিজের সার্ভার-সাইড কোডে 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

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

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

উদাহরণ:

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

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


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

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


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

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


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

<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

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

এটি করার জন্য কৌশলগুলি এখানে দুটি পৃষ্ঠা দেয়: 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)" />

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

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

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


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

এইভাবে Prev বোতামটি Next বোতামের বামে রয়েছে, তবে এইচটিএমএল কাঠামোর মধ্যে নেক্সটটি প্রথম আসে:

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


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

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


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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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

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


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

ভিজ্যুয়ালি এদিক ওদিক ঘুরিয়ে আনতে বাম এবং ডানদিকে ভাসান।


<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





submit-button