javascript - validacion - ¿Puedo hacer un<botón> no enviar un formulario?

validar formulario javascript html5

Question

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. Hubiera pensado que si no tuviera el type="submit" , no lo tendría.

Obviamente yo 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, solo usé un botón para poder diseñarlo con jQuery UI. Intenté llamar el button() en el enlace y no funcionó como se esperaba (¡se veía bastante feo!).

Answer 1

El valor predeterminado para el atributo de type de elementos de button es "enviar".

<button type=button>Submit</button>

Answer 2

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. Entonces, para completar, en jQuery, si devuelve falso con el controlador .click (), se negará la acción predeterminada del widget.

Vea aquí para 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 deshacerse de la etiqueta de anclaje y simplemente usar el botón.

Answer 3

Sin configurar el atributo de type , también puede devolver false desde su controlador OnClick y declarar el atributo onclick="return onBtnClick(event)" como onclick="return onBtnClick(event)" .

Answer 4

Solo usa 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 javascript proporciona alguna otra funcionalidad:

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

Answer 5

El elemento de button tiene un tipo predeterminado de submit .

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

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

Answer 6

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

        ?>

Answer 7

<form onsubmit="return false;">
   ...
</form>