نماذج - إرسال أزرار متعددة في نموذج HTML




نماذج html جاهزة (16)

آمل أن يساعد هذا. أنا فقط تفعل خدعة float جي أزرار على اليمين.

بهذه الطريقة ، يكون الزر Prev يسارًا من الزر " Next ، لكن Next يأتي أولاً في بنية HTML:

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

استفد من الاقتراحات الأخرى: لا يوجد كود JavaScript ، يمكن الوصول إليه ، ويظل كلا الزرين type="submit" .

لنفترض أنك قمت بإنشاء معالج في نموذج 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 للقيام بذلك؟


أحيانًا لا يكون الحل المقدم بواسطةpalotasb كافيًا. هناك حالات استخدام حيث يتم وضع زر إرسال "تصفية" على سبيل المثال فوق أزرار مثل "التالي والسابق". لقد وجدت حلاً لذلك: انسخ زر الإرسال الذي يجب أن يكون بمثابة زر الإرسال الافتراضي في قسم مخفي ووضعه داخل النموذج أعلى أي زر إرسال آخر. من الناحية الفنية ، سيتم تقديمه بواسطة زر مختلف عند الضغط على مفتاح Enter بدلاً من عند النقر على زر التالي المرئي. ولكن بما أن الاسم والقيمة متماثلان ، فلا يوجد اختلاف في النتيجة.

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

أود استخدام JavaScript لإرسال النموذج. سيتم تشغيل الوظيفة بواسطة حدث OnKeyPress لعنصر النموذج وستكتشف ما إذا كان مفتاح Enter محددًا أم لا. إذا كان هذا هو الحال ، فسوف يقدم النموذج.

فيما يلي صفحتان تقدمان أساليب حول كيفية القيام بذلك: 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)" />

إذا كان لديك عدة أزرار نشطة في صفحة واحدة ، فيمكنك القيام بشيء من هذا القبيل:

قم بتمييز الزر الأول الذي تريد تشغيله في مفتاح الضغط على المفتاح enter باعتباره الزر الافتراضي في النموذج. بالنسبة للزر الثاني ، قم بربطه بزر Backspace على لوحة المفاتيح. كود حدث Backspace هو 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>


إذا كنت تريد فقط أن تعمل مثل مربع حوار التثبيت ، فقط ركز على زر "التالي" OnLoad.

وبهذه الطريقة إذا قام المستخدم بالضغط على Return ، فإن النموذج يرسل ويمضي قدمًا. إذا أرادوا العودة ، فيمكنهم الضغط على Tab أو النقر فوق الزر.


باستخدام JavaScript (هنا 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 />

جرب هذا..!

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


في المرة الأولى التي واجهت فيها هذا الأمر ، خرجت باختراق onclick () / جافا سكريبت عندما لا تكون الخيارات سائدة / لا أزال أحبها بسبب بساطتها. وغني مثل هذا:

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

يمكنك أيضًا تشديد هذا الأمر قليلاً باستخدام أكواد التشغيل الرقمية لتجنب تحليل السلسلة ، ولكن ما لم تلعب مع التعدادات ، تكون الشفرة أقل قابلية للقراءة ، قابلة للتعديل ، وتوثيق ذاتي ويكون التحليل بسيطًا ، على أي حال.


لا يمكن القيام بذلك باستخدام HTML خالص. يجب أن تعتمد على JavaScript لهذه الخدعة.

ومع ذلك ، إذا وضعت نموذجين على صفحة HTML ، فيمكنك القيام بذلك.

سيكون Form1 الزر السابق.

سيكون Form2 أي مدخلات المستخدم + الزر التالي.

عندما يضغط المستخدم على إدخال في Form2 ، فإن زر إرسال التالي سيطلق النار.


من https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

الزر الافتراضي لعنصر النموذج هو زر الإرسال الأول في ترتيب الشجرة والذي يكون مالك النموذج هو عنصر النموذج.

إذا كان وكيل المستخدم يدعم السماح للمستخدم بإرسال نموذج ضمنيًا (على سبيل المثال ، في بعض الأنظمة الأساسية التي تضغط على مفتاح "الإدخال" بينما يركز حقل النص على إرسال النموذج ضمنيًا) ...

وجود الإدخال التالي يكون type = "submit" وتغيير الإدخال السابق إلى type = "button" يجب أن يعطي السلوك الافتراضي المطلوب.

<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. تحتاج إلى التأكد من إعطاء الأزرار أسماء مختلفة
  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>

في PHP ،

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

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

يجب أن يكون تغيير ترتيب علامات التبويب كل ما يتطلبه الأمر لإنجاز هذا. أبقيها بسيطة.

هناك خيار بسيط آخر يتمثل في وضع الزر الخلفي بعد زر الإرسال في كود HTML ولكن يتم تعويمه إلى اليسار حتى يظهر على الصفحة قبل زر الإرسال.


يعمل هذا بدون JavaScript أو 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>

فايرفوكس وأوبرا وسفاري وجوجل كروم كلها تعمل.
كما هو الحال دائمًا ، فإن Internet Explorer هو المشكلة.

يعمل هذا الإصدار عند تشغيل JavaScript:

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

إذن الخلل في هذا الحل هو:

الصفحة السابقة لا تعمل إذا كنت تستخدم Internet Explorer مع إيقاف تشغيل JavaScript.

مانع لك ، لا يزال الزر الخلفي يعمل!


يمكنك استخدام Tabindex لحل هذه المشكلة. تغيير ترتيب الأزرار أيضًا سيكون طريقة أكثر فاعلية لتحقيق ذلك.

قم بتغيير ترتيب الأزرار وأضف قيم float لتعيين الموضع المطلوب الذي تريد إظهاره في عرض HTML .


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

حافظ على اسم جميع أزرار الإرسال كما هي - "prev".

الفرق الوحيد هو سمة 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