ปุ่มส่งเริ่มต้นบนฟอร์ม HTML ได้รับการพิจารณาอย่างไร

210

หากมีการส่งแบบฟอร์ม แต่ไม่มีปุ่มเฉพาะเช่น

โดยกด Enter
ใช้HTMLFormElement.submit()ใน JS

เบราว์เซอร์ควรกำหนดอย่างไรว่าจะใช้ปุ่มใดในการส่งหลายปุ่มเพื่อใช้เป็นปุ่มกด

สิ่งนี้มีความสำคัญในสองระดับ:

การเรียกonclickตัวจัดการเหตุการณ์ที่แนบกับปุ่มส่ง
ข้อมูลที่ส่งกลับไปยังเว็บเซิร์ฟเวอร์

การทดลองของฉันจนถึงขณะนี้ได้แสดงให้เห็นว่า:

เมื่อกดEnter, Firefox, Opera และ Safari จะใช้ปุ่มส่งครั้งแรกในแบบฟอร์ม
เมื่อกดEnterIE จะใช้ปุ่มส่งครั้งแรกหรือไม่มีเลยขึ้นอยู่กับเงื่อนไขที่ฉันไม่สามารถหาได้
เบราว์เซอร์ทั้งหมดนี้ไม่มีการใช้เลยสำหรับการส่ง JS

มาตรฐานพูดอะไร

ถ้ามันจะช่วยได้นี่คือรหัสทดสอบของฉัน (PHP นั้นเกี่ยวข้องกับวิธีการทดสอบของฉันเท่านั้นไม่ใช่เพื่อคำถามของฉันเอง)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<body>

<h1>Get</h1>
<dl>
<?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<h1>Post</h1>
<dl>
<?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
    <input type="text" name="method" />
    <input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
    <input type="text" name="stuff" />
    <input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
    <input type="button" value="submit" onclick="document.theForm.submit();" />
</form>

</body></html>

— สจ๊วต
แหล่งที่มา

115

หากคุณส่งแบบฟอร์มผ่าน Javascript ( formElement.submit()หรือสิ่งใด ๆ ที่เทียบเท่ากัน) จะไม่มีการพิจารณาปุ่มใด ๆ ที่ถือว่าสำเร็จและไม่มีค่าใด ๆ รวมอยู่ในข้อมูลที่ส่ง (โปรดทราบว่าหากคุณส่งแบบฟอร์มโดยใช้submitElement.click()การส่งที่คุณมีการอ้างอิงถึงจะถือว่าใช้งานอยู่ซึ่งไม่ได้อยู่ภายใต้การส่งคำถามของคุณเนื่องจากที่นี่ปุ่มส่งไม่มีความชัดเจน แต่ฉันคิดว่าฉันจะรวมไว้ด้วย สำหรับผู้ที่อ่านส่วนแรกและสงสัยว่าจะทำอย่างไรให้ปุ่มส่งสำเร็จผ่านการส่งแบบฟอร์ม JS แน่นอนตัวจัดการ onsubmit ของแบบฟอร์มจะยังคงยิงแบบนี้ในขณะที่พวกเขาจะไม่ผ่านform.submit()นั่นคือกาต้มน้ำปลาอีกตัว ...

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

ฉันเชื่อว่า Internet Explorer เลือกปุ่มส่งที่ปรากฏขึ้นครั้งแรกในแหล่งที่มา ฉันรู้สึกว่า Firefox และ Opera เลือกปุ่มที่มี tabindex ต่ำสุดกลับไปสู่การกำหนดครั้งแรกหากไม่มีการกำหนดอะไรอีก นอกจากนี้ยังมีความยุ่งยากบางอย่างเกี่ยวกับว่าการส่งมีแอตทริบิวต์ค่า IIRC ที่ไม่ใช่ค่าเริ่มต้นหรือไม่

จุดที่ต้องนำออกไปคือไม่มีมาตรฐานที่กำหนดไว้สำหรับสิ่งที่เกิดขึ้นที่นี่และเป็นที่ต้องการทั้งหมดของเบราว์เซอร์ - เท่าที่เป็นไปได้ในสิ่งที่คุณกำลังทำอยู่พยายามหลีกเลี่ยงการพึ่งพาพฤติกรรมใด ๆ โดยเฉพาะ หากคุณต้องรู้จริง ๆ คุณอาจพบพฤติกรรมของเบราว์เซอร์เวอร์ชันต่าง ๆ แต่เมื่อฉันตรวจสอบในขณะนี้กลับมีเงื่อนไขที่ค่อนข้างซับซ้อน (ซึ่งแน่นอนอาจเปลี่ยนแปลงกับเบราว์เซอร์เวอร์ชันใหม่) และฉันแนะนำ คุณต้องหลีกเลี่ยงถ้าเป็นไปได้!

— Andrzej Doyle
แหล่งที่มา

1

อีกครั้ง 2: คำถามพื้นฐานของฉันคือมีอะไรในสเป็คใด ๆ เกี่ยวกับผลกระทบของ "ถ้าเบราว์เซอร์มีวิธีการส่งแบบฟอร์มโดยไม่ระบุการควบคุมการส่ง ... " แต่ฉันรวบรวมจากคำตอบของเดวิดว่าไม่มี ประเด็นของฉันเกี่ยวกับ IE คือบางครั้งการกด Enter ส่งแบบฟอร์มและไม่ได้ตั้งค่าปุ่มส่งใด ๆ ผลที่ตามมาคือถ้าคุณมีหลายรูปแบบที่ส่งไปยังสคริปต์เดียวกันคุณไม่สามารถพึ่งพาปุ่มส่งเพื่อแยกความแตกต่าง สิ่งนี้เกิดขึ้นในโครงการที่ฉันกำลังทำอยู่

— Stewart

1

ส่วนวงเล็บย่อหน้าแรกที่มีประโยชน์มาก - ขอบคุณ

— rbassett

63

HTML 4 ไม่ได้ทำให้ชัดเจน ร่างการทำงาน HTML5 ปัจจุบันระบุว่าปุ่มส่งแรกจะต้องเป็นค่าเริ่มต้น :

formปุ่มเริ่มต้นขององค์ประกอบเป็นครั้งแรกที่ปุ่มส่งใน การสั่งซื้อต้นไม้ที่มีการใช้รูปแบบคือการที่ formองค์ประกอบ

หากตัวแทนผู้ใช้รองรับการอนุญาตให้ผู้ใช้ส่งแบบฟอร์มโดยปริยาย (ตัวอย่างเช่นในบางแพลตฟอร์มที่กดปุ่ม "Enter" ในขณะที่ฟิลด์ข้อความเน้นการส่งแบบฟอร์มโดยปริยาย) จากนั้นให้ทำแบบฟอร์มที่ปุ่มเริ่มต้นมีการเปิดใช้งานที่กำหนด ลักษณะการทำงานต้องทำให้ตัวแทนผู้ใช้ เรียกใช้ขั้นตอนการเปิดใช้งานการคลิกสังเคราะห์บน ปุ่มเริ่มต้นนั้น

— เควนติน
แหล่งที่มา

ตกลงนั่นคือสิ่งที่ควรทำ ฉันสามารถใช้?

— Pacerier

ฉันดีใจที่เห็น "การส่งโดยนัย" ใน HTML5

— Clint Pachl

61

Andrezj สวยมากจับมัน ... แต่นี่เป็นวิธีแก้ปัญหาข้ามเบราว์เซอร์ที่ง่าย

ใช้แบบฟอร์มนี้:

<form>
    <input/>
    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>

    <button type="submit" value="default action"/>
</form>

และ refactor นี้:

<form>
    <input/>

    <button style="overflow: visible !important; height: 0 !important; width: 0 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; display: block !important;" type="submit" value="default action"/>

    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>
    <button type="submit" value="still another non-default action"/>

    <button type="submit" value="default action"/>
</form>

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

น่าเสียดายเพียงเพิ่มรูปแบบการแสดงผล: ไม่มี; จะไม่ทำงานเพราะสเป็ค W3C บ่งชี้ว่าองค์ประกอบที่ซ่อนอยู่ใด ๆ ควรได้รับการยกเว้นจากการโต้ตอบของผู้ใช้ ดังนั้นซ่อนไว้ในสายตาธรรมดาแทน!

ข้างต้นเป็นตัวอย่างของวิธีการแก้ปัญหาที่ฉันลงเอยด้วยการผลิต การกดปุ่ม Enter จะทำให้เกิดการส่งแบบฟอร์มเริ่มต้นเป็นพฤติกรรมตามที่คาดไว้แม้ว่าจะมีค่าอื่นที่ไม่ใช่ค่าเริ่มต้นอยู่และนำหน้าปุ่มส่งเริ่มต้นใน DOM โบนัสสำหรับการโต้ตอบของเมาส์ / แป้นพิมพ์กับอินพุตของผู้ใช้อย่างชัดเจนในขณะที่หลีกเลี่ยงตัวจัดการจาวาสคริปต์

หมายเหตุ: การแท็บผ่านฟอร์มจะไม่แสดงโฟกัสสำหรับองค์ประกอบภาพใด ๆ แต่จะยังคงทำให้ปุ่มที่มองไม่เห็นถูกเลือก เพื่อหลีกเลี่ยงปัญหานี้เพียงตั้งค่าแอตทริบิวต์ tabindex ตามนั้นและละเว้นแอตทริบิวต์ tabindex บนปุ่มส่งที่มองไม่เห็น แม้ว่ามันอาจดูเหมือนไม่เหมาะสมที่จะส่งเสริมสไตล์เหล่านี้เป็น! สำคัญ แต่ก็ควรป้องกันไม่ให้เฟรมเวิร์กหรือรูปแบบปุ่มที่มีอยู่ขัดขวางการแก้ไขนี้ นอกจากนี้รูปแบบอินไลน์เหล่านั้นเป็นรูปแบบที่ไม่ดีอย่างแน่นอน แต่เรากำลังพิสูจน์แนวคิดที่นี่ ... ไม่ได้เขียนรหัสการผลิต

— เจมส์
แหล่งที่มา

5

ขอบคุณ สะดุดกับจอแสดงผล: ไม่มีปัญหาเช่นกัน แทนการลดปุ่มที่คุณยังสามารถย้ายออกจากหน้าโดย surronding <div style="position: fixed; left: -1000px; top: -1000px />ด้วย สิ่งที่น่ากังวลอีกข้อหนึ่ง: เพียงแค่ย่อเล็กสุดหรือย้ายปุ่มออกจากโฟลว์เพจด้วย CSS อาจทำให้เกิดปัญหาเกี่ยวกับ WAI เนื่องจากโปรแกรมอ่านหน้าจอจะยังคงเห็นปุ่มเริ่มต้น

— Stefan Haberl

2

ขอบคุณ @James สำหรับคำตอบโดยละเอียดนี้

— นาธาน

1

สิ่งนี้ใช้ได้กับฉันขอบคุณ ฉันต้องเพิ่มสิ่งนี้สำหรับขอบปุ่ม: ไม่มี; ที่จะทำให้มันหายไปอย่างไม่เป็น

— ระเบียบ

4

คุณสามารถตั้งค่าแอตทริบิวต์ tabindex ของปุ่มที่ซ่อนเป็น -1

— tvanc

2

มีอะไรที่<input/>นั่นเพื่อ?

— Sz.

16

ฉันคิดว่าโพสต์นี้จะช่วยได้ถ้ามีคนต้องการทำกับ jQuery:

http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/

ทางออกพื้นฐานคือ:

$(function() {
    $("form input").keypress(function (e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $('input[type=submit].default').click();
        return false;
    } else {
        return true;
    }
    });
});

และอีกอย่างที่ฉันชอบคือ:

jQuery(document).ready(function() {
$("form input, form select").live('keypress', function (e) {
if ($(this).parents('form').find('button[type=submit].default, input[type=submit].default').length <= 0)
return true;

if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(this).parents('form').find('button[type=submit].default, input[type=submit].default').click();
return false;
} else {
return true;
}
});
});

— Rodrigo Caballero
แหล่งที่มา

jQuery.Eventมี.wichแอตทริบิวต์ของมันเสมอ ยังไม่จำเป็นต้องถอยกลับไปที่ DOM .keyCode(หรือ.charCodeสำหรับเรื่องนั้น)

— Arjan

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

— soletan

ฉันใช้การกดปุ่มลงแทนการกดปุ่ม (หลีกเลี่ยงการรอการกดปุ่ม) และฉันเพิ่มe.preventDefault();ลงในจุดเริ่มต้นของฟังก์ชั่นนี้เพื่อหลีกเลี่ยงการใช้ปุ่มเริ่มต้น "ของจริง" ทำงานได้ดีจริงๆ

— Matt Roy

6

ฉันมีแบบฟอร์มที่มีปุ่มส่ง 11 ปุ่มและจะใช้ปุ่มส่งแรกเสมอเมื่อผู้ใช้กด Enter ฉันอ่านที่อื่นว่าไม่ใช่ความคิดที่ดี (การปฏิบัติที่ไม่ดี) ที่จะมีปุ่มส่งมากกว่าหนึ่งปุ่มในแบบฟอร์มและวิธีที่ดีที่สุดในการทำเช่นนี้คือมีปุ่มที่คุณต้องการเป็นค่าเริ่มต้นเนื่องจากปุ่มส่งเฉพาะบนฟอร์ม ปุ่มอื่น ๆ ควรทำไว้ใน "TYPE = BUTTON" และมีการเพิ่มกิจกรรม onClick ที่เรียกรูทีนการส่งของคุณเองใน Javascript บางสิ่งเช่นนี้: -

