Přepínání formů – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Přepínání formů – JavaScript, AJAX, jQuery – Fórum – Programujte.comPřepínání formů – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.
Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
RePRO0
Super člen
7. 8. 2011   #1
-
0
-

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
Reklama
Reklama
Řešení
1321645679876456
~ Anonymní uživatel
27 příspěvků
7. 8. 2011   #2
-
0
-
Vyřešeno 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
-
0
-

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

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

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
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 18 hostů

Podobná vlákna

Tkinter - prepinani — založil maral

Přepínání oken — založil sirek

Přepínání CSS — založil Petr

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý