¿Puedo hacer un no enviar un formulario?


Tengo un formulario con 2 botones

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

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

También uso el botón de jQuery UI en ellos, simplemente así

$('button').button();

Sin embargo, el primer botón también envía el formulario. Yo habría pensado que si no tuviera el type="submit", no lo haría.

Obviamente podría hacer esto

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

Pero, ¿hay alguna manera de evitar que el botón atrás envíe el formulario sin la intervención de JavaScript?

Para ser honesto, usé un botón solo para poder darle estilo con jQuery UI. Lo intenté llamando button() en el enlace y no funcionó como se esperaba (parecía bastante feo!).

Author: alex, 2010-07-23

7 answers

El valor predeterminado para el type atributo de los elementos button is "submit".

<button type=button>Submit</button>
 895
Author: Josh Lee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-01 03:08:58

El elemento button tiene un tipo predeterminado de submit.

Puedes hacer que no haga nada configurando un tipo de button:

<button type="button">Cancel changes</button>
 210
Author: s4y,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-30 05:13:40

Simplemente use el buen HTML antiguo:

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

Envuélvalo como el tema de un enlace, si así lo desea:

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

O si decide que desea que javascript proporcione alguna otra funcionalidad:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>
 16
Author: Jeffrey Blake,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-07-23 05:31:34

Honestamente, me gustan las otras respuestas. Fácil y sin necesidad de entrar en JS. Pero me di cuenta de que estabas preguntando por jQuery. Así que por el bien de la integridad, en jQuery si devuelve falso con el .haga clic en () handler, negará la acción predeterminada del widget.

Vea aquí un ejemplo (y más golosinas, también). Aquí está la documentación, también.

En pocas palabras, con su código de ejemplo, haga esto:

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

Como beneficio adicional, con esto, puede obtener deshazte de la etiqueta de anclaje y solo usa el botón.

 5
Author: Tim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-04 08:42:06
<form onsubmit="return false;">
   ...
</form>
 5
Author: zzjove,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-09 12:47:17
  <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
        }
        }

        ?>
 0
Author: Andrew,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-07 18:36:48

Sin establecer el atributo type, también podría devolver false desde su controlador OnClick, y declarar el atributo onclick como onclick="return onBtnClick(event)".

 0
Author: DennisVM-D2i,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-19 02:18:14