<SCRIPT Language="JavaScript">
function validform()
{
  // do whatever you need to validate the form, and return true or false accordingly
}

function mjsubmit()
{
  if (validform()) { document.form1.submit(); return true;}
  return false;
}
</SCRIPT>
<INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue='button1'; return mjsubmit();">
<INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue='button2'; return mjsubmit();">
<INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue='button3'; return validform();">
<INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue='button4'; return mjsubmit();">

ที่นี่ button3 เป็นค่าเริ่มต้นและแม้ว่าคุณจะส่งแบบฟอร์มด้วยปุ่มอื่น ๆ ทางโปรแกรมรูทีน mjsubmit จะตรวจสอบความถูกต้อง HTH

— กราฟิก
แหล่งที่มา

19

ความคิดที่ไม่ดี แบบฟอร์มของคุณจะไม่ทำงานเมื่อปิดการใช้งาน JS JS ควรใช้อย่างสงบเสงี่ยม

— BalusC

7

เบราว์เซอร์น้อยมากที่มีการปิด JS โดยปริยายแม้กระทั่งบน iPods! ในรูปแบบที่ฉันอ้างถึง JS off จะทำให้มันไร้ประโยชน์! บานพับมากในการเรียกใช้ JS

— กราฟิก

7

ถูกปิดใช้งานโดยค่าเริ่มต้นหรือไม่ผู้ที่ปิดการใช้งาน JS ไม่ควรเปิดใช้งานเพื่อหลีกเลี่ยงปัญหาเล็ก ๆ น้อย ๆ เช่นนี้

— สจ๊วต

2

