Form action + jquery

[Carlos Marchesin 0]

Olá pessoal, estou desenvolvendo o layout do login do meu site que registra chamado, mas estou tento problemas com relação ao action do formulário, pois toda vez que clico no botão "Cancelar" o mesmo envia os dados (deveria ser action = " "), o mesmo acontece com o botão "Enviar" (action = "verify.php").

Para isso, estou usando funções JQuery, mas até agora não consegui fazer funcionar da forma que gostaria, então venho atraves deste forum perdir uma ajudinha.

 

Segue:

 

Index.php

                   <div id="form-register" class="box-shadow-inner border-radius-left pull-left">
                        <form class="form-horizontal margin-10" action="" method="Post">
                            <legend>Registrar</legend>
                            <div id="form-content">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td class="span1">Usuário</td>
                                            <td><div class="input-prepend">
                                                    <span class="add-on btn-success"><i class="icon-user icon-white"></i></span>
                                                    <input id="r-username" type="text" name="username">
                                                </div></td>
                                        </tr>
                                        <tr>
                                            <td>Email</td>
                                            <td><div class="input-prepend">
                                                    <span class="add-on btn-success"><i class="icon-envelope icon-white"></i></span>
                                                    <input id="r-email" type="password" name="email">
                                                </div></td>
                                        </tr>
                                        <tr>
                                            <td>Senha</td>
                                            <td><div class="input-prepend">
                                                    <span class="add-on btn-success"><i class="icon-barcode icon-white"></i></span>
                                                    <input id="r-password" type="password" name="password">
                                                </div></td>
                                        </tr>
                                        <tr>
                                            <td>Confirmar</td>
                                            <td><div class="input-prepend">
                                                    <span class="add-on btn-success"><i class="icon-barcode icon-white"></i></span>
                                                    <input id="r-confirm" type="password" name="confirm">
                                                </div></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table>
                                    <hr> <!-- Linha -->
                                    <tbody>
                                        <tr>
                                            <td>
                                                <?php
                                                include 'captcha.php';
                                                ?>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div> <!-- Fim div#form-content -->
                            <hr style="margin-bottom: 5px;"> <!-- Linha -->
                            <div class="text-center">
                                <button id="btnRegisterCancel" class="btn btn-inverse">Cancelar</button>
                                <button id="btnRegisterSend" class="btn btn-success ladda-button zoom-out">
                                    <span class="ladda-label">Enviar</span>
                                    <span class="ladda-spinner"></span>
                                    <span class="ladda-progress"></span>
                                </button>
                            </div> <!-- Fim button -->
                        </form>
                    </div> <!-- Fim div#form-register -->

 

login.js

 

$(document).ready(function() {

    $('#username').focus();

    //botão lembrar
    $('#btnForgot').click(function() {
        $('#form-signin').hide();
        $('#form-register').hide();
        $('#form-forgot').fadeIn(500);
        $('#rec-email').focus();

        //redimencionar button
        $('#LogOn').css('height', $('#form-forgot').height());

        //limpar inputs
        $('#username').val("");
        $('#password').val("");
    });
    
    //botão registrar
    $('#btnRegister').click(function() {
        $('#form-signin').hide();
        $('#form-forgot').hide();
        $('#form-register').fadeIn(500);
        $('#r-username').focus();

        //redimenciona button
        $('#LogOn').css('height', $('#form-register').height());

        //valores padronizados UpperCase
        $('#r-username').keyup(function() {
            this.value = this.value.toUpperCase();
        });

        //limpar inputs
        $('#username').val("");
        $('#password').val("");
        $('#rec-email').val("");
    });
    
    //botão cancelar registro
    $('#btnRegisterCancel').click(function() {
        $('#form-register').hide();
        $('#form-signin').fadeIn(500);
        $('#username').focus();

        // clear inputs
        $('#r-username').val("");
        $('#r-email').val("");
        $('#r-password').val("");
        $('#r-confirm').val("");
    });

});

Resumo: Na pagina "index.php", existe os seguines formulários ("form-signin", "form-forgot", "form-register"), nos formulários "forgot" e "register" contém os botões "Cancelar" e "Enviar", o botão "Cancelar" deve alterar o action para "#" ou " " e o botão "Enviar" deve alterar o action para o seu referente.

Espero ter explicado corretamente.

[Snowden 94]

Não precisa alterar o "action".

 

só ponha "return false;" no evento click do jquery.

 

assim...

//botão cancelar registro$('#btnRegisterCancel').click(function() {   $('#form-register').hide();   $('#form-signin').fadeIn(500);   $('#username').focus();    // clear inputs   $('#r-username').val("");   $('#r-email').val("");   $('#r-password').val("");   $('#r-confirm').val("");	return false; // <- viu?});

Outra dica...! para "limpar" os inputs

 

ou invés disso.

// clear inputs   $('#r-username').val("");   $('#r-email').val("");   $('#r-password').val("");   $('#r-confirm').val("");

use isso..

// clear inputs$('.form-horizontal')[0].reset(); //reseta o form

 

.