ปุ่มส่งหลายปุ่มในรูปแบบ HTML

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ปุ่ม แต่ปุ่ม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"สามารถเข้าถึงและปุ่มทั้งสองยังคงอยู่

— palotasb
แหล่งที่มา

23

โปรดอย่าทำเช่นนี้โดยไม่เปลี่ยนลำดับแท็บดังนั้นการกดปุ่มแท็บจะวนไปตามปุ่มต่างๆตามที่ปรากฏบนหน้าจอ

— Steve

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/… (ไม่ใช่ใน HTML5, HTML 4.01 การเปลี่ยนผ่าน / เข้มงวด XHTML 1.0 Strict) และผมไม่เห็นว่าทำไมการเปลี่ยนประเภทการป้อนข้อมูลจากsubmitไปbuttonจะดีกว่า คุณสามารถมีองค์ประกอบอินพุตชนิดส่งได้หลายแบบในรูปแบบเดียวโดยไม่มีปัญหา ฉันไม่เข้าใจจริงๆว่าทำไมคำตอบนี้จึงถูกยกระดับขึ้น

— Sk8erPeter

3

การมีอินพุตประเภท "ปุ่ม" ไม่ได้ดำเนินการกับแบบฟอร์ม คุณสามารถมี onclick หรืออะไรบางอย่างดังนั้นการดำเนินการฟังก์ชั่นอื่นนอกเหนือจากการกระทำแบบฟอร์ม "เริ่มต้น" (ซึ่งจะดำเนินการโดยการกดปุ่ม "ส่ง" -type) นั่นคือสิ่งที่ฉันกำลังมองหาและนั่นคือเหตุผลที่ฉัน upvote มัน ไม่สามารถพูดถึงคุณลักษณะ "ค่าเริ่มต้น" ไม่ใช่ส่วนหนึ่งของปัญหาของฉัน;) ขอบคุณสำหรับคำชี้แจงของคุณ

— Jonas

2

@ Sk8erPeter, @Jonas .... hmm .. ฉันสงสัยว่าdefaultคุณลักษณะนี้เป็นแอตทริบิวต์ระดับโลก แอตทริบิวต์ที่ระบุ .. ที่เกี่ยวข้องกับรัฐแจงนับ: w3.org/html/wg/drafts/html/master/... นอกเหนือจากจุดนั้น .. ปุ่มด้านข้างของคำตอบนี้ไม่ใช่คำตอบ .. มันเป็น ' ข้อเสนอแนะตามเงื่อนไข ' หรือแบบสอบถาม ( คำถามเอง )

— Brett Caswell

3

@ Jonas: ใช่type="button"ไม่ได้ส่งแบบฟอร์มtype="submit"แต่การเปลี่ยนชนิดของปุ่มเหล่านี้ไม่ใช่วิธีแก้ปัญหาอย่างแน่นอนเพราะปุ่มเหล่านี้ควรทำงานในลักษณะเดียวกัน - คำถามของ OP คือวิธีการทำปุ่ม "ถัดไป" เริ่มต้นสำหรับการกดปุ่ม Enter และมีทางออกที่เป็นไปได้ในคำตอบที่ยอมรับได้

— Sk8erPeter

4

@BrettCaswell: การเปลี่ยนประเภทของปุ่มเหล่านี้เป็นวิธีแก้ปัญหาที่ไม่ดี (ดูความคิดเห็นก่อนหน้าของฉัน) ไม่มีdefaultแอตทริบิวต์ที่ถูกต้องสำหรับinputแท็ก (ตามที่ฉันระบุไว้ก่อนหน้านี้) ใน HTML และเบราว์เซอร์ (ที่เป็นที่นิยม) จะไม่เน้นปุ่มที่มีแอตทริบิวต์นี้ซึ่งหมายความว่าไม่มีการใช้คุณสมบัตินี้ที่ไม่เป็นมาตรฐาน - ดังนั้นฉันจึงยังไม่รู้ สิ่งที่ @Wally Lawless พูดถึงและทำไมคำตอบนี้จึงเกินความจริง มีdefaultแอตทริบิวต์ที่ถูกต้องเพียงหนึ่งรายการที่แนะนำใน HTML5 แต่สำหรับ<track>แท็กเท่านั้น: 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คู่ของแบบฟอร์ม ตัวอย่างเช่นในASP Classic :

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

