Přepínání formů

Fórum › JavaScript, AJAX, jQuery

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.

RePRO0

Super člen

7. 8. 2011 #1

Zdravím,

potřeboval bych následující (budu mít dva Formy [Register form a Host form]):

První Form (Register form), který bude mít dva inputy (přihlašovací jméno a heslo) + submit samozřejmě. Pod tímto Formem bude ještě možnost přepnutí na Host form.

Druhý Form, který bude mít pouze jeden input (přihlašovací jméno) + submit samozřejmě. Pod tímto Formem bude ještě možnost přepnutí na Register form.

A mě jde o to, aby se formy přepínaly dynamicky. Osobně mě napadla myšlenka je přepínat pomocí Javascriptu do jednoho DIVU (a třeba by se mi líbilo i nějaké to zpoždění [delay]), ale co já vím, jak se to dělá... BTW: Nejsem s JS kamarád.

Věřím tomu, že mě plně chápete, díky. Mimojiné: Budu rád, když mi budete psát smysluplné kódy nebo odkazy. Nemám rád rady typu: Tak si to vygůgli nebo obecné řeči (bez kódu).

Se srdečným pozdravem a s přáním hezkého dne RePRO.

Nahlásit jako SPAM

IP: 95.82.164.–

Software: C; C++; C#; Pascal; Delphi; Java Webdesign: PHP; MySQL; CSS; jQuery; Ajax; Javascript; OOP

1321645679876456

~ Anonymní uživatel
~ 27 příspěvků

7. 8. 2011 #2

Nejlepší odpověď

To by šlo třeba nějak takhle:

<!doctype html>
<html>
    <head>
        <title></title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <script
            src="http://code.jquery.com/jquery-1.6.2.min.js"
            type="text/javascript"
        ></script>
        <script type="text/javascript">
            $(function() {
                $('#login .switch').click(function() {
                    $(this)
                        .closest('form')
                        .slideUp()
                        .siblings()
                        .slideDown();
                    return false;
                });
            });
        </script>
        <style type="text/css">
            #login {
                display: inline-block;
            }
            
            #login form:last-child {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="login">
            <form>
                <h2>
                    Register Form
                </h2>
                <div>
                    <label for="name">
                        Jméno:
                    </label>
                    <input
                        name="name"
                        type="text"
                    />
                </div>
                <div>
                    <label for="password">
                        heslo:
                    </label>
                    <input
                        name="password"
                        type="text"
                    />
                </div>
                <div>
                    <a
                        class="switch"
                        href="#"
                    >
                        Přepnout na Host Form
                    </a>
                    <input
                        type="submit"
                        value="Ok"
                    />
                </div>
            </form>
            <form>
                <h2>
                    Host Form
                </h2>
                <div>
                    <label for="name">
                        Jméno:
                    </label>
                    <input
                        name="name"
                        type="text"
                    />
                </div>
                <div>
                    <a
                        class="switch"
                        href="#"
                    >
                        Přepnout na Register Form
                    </a>
                    <input
                        type="submit"
                        value="Ok"
                    />
                </div>
            </form>
        </div>
    </body>
</html>

Stylování formů jsem neřešil, to už si vygůgli .

Nahlásit jako SPAM

IP: 83.240.95.–

RePRO0

Super člen

7. 8. 2011 #3

#2 1321645679876456
Díky... Stylování už není problém. To, co jsi mi poslal je vela dobré. Je tu akorát poslední problém. Pokud jsem na Hostu formu a dám OK, tak se to přepne do Registr formu.

Nahlásit jako SPAM

IP: 95.82.164.–

Software: C; C++; C#; Pascal; Delphi; Java Webdesign: PHP; MySQL; CSS; jQuery; Ajax; Javascript; OOP

1321645679876456

~ Anonymní uživatel
~ 27 příspěvků

7. 8. 2011 #4

To se děje proto, že po odeslání formu se stránka načte znova. Aby se zobrazil posledně vybraný form i po refreshi, tak bys to musel ukládat do cookies:

// Práce s cookies
cookies = {
  
    /**
     * Nastaví cookie
     *
     * @param name Jméno
     * @param value Hodnota
     * @param expiration Počet dní pro uchování cookie(nepovinný)
     */
    set: function(name, value, expiration) {
        var date = new Date();
        date.setDate(date.getDate() + expiration);
        expiration = !expiration ? '' : ';expires=' + date.toUTCString();
        document.cookie = name + '=' + escape(value) + expiration;
    },
  
    /**
     * Vrací hodnotu cookie
     *
     * @param name Jméno
     */
    get: function(name) {
        if (document.cookie.length) {
            var start = document.cookie.indexOf(name + '=');
            if (start != -1) {
                start += name.length + 1;
                end = document.cookie.indexOf(';', start);
                if (end == -1)
                    end = document.cookie.length;
                return unescape(document.cookie.substring(start, end));
            }
        }
        return null;
    }
};

// Inicializace
$(function() {
    $('#login')
        .find('form')
        .hide()
        .eq(cookies.get('loginForm') || 0)
        .show()
        .end()
        .find('.switch')
        .click(function() {
            var id = $(this)
                .closest('form')
                .slideUp()
                .siblings()
                .eq(0)
                .slideDown()
                .index();
            cookies.set('loginForm', id);
            return false;
        });
});

Nahlásit jako SPAM

IP: 83.240.95.–

RePRO0

Super člen

7. 8. 2011 #5

Takhle to vypadá v praxi: http://fjcp.cz/login/

Nahlásit jako SPAM

IP: 95.82.164.–

Software: C; C++; C#; Pascal; Delphi; Java Webdesign: PHP; MySQL; CSS; jQuery; Ajax; Javascript; OOP

← Zpět na seznam vláken ← Zpět do Fóra