แบบฟอร์มใดมีปุ่มส่ง 11 แบบ? ( อยากรู้อยากเห็น )

— Ben

2

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

— Samantha Branham

6

ตอนนี้สามารถแก้ไขได้โดยใช้flexbox:

HTML

<form>
    <h1>My Form</h1>
    <label for="text">Input:</label>
    <input type="text" name="text" id="text"/>

    <!-- Put the elements in reverse order -->
    <div class="form-actions">
        <button>Ok</button> <!-- our default action is first -->
        <button>Cancel</button>
    </div>
</form>

CSS

.form-actions {
    display: flex;
    flex-direction: row-reverse; /* reverse the elements inside */
}

ชี้แจง
การใช้กล่องดิ้นเราสามารถกลับคำสั่งขององค์ประกอบในภาชนะที่ใช้display: flexโดยยังมีการใช้กฎ CSS flex-direction: row-reverseนี้: สิ่งนี้ไม่จำเป็นต้องใช้ CSS หรือองค์ประกอบที่ซ่อนอยู่ สำหรับเบราว์เซอร์รุ่นเก่าที่ไม่สนับสนุน flexbox พวกเขายังคงได้รับการแก้ไข แต่องค์ประกอบจะไม่กลับ

การสาธิต
http://codepen.io/Godwin/pen/rLVKjm

— วิน
แหล่งที่มา

2

ฉันต่อสู้กับคำถามเดียวกันเนื่องจากฉันมีปุ่มส่งตรงกลางซึ่งเปลี่ยนเส้นทางส่งไปยังหน้าอื่นเช่น:

<button type="submit" onclick="this.form.action = '#another_page'">More</button>

เมื่อผู้ใช้กดปุ่ม Enter ปุ่มนี้ถูกคลิกแทนปุ่มส่งอื่น

ดังนั้นฉันจึงทำการทดสอบแบบดั้งเดิมโดยสร้างจากด้วยปุ่มส่งหลายปุ่มและตัวเลือกการมองเห็นที่แตกต่างกันและเหตุการณ์ onclick แจ้งเตือนว่ามีการคลิกปุ่มใด: https://jsfiddle.net/aqfy51om/1/

เบราว์เซอร์และระบบปฏิบัติการที่ฉันใช้ในการทดสอบ:

WINDOWS

Google Chrome 43 (c'mon google: D)
Mozilla Firefox 38
Internet Explorer 11
Opera 30.0

OSX

Google Chrome 43
Safari 7.1.6

เบราว์เซอร์เหล่านี้ส่วนใหญ่คลิกปุ่มแรกแม้จะมีตัวเลือกการมองเห็นที่ใช้งานได้ยกเว้น IE และ Safariซึ่งคลิกปุ่มที่สามซึ่งเป็นที่ "มองเห็น" ภายใน "คอนเทนเนอร์" ซ่อน ":

<div style="width: 0; height: 0; overflow: hidden;">
    <button type="submit" class="btn btn-default" onclick="alert('Hidden submit button #3 was clicked');">Hidden submit button #3</button>
</div>

ดังนั้นข้อเสนอแนะของฉันซึ่งฉันจะใช้กับตัวเองคือ:

หากฟอร์มของคุณมีปุ่มส่งหลายปุ่มที่มีความหมายแตกต่างกันให้ใส่ปุ่มส่งพร้อมกับการดำเนินการเริ่มต้นที่จุดเริ่มต้นของฟอร์มซึ่งก็คือ:

มองเห็นได้อย่างเต็มที่
ห่อในภาชนะด้วย style="width: 0; height: 0; overflow: hidden;"

แก้ไข ตัวเลือกอื่นอาจเป็นการชดเชยปุ่ม (ยังอยู่ที่จุดเริ่มต้นของจาก) style="position: absolute; left: -9999px; top: -9999px;"เพิ่งลองใช้งานใน IE - ใช้งานได้ แต่ฉันไม่รู้ว่าจะมีอะไรผิดพลาดอีกยกตัวอย่างเช่นการพิมพ์ ..

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

1

จากความคิดเห็นของคุณ:

ผลที่ตามมาคือถ้าคุณมีหลายรูปแบบที่ส่งไปยังสคริปต์เดียวกันคุณไม่สามารถพึ่งพาปุ่มส่งเพื่อแยกความแตกต่าง

ฉันวางลง<input type="hidden" value="form_name" />ในแต่ละรูปแบบ

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

— ไรอันฟลอเรนซ์
แหล่งที่มา

แน่นอน แต่นั่นทำให้เกิดคำถามนี้: stackoverflow.com/questions/541869/…

— Stewart

1

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

$('form input').keypress(function(e){

    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)){ $(e.target).closest('form').submit(); return false; }
    else return true;

});

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