การอ้างอิง: การใช้ปุ่มส่งหลายปุ่มในแบบฟอร์มเดียว

— huseyint
แหล่งที่มา

26

นี่ไม่ใช่สิ่งที่ผู้ใช้ถาม ผู้ใช้ต้องการทราบวิธีการควบคุมปุ่มส่งในแบบฟอร์มที่เปิดใช้งานเมื่อกดถูกกดคือ ซึ่งเป็นปุ่มเริ่มต้น

— kosoant

20

ไม่ทำงานในแอปพลิเคชั่น I18n ที่คุณไม่รู้จักฉลากของปุ่ม

— Chris

ระบบหรือเทคโนโลยีโซลูชั่นใดที่เซิร์ฟเวอร์จะไม่รู้ว่าฉลากที่ใช้สำหรับปุ่มถัดไปและปุ่มย้อนกลับคืออะไร เซิร์ฟเวอร์ไม่ได้สร้างปุ่มถัดไปและปุ่มย้อนกลับตั้งแต่แรก? (ถ้าแปลจะถูกจัดการในฝั่งไคลเอ็นต์ที่ฉันจินตนาการเซิร์ฟเวอร์อาจไม่ทราบ แต่ผมไม่เคยได้ยินเรื่องนี้มาเพื่อใช้ HTML)

— จาค็อบ

คำตอบนี้หายไปอย่างสมบูรณ์คำถามอาจเป็นไปได้สำหรับคำถามที่แตกต่างกัน ทำไม upvotes มากมาย ??? ไม่ต้องพูดถึงว่าไม่ควรตรวจสอบฉลากของปุ่ม ... เรียกร้องให้เกิดปัญหามากมาย แม้แต่กรณีง่าย ๆ : "เราควรย่อให้สตริง 'ก่อนหน้า' จะทำลายฟังก์ชันการทำงานของเว็บไซต์ของคุณ

— Tylla

30

หากความจริงที่ว่าปุ่มแรกถูกใช้โดยค่าเริ่มต้นนั้นสอดคล้องกันในทุกเบราว์เซอร์ให้ใส่ปุ่มเหล่านั้นอย่างถูกต้องในซอร์สโค้ดแล้วใช้ CSS เพื่อเปลี่ยนตำแหน่งที่ชัดเจน

float พวกเขาไปทางซ้ายและขวาเพื่อสลับไปมารอบ ๆ ตัวอย่างเช่น

— Polsonby
แหล่งที่มา

18

บางครั้งโซลูชันที่ให้โดย @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>

— netiul
แหล่งที่มา

17

ฉันจะใช้ JavaScript เพื่อส่งแบบฟอร์ม ฟังก์ชั่นจะถูกเรียกใช้โดยเหตุการณ์ 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)" />

— Yaakov Ellis
แหล่งที่มา

2

จะเกิดอะไรขึ้นถ้า javascript ถูกปิดการใช้งาน?

— Jon Winstanley

2

คุณไม่ควรใช้ <! - and -> เพื่อแสดงความคิดเห็น JS แท็กเหล่านี้ไม่ใช่โทเค็นภาษา Javascript

— Marecky

2

@Marecky พวกเขาจะไม่แสดงความคิดเห็นกับ JS จะถูกละเว้นเมื่อวิเคราะห์เนื้อหาของ <script> ในเบราว์เซอร์ที่สนับสนุน <script> วันนี้พวกเขาไม่ต้องการจริงๆ แต่ในเบราว์เซอร์โบราณนี่คือแฮ็คที่เข้ากันได้เพื่อหลีกเลี่ยงสคริปต์ที่จะพิมพ์เป็นข้อความธรรมดา

— leemes

17

หากคุณต้องการให้มันทำงานเหมือนไดอะล็อกการติดตั้งเพียงให้ความสำคัญกับปุ่ม "ถัดไป" OnLoad

ด้วยวิธีนี้หากผู้ใช้เข้าชมReturnแบบฟอร์มจะส่งและดำเนินการต่อ หากพวกเขาต้องการกลับไปพวกเขาสามารถกดTabหรือคลิกที่ปุ่ม

— Scott Gottreu
แหล่งที่มา

2

