ChatGPT解决这个技术问题 Extra ChatGPT

我可以让 <button> 不提交表单吗?

我有一个表格,有 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(),但它没有按预期工作(看起来很丑!)。

HTML button to NOT submit form 的可能重复项
使用 <button type="button"> 表示不提交表单的那一个,使用 <input type="submit"> 表示另一个。然后用 jquery $('#formID').submit(function(e){}); 捕捉它

l
leonheess

type attribute of button elements 的默认值为“提交”。将其设置为 type="button" 以生成不提交表单的按钮。

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

HTML Standard 的话来说:“什么都不做。”


此外,如果在同一表单中存在属性 type="submit"(或为空)的按钮,则 <input type=text> 将在您按 Enter 时提交表单
太感谢了!当答案本身很简单时,我已经坚持了一段时间。简单是关键!
a
alex

The button element 的默认类型为 submit

您可以通过设置 button 类型使其不执行任何操作:

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

@B.ClayShannon 不是。单击按钮时,您可以使用服务器端代码返回相同的页面,但它仍会重新加载页面。最终,按钮是文档的一部分,因此告诉浏览器您希望它如何操作的唯一方法是 HTML 和 JavaScript。
J
Jeffrey Blake

只需使用好的旧 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();"/>

使用具有适当类型属性的标准按钮控件是“好旧的 html”,并创建更简单的标记。
如果在某些浏览器中它具有默认的提交类型而在其他浏览器中具有默认类型的按钮,这显然不是更简单。哎呀,即使只是使用默认类型的提交也会使事情变得比 IMO 所需的更复杂。应该有可以轻松提供什么都不做的按钮的标记。还有:<input type="button" />
+1 我已经多次使用这种精确的技术,而且它一直对我很有效。一种变体是,如果您需要根据某些客户端计算取消服务器端按钮的回发事件,则可以包括 window.event.returnValue = false;在您的代码中为您的按钮在客户端 onclick 事件中执行...也就是说,如果使用自定义验证器控件不会为您减少芥末:)
@JGB146:仅仅因为并非所有浏览器都默认使用相同的值并不意味着如果手动设置它们就不会尊重正确的类型(正如 jleedev 所建议的那样。更不用说这些问题专门要求一种方法来做到这一点JavaScript,而您的答案没有考虑到这一点。
@JGB146:Button 是 HTML 中的容器。这使您可以放置图像或表格(不确定为什么要这样做,但可以)等,而 input 不支持。两者之间存在差异,并且每个都有其适当的用例。
G
Geoffrey Githaiga

是的,您可以通过添加值按钮类型的属性来使按钮不提交表单:

<button type="button"><button>

A
Abdur Rehman
<form onsubmit="return false;">
   ...
</form>

您的回答禁用了所有提交表单的传统方式,而不仅仅是一个按钮。 OP 的问题更多是关于仅禁用特定按钮,但保持表单可提交。
a
alex

老实说,我喜欢其他答案。简单,无需进入 JS。但我注意到你问的是关于 jQuery 的问题。因此,为了完整起见,在 jQuery 中,如果您使用 .click() 处理程序返回 false,它将否定小部件的默认操作。

See here for an example(还有更多好东西)。 Here's the documentation, too

简而言之,使用您的示例代码,执行以下操作:

<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) 开头)。
H
Harun Diluka Heshan

如果不设置 type 属性,您也可以从 OnClick 处理程序返回 false,并将 onclick 属性声明为 onclick="return onBtnClick(event)"


A
Andrew
  <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
        }
        }

        ?>