ง่ายและแก้ไขปัญหา

— toddmo

1

แปลกที่ปุ่มแรกใส่ไปเสมอที่ปุ่มแรกโดยไม่คำนึงถึงสามารถมองเห็นได้หรือไม่เช่นใช้ show/hide()jQuery การเพิ่มคุณสมบัติ.attr('disabled', 'disabled')ป้องกันการรับปุ่มส่งสมบูรณ์ มันเป็นปัญหาเช่นเมื่อปรับการมองเห็นปุ่มแทรก / แก้ไข + ลบในกล่องโต้ตอบบันทึก ฉันพบว่าการแฮ็กน้อยและการวางเรียบง่ายแก้ไขต่อหน้าส่วนแทรก

<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="insert">Insert</button>
<button type="submit" name="action" value="delete">Delete</button>

และใช้รหัสจาวาสคริปต์:

$("#formId button[type='submit'][name='action'][value!='insert']").hide().attr('disabled', 'disabled');
$("#formId button[type='submit'][name='action'][value='insert']").show().removeAttr('disabled');

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

0

สูตรของฉัน:

<form>
<input type=hidden name=action value=login><!-- the magic! -->

<input type=text name=email>
<input type=text name=password>

<input type=submit name=action value=login>
<input type=submit name=action value="forgot password">
</form>

มันจะส่งเขตข้อมูลที่ซ่อนอยู่เริ่มต้นหากไม่มีปุ่มใดที่ 'คลิก'

หากพวกเขาคลิกพวกเขามีการตั้งค่าและมันจะถูกส่งผ่านค่า

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

2

แต่พฤติกรรมนี้ถูกระบุโดยมาตรฐานหรือไม่ เบราว์เซอร์สามารถเชื่อถือได้และใช้งานอย่างถูกต้องหรือไม่

— Stewart

คำถามที่ดี. ฉันได้ทดสอบการทำงานบนเบราว์เซอร์ (จากเมทริกซ์เบราว์เซอร์ yui) และเป็น consitent ที่สุดฉันได้รับในชีวิตจริง (ไม่คำนึงถึงสิ่งที่มาตรฐานที่ระบุ)

— GCB

@ เหลืองแล้วเกิดอะไรขึ้น จะดูทีหลัง

— gcb

1

ความผิดพลาดของฉันฉันเปลี่ยน {type = "hidden"} และฉันไม่ได้สังเกตเห็นค่า 'ชื่อ' เดียวกัน

— สีเหลืองและสีแดง

สิ่งนี้ใช้ไม่ได้สำหรับฉันใน IE11 หรือ Fx30 ค่าถูกตั้งเป็นค่าที่ซ่อนอยู่เสมอ

— เจมี่คิทสัน

0

อีกวิธีที่ฉันใช้คือมีเพียงปุ่มเดียวในแบบฟอร์มและปลอมปุ่มอื่น ๆ

นี่คือตัวอย่าง:

<form>
  <label for="amount">Amount of items</label>
  <input id="amount" type="text" name="amount" />
  <span id="checkStock" class="buttonish">Check stock</span>
  <button type="submit" name="action" value="order">Place order</button>