พวกเขาหมายถึงใครบางคนกรอกแบบฟอร์มและความนิยมกลับมาในขณะที่ในฟิลด์ข้อความ

— Jordan Reiter

17

สิ่งนี้ไม่สามารถทำได้ด้วย HTML ล้วนๆ คุณต้องพึ่งพาจาวาสคริปต์สำหรับเคล็ดลับนี้

อย่างไรก็ตามหากคุณวางสองรูปแบบในหน้า HTML คุณสามารถทำได้

Form1 จะมีปุ่มก่อนหน้า

Form2 จะมีอินพุตของผู้ใช้ + ปุ่มถัดไป

เมื่อผู้ใช้กดEnterใน Form2 ปุ่มส่งถัดไปจะเริ่มทำงาน

— FlySwat
แหล่งที่มา

16

คุณสามารถทำได้ด้วย CSS

ใส่ปุ่มในมาร์คอัปด้วยNextปุ่มก่อนจากนั้นจึงPrevกดปุ่มในภายหลัง

จากนั้นใช้ CSS เพื่อจัดตำแหน่งให้ปรากฏตามที่คุณต้องการ

— ใคร
แหล่งที่มา

14

สิ่งนี้ทำงานได้โดยไม่มี 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>

Firefox, Opera, Safari และ Google Chrome ทำงานได้ทั้งหมด
เช่นเคย 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

ใจปุ่มย้อนกลับยังคงใช้งานได้!

— Jolyon
แหล่งที่มา

1

หากไม่มี javascript คุณจะไม่สามารถเปิดใช้งานปุ่ม "หน้าก่อนหน้า" ได้เนื่องจากปุ่ม type = "!

— riskop

ปัญหาเกี่ยวกับข้อเสนอแนะของคุณคือปุ่ม type = "button" จะไม่โพสต์แบบฟอร์มดังนั้นโดยทั่วไปจะไม่ทำอะไรเลยในขณะที่รุ่นที่สองที่มีสมอจะสร้าง GET แทน POST

— Tylla

12

หากคุณมีปุ่มที่ใช้งานหลายปุ่มในหน้าเดียวคุณสามารถทำสิ่งนี้:

ทำเครื่องหมายปุ่มแรกที่คุณต้องการเปิดใช้งานการ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>

ขยายตัวอย่างข้อมูล

— user1591131
แหล่งที่มา

11

การเปลี่ยนลำดับแท็บควรจะทำเพื่อให้สิ่งนี้สำเร็จ ง่าย ๆ เข้าไว้.

อีกตัวเลือกง่าย ๆ คือใส่ปุ่มย้อนกลับหลังปุ่มส่งในรหัส HTML แต่ลอยไปทางซ้ายเพื่อให้ปรากฏบนหน้าก่อนปุ่มส่ง

— Kenny Johnson
แหล่งที่มา

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

— jayu
แหล่งที่มา

ปัญหาคือการกดปุ่ม Enter ในฟิลด์ข้อความจะส่งแบบฟอร์มด้วยปุ่มส่งครั้งแรกไม่ใช่แบบที่ต้องการ (ตัวอย่างที่สองในตัวอย่าง) การค้นหาว่าใช้ปุ่มส่งแบบใดในการส่งแบบฟอร์มนั้นเป็นเรื่องง่ายและนั่นไม่ใช่คำถาม!

— riskop

ทำไมname="perv"?

— Peter Mortensen

10

อีกตัวเลือกง่าย ๆ คือใส่ปุ่มย้อนกลับหลังปุ่มส่งในโค้ด HTML แต่จะลอยไปทางซ้ายเพื่อให้ปรากฏบนหน้าก่อนปุ่มส่ง

การเปลี่ยนลำดับแท็บควรจะทำเพื่อให้สิ่งนี้สำเร็จ ง่าย ๆ เข้าไว้.

— ปีเตอร์มอร์เทนเซ่น
แหล่งที่มา

10

ครั้งแรกที่ฉันทำเรื่องนี้ขึ้นมาฉันได้แฮ็ค onclick () / JavaScript เมื่อตัวเลือกไม่ได้เป็น prev / next ที่ฉันยังชอบความเรียบง่าย มันจะเป็นเช่นนี้:

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

