متعددة تقدم أزرار في شكل HTML

08-06-2019
|

سؤال

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

المحلول

آمل أن يساعد هذا.أنا فقط تفعل خدعة 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>

تحرير: المزايا أكثر من غيرها من الاقتراحات:لا جافا سكريبت, يمكن الوصول إليها ، سواء أزرار تبقى type="submit"

نصائح أخرى

سيكون من الممكن بالنسبة لك لتغيير السابقة نوع زر في زر مثل هذا:

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

الآن على زر التالي سيكون الافتراضي ، بالإضافة إلى يمكنك أيضا إضافة default تنسب إلى ذلك أن المتصفح الخاص بك سيتم تسليط الضوء عليه مثل ذلك:

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

على أمل أن يساعد.

إعطاء الخاص بك تقدم أزرار نفس الاسم مثل هذا:

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

عندما يضغط المستخدم إدخال ، طلب يذهب إلى الملقم, يمكنك التحقق من قيمة submitButton على تعليمات برمجية من جانب الخادم الذي يحتوي على مجموعة من شكل name/value أزواج.على سبيل المثال في ASP الكلاسيكية:

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

المرجع: باستخدام متعددة تقدم أزرار على نموذج واحد

إن حقيقة أن أول استخدام زر افتراضي ينسجم مع جميع المتصفحات, لماذا لا تضع لهم الطريق الصحيح جولة في التعليمات البرمجية المصدر ، ثم استخدام CSS تغيير واضح المواقف ؟ float لهم اليسار واليمين إلى التبديل حول لهم بصريا ، على سبيل المثال.

إذا كنت حقا تريد أن تعمل مثل تثبيت الحوار ، ماذا عن مجرد إعطاء التركيز على زر "التالي" OnLoad.بهذه الطريقة إذا كان المستخدم يضرب العودة ، نموذج يقدم ويذهب إلى الأمام.إذا كانوا يريدون العودة يمكن أن تصل Tab أو انقر على زر.

في بعض الأحيان تقدم حلا @palotasb ليست كافية.هناك حالات الاستخدام حيث على سبيل المثال "فلتر" زر إرسال يوضع فوق أزرار مثل "السابق" و "التالي".لقد وجدت حلا لهذه: نسخ زر الإرسال الذي يحتاج إلى قانون الافتراضي زر إرسال في خفية div ووضعه داخل شكل فوق أي زر إرسال.من الناحية الفنية سيتم تقديمه من قبل مختلف الزر عند الضغط على 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>

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

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

Form1 قد الزر السابق.

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

عندما يضغط المستخدم أدخل في Form2 التالي زر النار.

يمكنك أن تفعل ذلك مع CSS.

وضع الأزرار في العلامات مع Next زر أولا ثم Prev زر بعد ذلك.

ثم استخدام CSS يمكنها أن تظهر بالطريقة التي تريدها.

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

هنا نوعان من الصفحات التي تعطي التقنيات على كيفية القيام بذلك: 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)" />

كيفن ،

هذا يعمل بدون جافا سكريبت أو 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>

Firefox, Opera, Safari, Google Chrome من كل عمل.
كما هو الحال دائما ، أي هو المشكلة.

هذا الإصدار يعمل عندما تم تشغيل جافا سكريبت على:

<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 مع جافا سكريبت إيقاف.
فتذكروا, زر العودة لا يزال يعمل!

إذا كان لديك العديد من النشطة أزرار على صفحة واحدة ثم يمكنك أن تفعل شيئا مثل هذا:

بمناسبة أول زر تريد يطلق على أدخل بضغطة كما defaultbutton على شكل.على الزر الثاني المنتسبين إلى 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>

ويساعد هذا الأمل.

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

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

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

نضع اسم كل تقدم أزرار نفسه -- "السابق" الفرق الوحيد هو value سمة فريدة من نوعها مع القيم.عندما نقوم بإنشاء البرنامج النصي هذه القيم الفريدة سوف تساعدنا على معرفة أي من تقدم أزرار الضغط.

والكتابة follwing الترميز:

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

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

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

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

هذا هو ما كنت قد حاولت الخروج: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>

في PHP ،

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

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

}

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

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

إذا كان المستخدم وكيل يدعم السماح للمستخدم إرسال نموذج ضمنا (على سبيل المثال ، في بعض المنابر ضرب مفتاح "enter" في حين نص المجال تركز ضمنا النموذج)...

وجود المقبل المدخلات تكون 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>

جئت عبر هذا السؤال عندما تحاول أن تجد إجابة على أساسا نفس الشيء ، فقط مع asp.net ضوابط ، عندما اكتشفت أن asp زر له خاصية تسمى UseSubmitBehavior الذي يسمح لك تعيين واحد تقديم.

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

فقط في حالة شخص ما يبحث عن asp.net زر طريقة للقيام بذلك.

مع جافا سكريبت (هنا مسج), يمكنك تعطيل زر السابق قبل تقديم النموذج.

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

لقد حللت مشابهة جدا المشكلة في هذه الطريقة:

إذا javascript يتم تمكين (في معظم الحالات في الوقت الحاضر) ثم كل تقدم أزرار "المتدهورة"أن الأزرار في تحميل الصفحة عبر javascript (مسج).انقر فوق الأحداث على "المتدهورة"زر كتبته أزرار يتم التعامل أيضا عن طريق javascript.
إذا 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>

جرب هذا..!

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

يمكنك استخدام Tabindex لحل هذه المشكلة أيضا تغيير ترتيب زر سيكون أكثر وسيلة فعالة لتحقيق ذلك.تغيير ترتيب زر add float القيم لتعيين المطلوب موقف كنت تريد أن تظهر في 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>

إذا كنت انقر على "الصفحة السابقة" قيمة "السابق" سيقدم.إذا كنت انقر على "الصفحة التالية" قيمة "التالي" سوف تكون المقدمة.

إذا ومع ذلك ، يمكنك الضغط على enter في مكان ما على شكل لا "السابق" و "التالي" سوف تكون المقدمة.

وذلك باستخدام البرمجية الزائفة يمكن القيام بما يلي:

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

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow