Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][jQuery] Pola formularza z algorytmem
Forum PHP.pl > Forum > Przedszkole
kakkarot
28.01.2012, 13:45:22
witam wszystkich.
potrzebuję dodać kod do formularza kontaktowego (contact form 7), który sprawi, że formularz będzie działał na pewnych argumentach.

Mają być 2 okienka wyboru (checkbox)
- [ubezp.]
- [pobr.]

Jeśli użytkownik zaznaczy [ubezp.] - pojawi się pod spodem pole tekstowe (text).
Jeśli uzytkownik zaznaczy [pobr], to automatycznie musi zaznaczyć sie także [ubezp] i pod każdym z nich wyskoczy osobne pole tekstowe, z tym, że w polu tekstowym pod [ubezp] domyślnie ma się znaleźć zawartość pola spod [pobr].

Założenia:
-może być zaznaczone samo pole [ubezp]
-jeśli zostanie zaznaczone pole [ubezp], pojawi sie okienko z polem tekstowym
-nie może być zaznaczone samo pole [pobr] - automatycznie zaznacza się pole [ubezp]
-jeśli są zaznaczone oba pola, to w polu tekstowym pod [ubezp] ma być domyślnie to co pod [pobr]


Napisałem o co mi chodzi jak najprościej potrafię. Proszę o pomoc w tym, gdyż dopiero się uczę i jak narazie jestem kompletnie zielony..
webdice
28.01.2012, 13:59:40
Co już zrobiłeś i z czym masz dokładnie problem?
kakkarot
29.01.2012, 13:58:14
mam zrobiony formularz, ale potrzebuję dodać do jednego pola właśnie tą opcję, ale nie znam sie na php i nie mam pojęcia jak napisać taką funkcję.
zamieszczam kod formularza z edytora wtyczki:
Kod
<hr>
<table>
<tr>
<td><small>
<b>Dane nadawcy:</b><hr>
Imię i nazwisko<br />
    [text* your-name]
Ulica<br />
    [text* your-ulica]
Nr domu/mieszkania<br />
    [text* your-numer]
Kod pocztowy<br />
    [text* your-kod]
Poczta<br />
    [text* your-poczta]
Twój e-mail<br />
    [email* your-email]
Numer telefonu<br />
    [text* your-telefon]
<br><br><br></td><td></td><td></td><td></td><td></td>
<td><small>
<b>Dane odbiorcy:</b><hr>
Imię i nazwisko<br />
    [text* him-name]
Ulica<br />
    [text* him-ulica]
Nr domu/mieszkania<br />
    [text* him-numer]
Kod pocztowy<br />
    [text* him-kod]
Poczta<br />
    [text* him-poczta]
Twój e-mail<br />
    [email* him-email]
Numer telefonu<br />
    [text* him-telefon]
<br><br><br></td><td></td><td></td><td></td><td></td>
<td><small>
<b>Parametry paczki:</b><hr>
Opis zawartości:<br />
    [text* zawartosc]
Uwagi:<br />
    [text* uwagi]
<hr>
<b>Wymiary(cm):</b><br />
Długość:
[text* dlugosc]
Głębokość:
[text* glebokosc]
Szerokość:
[text* szerokosc]
<hr>
Waga do:<br />
[select menu-149 id:Wagado include_blank "3kg" "5kg" "10kg" "15kg"]
Wartość paczki do:<br />
[select menu-124 id:wartosc include_blank "100" "200" "300" "400"]


[b][i]Forma wysyłki:<br />
    [checkbox* checkbox-502 id:forma "Pobr." "Ubezp."][/i][/b]

</small></td></tr></table>
<center>
<p><b>Przepisz kod z obrazka</b>
[captchac captcha-801 id:CAPTCHA size:m] [captchar captcha-801]<br>
[submit id:Wyslij "Zgłoś nadanie paczki"]</p></center>
<hr>
webdice
29.01.2012, 22:23:13
Najprościej i najszybciej będzie jeśli skorzystasz z jQuery. Poczytaj o change oraz show. Żeby sprawdzić czy checkbox jest zaznaczony możesz skorzystać z:

