ฉันสามารถ <button> ไม่ส่งแบบฟอร์มได้หรือไม่?


516

ฉันมีแบบฟอร์มมี 2 ปุ่ม

<a href="index.html"><button>Cancel changes</button></a>

<button type="submit">Submit</button>

ฉันใช้ปุ่มของ jQuery UI บนพวกเขาเช่นกัน

$('button').button();

อย่างไรก็ตามปุ่มแรกจะส่งแบบฟอร์มด้วย ฉันจะคิดว่าถ้ามันไม่มีtype="submit"มันก็ไม่ได้

เห็นได้ชัดว่าฉันสามารถทำได้

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

แต่มีวิธีที่ฉันสามารถหยุดปุ่มย้อนกลับนั้นจากการส่งแบบฟอร์มโดยไม่ต้องมีการแทรกแซง JavaScript?

ตามจริงแล้วฉันใช้ปุ่มเพียงปุ่มเดียวดังนั้นฉันจึงสามารถจัดสไตล์ด้วย jQuery UI ฉันพยายามโทรหาbutton()ลิงก์ แต่ก็ใช้งานไม่ได้ตามที่คาดไว้ (ดูน่าเกลียดมาก!)



2
ใช้<button type="button">สำหรับฟอร์มที่ไม่ส่งฟอร์มและ<input type="submit">อีกอันหนึ่ง จากนั้นจับมันด้วย jquery$('#formID').submit(function(e){});
Airwavezx

คำตอบ:


1130

ค่าเริ่มต้นสำหรับtypeคุณสมบัติของbuttonองค์ประกอบ คือ "ส่ง" ตั้งค่าเป็นเพื่อtype="button"สร้างปุ่มที่ไม่ได้ส่งแบบฟอร์ม

<button type="button">Submit</button>

ในคำพูดของมาตรฐาน HTML : "ไม่ทำอะไรเลย"



53
นั่นเป็นเพียงตัวเลือกการออกแบบที่ไม่ดีอย่างน่างงงวย
ตุลาคม

ทุกคน: โปรดอ่านhtml.spec.whatwg.org/multipage/syntax.html#unquoted
Josh Lee

ว้าวคุณและอเล็กซ์กำลังดุ๊กอยู่ในการแก้ไข ฉันไม่เห็นสาเหตุที่คุณสนใจราคาหรือไม่สนใจแอตทริบิวต์
ADJenks

228

buttonองค์ประกอบsubmitมีชนิดเริ่มต้นของ

คุณสามารถทำได้โดยการตั้งค่าประเภทbutton:

<button type="button">Cancel changes</button>

1
@ B.ClayShannon ไม่จริง คุณสามารถใช้รหัสฝั่งเซิร์ฟเวอร์เพื่อส่งคืนหน้าเดียวกันเมื่อคลิกปุ่ม แต่มันจะยังโหลดหน้าซ้ำ ในที่สุดปุ่มก็เป็นส่วนหนึ่งของเอกสารดังนั้นวิธีเดียวที่จะบอกเบราว์เซอร์ว่าคุณต้องการให้มันทำงานอย่างไรคือ HTML และ JavaScript
s4y

17

เพียงใช้ HTML แบบเก่าที่ดี:

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

ตัดเป็นหัวเรื่องของลิงก์หากคุณต้องการ:

<a href="http://somewhere.com"><input type="button" value="Submit" /></a>

หรือถ้าคุณตัดสินใจว่าคุณต้องการให้ javascript มีฟังก์ชันการทำงานอื่น:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>

7
การใช้การควบคุมปุ่มมาตรฐานพร้อมกับคุณสมบัติประเภทที่เหมาะสมคือ "good old html" และสร้างมาร์กอัปที่ง่ายขึ้น
R0MANARMY

เห็นได้ชัดว่าไม่ใช่เรื่องง่ายหากในบางเบราว์เซอร์มีประเภทเริ่มต้นที่ส่งและอื่น ๆ จะมีปุ่มชนิดเริ่มต้น Heck แม้เพียงแค่มีประเภทเริ่มต้นของการส่งซับซ้อนยิ่งกว่าสิ่งที่จำเป็น IMO ควรมีมาร์กอัปที่ให้ปุ่มที่ไม่ทำอะไรเลย และก็คือ:<input type="button" />
เจฟฟรีย์เบลค