</form>

จากนั้นฉันก็จัดองค์ประกอบของการขยายให้มีลักษณะเหมือนปุ่ม ผู้ฟัง JS สังเกตการขยายและดำเนินการตามที่ต้องการเมื่อคลิก

ไม่เหมาะกับทุกสถานการณ์ แต่อย่างน้อยมันก็ง่ายที่จะทำ

— Johan Fredrik Varen
แหล่งที่มา

1

ทางเลือกสำหรับผู้ใช้ที่ปิดใช้งาน JS คืออะไร

— Stewart

ผู้ใช้ที่ปิดการใช้งาน JS จะไม่สามารถใช้อินเทอร์เน็ตได้อย่างง่ายดายเหมือนทุกวันนี้

— Christoffer Bubach

0

จากสเป็ค HTML 4 :

ถ้าแบบฟอร์มมีปุ่มส่งมากกว่าหนึ่งปุ่มปุ่มส่งที่เปิดใช้งานจะสำเร็จเท่านั้น

ซึ่งหมายความว่าหากได้รับมากกว่า 1 ปุ่มและไม่มีการเปิดใช้งาน (คลิกแล้ว) ไม่ควรทำสำเร็จ

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

ดังนั้นฉันคิดว่ามันไม่ควรใช้ปุ่มแรกหรือปุ่มอื่นที่ผู้ใช้ไม่ได้กำหนด (คลิก) อย่างไรก็ตามเบราว์เซอร์กำลังทำอยู่แน่นอน

— คริสโตเฟอร์เค
แหล่งที่มา

-2

แก้ไข:ขออภัยเมื่อเขียนคำตอบนี้ฉันคิดว่าเกี่ยวกับปุ่มส่งในความหมายทั่วไป คำตอบดังต่อไปนี้ไม่ได้เกี่ยวกับหลายtype="submit"ปุ่มเหมือนใบไม้เพียงหนึ่งtype="submit"และการเปลี่ยนแปลงอื่น ๆ type="button"ที่จะ ฉันปล่อยให้คำตอบที่นี่เป็นข้อมูลอ้างอิงในกรณีที่ช่วยคนที่สามารถเปลี่ยนแปลงtypeในรูปแบบของพวกเขา:

เพื่อตรวจสอบสิ่งที่ปุ่มกดเมื่อกดปุ่มใส่คุณสามารถทำเครื่องหมายขึ้นกับtype="submit"และปุ่มอื่น ๆ type="button"ทำเครื่องหมายพวกเขาด้วย ตัวอย่างเช่น:

<input type="button" value="Cancel" />
<input type="submit" value="Submit" />

— Jesús Carrera
แหล่งที่มา

พิมพ์ "ปุ่ม" ไม่ทำให้ฟอร์มส่ง มันใช้เพื่อเรียกสคริปต์ฝั่งไคลเอ็นต์เท่านั้น

— สจ๊วต

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

— Jesús Carrera

คำถามเกี่ยวกับปุ่มส่งหลายปุ่ม

— สจ๊วต

ตัวอย่างของฉันใช้ได้กับปุ่มส่งหลายปุ่ม ประเภทที่มีคำว่า "ส่ง" คือตัวที่เบราว์เซอร์กำหนดให้ทำหน้าที่กด (ซึ่งเป็นคำถามที่เกี่ยวกับ) จากนั้นด้วยปุ่มอื่น ๆ คุณสามารถใช้มันเป็นปุ่มส่งได้เช่นกันโดยใช้กิจกรรม JavaScript เช่นเหตุการณ์ onClick ที่คุณมีในตัวอย่างของคุณ ดังนั้นคำตอบของฉันจึงมีความเกี่ยวข้องและไม่ควรลงคะแนนเลย โปรดลบออก

— Jesús Carrera

1

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

— สจ๊วต