Kod
$( 'selektor' ).is( ':checked' );


PS. Nie potrzebujesz do tego PHP.
kakkarot
30.01.2012, 17:52:27
kod z formularza
Kod
Forma wysyłki:<br />
   [checkbox checkbox-638 id:pobranie class:forma "Pobranie"]
[text text-967 id:kwotapobranie class:pobr]
   [checkbox checkbox-213 id:ubezpieczenie class:forma "Ubezpieczenie"]
[text text-49 id:kwotaubezpieczenie class:ubezp]


a tutaj próbowałem zrobić coś z jquery ale nie wychodzi mi..
Kod
$( '#pobieranie.forma' ).is( ':checked' ) {
     $('#kwotapobranie.pobr').show('fast')
});
$( '#ubezpieczenie.forma' ).is( ':checked' ) {
     $('#kwotaubezpieczenie.ubezp').show('fast')
});


(#kwotapobrania.pobr) jest ukryte;
(#kwotaubezpieczenia.ubezp) jest ukryte;
jeśli (#ubezpieczenie.forma ) jest zaznaczone - (#kwotaubezpieczenie.ubezp) staje się widoczne;
jeśli (#pobranie.forma ) jest zaznaczone - (#kwotapobranie.pobr) staje się widoczne, oraz (#ubezpieczenie.forma) automatycznie zostaje zaznaczone;

o taki algorytm mi chodzi, ale niestety jestem całkiem zielony w jquery i dopiero zaczynam się uczyć od podstaw, a formularz muszę ukończyć jak najszybciej, więc jakby mógł ktoś pomóc mi z tym kodem, byłbym wdzięczny.
webdice
31.01.2012, 11:09:47
Skąd bierzesz selektor #kwotapobranie.pobr, tu ma być ID elementu.

PS. Przenoszę.
kakkarot
31.01.2012, 14:39:05
znalazłem takie coś:

Kod
(function($) {
    
    $.fn.ukryjpola = function(options) {
        
        var defaults = {
            szybkoscpokaz : 'slow',
            szybkoscukryj : 'fast'
        },
        
        settings = $.extend({}, defaults, options);
        
        $('#'+settings.docelowy+'').hide();
        
        function aktywatorCheckbox() {
            if ($(this).is(':checked')) {
                $('#'+settings.docelowy+'').slideDown(settings.szybkoscpokaz);
            } else {
                $('#'+settings.docelowy+'').slideUp(settings.szybkoscukryj);
            }
        }
        
        function aktywatorRadio() {
            if ($('#'+aktyw+'').is(':checked')) {
                $('#'+settings.docelowy+'').slideDown(settings.szybkoscpokaz);
            } else {
                $('#'+settings.docelowy+'').slideUp(settings.szybkoscukryj);
            }
        }
        
        if ($(this).is("input[type='checkbox']")) {
            $(this).click(aktywatorCheckbox);
        }else if ($(this).is("input[type='radio']")){
            var grupa = $(this).attr("name");
            var aktyw = $(this).attr("id")
            $("input[name='"+grupa+"']").click(aktywatorRadio);
        }                
        
    }
    
})(jQuery);


Kod
<script type="text/javascript">

    $(function() {

        $('#aktywator1').ukryjpola({docelowy : 'dodatkowo1'});

    });

</script>





Kod
<div>
    <label>Więcej opcji:
        <input type="checkbox" id="aktywator1" />
    </label>
</div>

<div id="dodatkowo1">
    <label>Dodatkowe opcje:</label>
    <textarea cols="50" rows="10">dodatkowo1</textarea>    
</div>



Wydaje mi się, że to się może przydać, tylko jak to przerobić na mój użytek?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.