+1 ฉันใช้เทคนิคตรงนี้หลายครั้งและมันใช้ได้ดีสำหรับฉันเสมอ ตัวแปรหนึ่งคือถ้าคุณต้องการยกเลิกเหตุการณ์ postback สำหรับปุ่มฝั่งเซิร์ฟเวอร์ตามการคำนวณฝั่งไคลเอ็นต์คุณสามารถรวม window.event.returnValue = false; ในรหัสของคุณที่รันในฝั่งไคลเอ็นต์ onclick เหตุการณ์สำหรับปุ่มของคุณ ... นั่นคือถ้าใช้การควบคุมตรวจสอบที่กำหนดเองไม่ได้ตัดมัสตาร์ดสำหรับคุณ :)
อดัมแมค

1
@ JGB146: เพียงเพราะบางเบราว์เซอร์เริ่มต้นเป็นค่าเดียวกันไม่ได้หมายความว่าพวกเขาจะไม่เคารพประเภทที่ถูกต้องหากมันตั้งค่าด้วยตนเอง (ตามที่แนะนำโดย jleedev ไม่ต้องพูดถึงคำถามที่ถามโดยเฉพาะวิธีการทำโดยไม่ต้อง JavaScriptในขณะที่คำตอบของคุณไม่ได้คำนึงถึงสิ่งนั้น
R0MANARMY

11
@ JGB146: Buttonเป็นคอนเทนเนอร์ใน HTML ที่ช่วยให้คุณวางสิ่งต่าง ๆ เช่นรูปภาพหรือตาราง (ไม่แน่ใจว่าทำไมคุณถึงทำเช่นนี้ แต่ทำได้) และอื่น ๆ ในขณะที่inputไม่รองรับ มีความแตกต่างระหว่างทั้งสองและแต่ละคนมีกรณีการใช้งานที่เหมาะสม
R0MANARMY


5

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

ดูตัวอย่างที่นี่ (และสินค้าอื่น ๆ อีกมากมาย) นี่คือเอกสารที่มากเกินไป

สั้น ๆ ด้วยรหัสตัวอย่างของคุณทำสิ่งนี้:

<script type="text/javascript">
    $('button[type!=submit]').click(function(){
        // code to cancel changes
        return false;
    });
</script>

<a href="index.html"><button>Cancel changes</button></a>
<button type="submit">Submit</button>

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


พออยากรู้อยากเห็นเพิ่มe.preventDefault()ไม่ทำอะไรเลยที่จะหยุดการส่ง (ที่เริ่มต้นด้วยfunction(e))
Sablefoste

1

โดยไม่ต้องตั้งค่าtypeแอตทริบิวต์คุณยังสามารถกลับมาfalseจากOnClickการจัดการและประกาศแอตทริบิวต์เป็นonclickonclick="return onBtnClick(event)"


0

ใช่คุณสามารถสร้างปุ่มที่ไม่ได้ส่งแบบฟอร์มโดยการเพิ่มแอททริบิวประเภทของปุ่มค่า: <button type="button"><button>


-2
  <form class="form-horizontal" method="post">
        <div class="control-group">

            <input type="text" name="subject_code" id="inputEmail" placeholder="Subject Code">
        </div>
        <div class="control-group">
            <input type="text" class="span8" name="title" id="inputPassword" placeholder="Subject Title" required>
        </div>
        <div class="control-group">
            <input type="text" class="span1" name="unit" id="inputPassword" required>
        </div>
            <div class="control-group">
            <label class="control-label" for="inputPassword">Semester</label>
            <div class="controls">
                <select name="semester">
                    <option></option>
                    <option>1st</option>
                    <option>2nd</option>
                </select>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="inputPassword">Deskripsi</label>
            <div class="controls">
                    <textarea name="description" id="ckeditor_full"></textarea>
 <script>CKEDITOR.replace('ckeditor_full');</script>
            </div>
        </div>



        <div class="control-group">
        <div class="controls">

        <button name="save" type="submit" class="btn btn-info"><i class="icon-save"></i> Simpan</button>
        </div>
        </div>
        </form>

        <?php
        if (isset($_POST['save'])){
        $subject_code = $_POST['subject_code'];
        $title = $_POST['title'];
        $unit = $_POST['unit'];
        $description = $_POST['description'];
        $semester = $_POST['semester'];


        $query = mysql_query("select * from subject where subject_code = '$subject_code' ")or die(mysql_error());
        $count = mysql_num_rows($query);

        if ($count > 0){ ?>
        <script>
        alert('Data Sudah Ada');
        </script>
        <?php
        }else{
        mysql_query("insert into subject (subject_code,subject_title,description,unit,semester) values('$subject_code','$title','$description','$unit','$semester')")or die(mysql_error());


        mysql_query("insert into activity_log (date,username,action) values(NOW(),'$user_username','Add Subject $subject_code')")or die(mysql_error());


        ?>
        <script>
        window.location = "subjects.php";
        </script>
        <?php
        }
        }

        ?>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.