นอกจากนี้คุณยังสามารถกระชับขึ้นเล็กน้อยโดยใช้รหัสการดำเนินการตัวเลขเพื่อหลีกเลี่ยงการแยกสตริง แต่ถ้าคุณเล่นกับการแจกแจงรหัสจะอ่านง่ายแก้ไขและทำเอกสารด้วยตนเองได้น้อยกว่าและการแยกวิเคราะห์นั้นเล็กน้อย

— MiddleAgedMutantNinjaProgrammer
แหล่งที่มา

9

จาก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>

— nikkypx
แหล่งที่มา

9

นี่คือสิ่งที่ฉันได้ลอง:

คุณต้องแน่ใจว่าคุณได้ตั้งชื่อปุ่มต่าง ๆ
เขียน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();
}

— ซามูเอลมุจิชา
แหล่งที่มา

ปัญหาคือการกดปุ่ม Enter ในฟิลด์ข้อความจะส่งแบบฟอร์มด้วยปุ่มส่งครั้งแรกไม่ใช่แบบที่ต้องการ (ตัวอย่างที่สองในตัวอย่าง) การค้นหาว่าใช้ปุ่มส่งแบบใดในการส่งแบบฟอร์มนั้นเป็นเรื่องง่ายและนั่นไม่ใช่คำถาม!

— riskop

7

ฉันเจอคำถามนี้เมื่อพยายามหาคำตอบโดยทั่วไปในสิ่งเดียวกันโดยเฉพาะกับตัวควบคุม ASP.NET เมื่อฉันรู้ว่าปุ่ม ASP มีคุณสมบัติที่เรียกUseSubmitBehaviorว่าช่วยให้คุณสามารถกำหนดสิ่งที่ส่ง

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

ในกรณีที่มีใครบางคนกำลังมองหาวิธีที่ปุ่ม ASP.NET ที่จะทำมัน

— Barry Franklin
แหล่งที่มา

6

ด้วย JavaScript (ที่นี่ jQuery) คุณสามารถปิดการใช้งานปุ่ม prev ก่อนส่งแบบฟอร์ม

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

— Guillaumes
แหล่งที่มา

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>

ขยายตัวอย่างข้อมูล

— Gowtham Balusamy
แหล่งที่มา

1

ฉันแก้ไขปัญหาที่คล้ายกันมากด้วยวิธีนี้:

หากเปิดใช้งาน JavaScript (ในกรณีส่วนใหญ่ในปัจจุบัน) ดังนั้นปุ่มส่งทั้งหมดจะ " ลดระดับ " เป็นปุ่มที่โหลดหน้าเว็บผ่าน JavaScript (jQuery) คลิกที่กิจกรรมบนปุ่ม " ลดระดับ " ปุ่มพิมพ์จะได้รับการจัดการผ่านทาง JavaScript
หากไม่ได้เปิดใช้งาน JavaScript จะมีการส่งแบบฟอร์มไปยังเบราว์เซอร์ที่มีปุ่มส่งหลายปุ่ม ในกรณีนี้การกดปุ่มEnterบน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>

ขยายตัวอย่างข้อมูล

— riskop
แหล่งที่มา

0

คุณสามารถใช้Tabindexเพื่อแก้ไขปัญหานี้ การเปลี่ยนลำดับของปุ่มต่าง ๆ จะเป็นวิธีที่มีประสิทธิภาพมากขึ้นในการทำสิ่งนี้ให้สำเร็จ

เปลี่ยนลำดับของปุ่มและเพิ่มfloatค่าเพื่อกำหนดตำแหน่งที่ต้องการในHTMLมุมมองของคุณ

— Jyoti mishra
แหล่งที่มา

-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ใดที่หนึ่งบนแบบฟอร์มจะไม่มีการส่ง "prev" หรือ "next"

ดังนั้นการใช้ pseudocode คุณสามารถทำสิ่งต่อไปนี้:

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

— GateKiller
แหล่งที่มา

1

ไม่เคยมีสถานการณ์ (โดยไม่ใช้ js) เมื่อไม่มีการเรียกใช้ปุ่มใด ๆ หากคุณกด ENTER ปุ่มแรกในรหัสจะตรวจจับเหตุการณ์ ในตัวอย่าง html มันเป็นปุ่มก่อนหน้า

— SimonSimCity