witajcie,
czy ktoś jest w stanie podpowiedzieć jak zrobić następującą rzecz, przy wypełnianiu formularza, zaznaczamy jeden checkbutton, i pod nim są ukryte są kolejne 3 checkbuttony, w momencie zaznaczenia checkbuttona, powinny pojawić się do pola wyboru pod spodem, te ukryte checkbuttony i z odwrotnym skutkiem, w momencie odznaczenia, checkbuttony zmieniają stan z powrotem na hidden. Wiem jak to zrobić w JS, lecz akurat ten formularz musi być wykonany w PHP. Dodatkowe pytanie, czy jest możliwe napisanie skryptu w JS, który wysyła maila z danych zawartych w formularzu ? Dzieki z gory za wszystkie odp, pozdrawiam
0
0
Ale przecież PHP nie wyklucza JS. Czy coś jest w danym momencie na stronie ukryte, jest nieistotne z punktu widzenia serwera i danych (co najwyżej stan zaznaczenia tych checkboxów)
0
-
Tak, da się pokazywać/chować elementy za pomocą checkboxa bez JS, można to zrobić za pomocą pseudo-klasy :checked w CSS.
-
Nie, nie da się wysłać maila za pomocą samego JS. Możesz jedynie:
- otworzyć klienta pocztowego na komputerze klienta (mailto)
- odesłać maila do swojej aplikacji PHP, który wyśle maila
- odesłać maila do zewnętrznej aplikacji, która wyśle maila np. Mandrill
0
Przecież aby coś zmienić za pomocą musisz odświeżyć stronę PHP więc sobie możesz... oczywiście bez użycia jQuery, bo podobno ma nie być JS więc pozostaje CSS:
Łap przykład: https://jsfiddle.net/6mo9ntpx/11/
0
dzięki wielkie za odpowiedzi! wszystkie były pomocne
0
Wcześniej myślałem ze błąd polega na tym że wrzuciłem klasę do labela zamiast do inputa, lecz po modyfikacji dalej nie ma żadnej reakcji przy zaznaczanych checkbox'ach. Gdzie zrobiłem błąd ?
<div>
<input id="medlud" name="1" type="checkbox" value="medlud" class="spr_med" /><label for="medlud" > Medycyna ludzka </label>
<input id="medwet" name="2" type="checkbox" value="medwet" class="spr_wet"/><label for="medwet" > Medycyna weterynaryjna </label>
<div class="ukryte_med" >
<input type="checkbox" />Lud1
<input type="checkbox" />Lud2
<input type="checkbox" />Lud3
</div>
<div class="ukryte_wet" >
<input type="checkbox" />Wet1
<input type="checkbox" />Wet2
<input type="checkbox" />Wet3
</div>
</div>
Natomiast kod CSS bez zmian:
.ukryte_med {
display:none;
}
.spr_med:checked + .ukryte_med {
display: block;
}
.ukryte_wet {
display:none;
}
.spr_wet:checked + .ukryte_wet {
display: block;
}
Nie wiem dlaczego, ale nie działa kod gdy wezmę wyświetlany napis obok checkbutton'a w znacznik <label> lub <label for="id input'a">. Dlaczego to przestaje w powyższej sytuacji działać ?
1
Bo jest label trzeba go dopisać w CSS https://jsfiddle.net/4eyo86qf/1/
Mu dać jakaś klasę albo ID i podobmnie dopisać w CSS (albo zwyczajnie globalną * tylko to moim zdaniem zmniejsza czytelność kodu) elementy te muszą występować po sobie to znaczy pomiędzy nimi nie może być żadnego znacznika html albo dodać odpowiednią liczbę klas (lub gwiazdek) . Tu przykład takiego zamieszania z wymienianiem wszystkich elementów pomiędzy https://jsfiddle.net/4eyo86qf/2/
2
@kAzek, nie trzeba robić takiej kaszany ^^
@prezesso, zmień + na ~ w css.
~ działa podobnie, ale jest mniej rygorystyczna.
Przykład:
https://jsfiddle.net/z7hkrjuL/
Warto jednak rozumieć różnicę pomiędzy + i ~ dlatego mam dla Ciebie kolejny przykład:
https://jsfiddle.net/z7hkrjuL/2/
Po przeanalizowaniu tego powinieneś zrozumieć różnice ;)
0
Dokładnie o to mi chodziło. W moim przypadku lepszym rozwiązaniem chyba będzie +.
Mam jeszcze jeden drobny problem, nie potrafię tego wrzucić na stronkę. W sensie nie działa to w połączeniu z resztą kodu z mojej str. Wrzucam w ten edytor, wszystko działa poprawnie, pozostaje tylko dodać jakieś
żeby ten formularz w miarę zformatować. Na stronce cały formularz mieści się w 3 div'ach, w formularzu zanim przejdziemy do kontrolek checkboxowych, znajdują się jeszcze dwa divy, całość tego kody który mnie interesuje reasumując znajduje się w 5 divach. Czy mają one znaczenie w tym kodzie który napisałem ?
tutaj kod, który sprawił że formularz działa tak jak chciałem:
0
może wkleję cały kod, usunąłem div'y dodane oprócz formularza są tylko kontrolki tekstowe, nagłówki stopka i nav.
<?php $page_title = "Zapytanie ofertowe"; ?>
<?php $cur = "service"; ?>
<?php $desc = "Prosimy o wypełnienie wszystkich pół i opisanie jakiego typu usterka występuje w urządzeniu."; ?>
<?php include_once("inc/head.php"); ?>
<?php include_once("inc/header.php"); ?>
<h3> Zapytanie ofertowe </h3>
<form role="form" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input id="medlud" type="checkbox" value="Medycyna ludzka"/><label for="medlud"> Medycyna ludzka </label>
<div class="hidden">
<input id="drmed" type="checkbox" value="System DR" /><label for="drmed">Systemy DR</label>
<div class="hidden">
<input type="checkbox" id="drclassic" value="DR Classic" /><label for="drclassic">DR Classic</label>
<input type="checkbox" id="drstandard" value="DR Standard" /><label for="drstandard">DR Standard </label>
<input type="checkbox" id="drprofessional" value="DR Professional" /> <label for="drprofessional">DR Professional </label>
<input type="checkbox" id="drflexible" value= "DR Flexible" /><label for="drflexible">DR Flexible</label>
<input type="checkbox" id="dreasyu" value="DR Easy- Upgrade" /> <label for="dreasyu">DR Easy- Upgrade</label>
</div>
<input id="crmed" type="checkbox" value="System CR" /><label for="crmed">Systemy CR</label>
<div class="hidden">
<input id="vita25med" type="checkbox" value="CR Vita 25" /><label for="vita25med"> CR Vita 25 </label>
<input id="vita45med" type="checkbox" value="CR Vita 45"/><label for="vita45med">CR Vita 45 </label>
<input id="crpremium" type="checkbox" value="CR Premium"/><label for="crpremium">CR Premium </label>
<input id="cr3x" type="checkbox" value="CR 3X"/><label for="cr3x">CR 3X </label>
<input id="cr3xpro2" type="checkbox" value="CR 3XPro2"/><label for="cr3xpro2">CR 3XPro2 </label>
<input id="crsmart" type="checkbox" value="CR Smart"/><label for="crsmart">CR Smart </label>
</div>
<input id="film" type="checkbox" /><label for="film"> Systemy RTG CR/ Film </label>
<div class="hidden">
<input id="classic" type="checkbox" /><label for="classic">Classic</label>
<input id="standard" type="checkbox" /><label for="standard">Standard </label>
<input id="professional" type="checkbox" /><label for="professional">Professional </label>
</div>
<input id="ratmed" type="checkbox" /><label for="ratmed">Ratownictwo medyczne </label>
<div class="hidden">
<input id="portpower" type="checkbox" /><label for="portpower">Portable X-Ray Power </label>
<input id="portlight" type="checkbox" /><label for="portlight">Portable X-Ray Light</label>
<input id="flexcase" type="checkbox" /><label for="flexcase">Flexible Case </label>
<input id="easycase" type="checkbox" /><label for="easycase">Easy- Upgrade Case </label>
</div>
</div>
<input id="medwet" type="checkbox" value="Medycyna weterynaryjna"/> <label for="medwet"> Medycyna weterynaryjna </label>
<div class="hidden">
<input id="rtgstac" type="checkbox" /> <label for="rtgstac"> Aparaty RTG Stacjonarne</label>
<div class="hidden">
<input id="univet20" type="checkbox" /> <label for="univet20">Univet 300HF 20kW </label>
<input id="univet30" type="checkbox" /><label for="univet30">Univet 300HF 30kW </label>
<input id="maxivet" type="checkbox" /><label for="maxivet">Maxivet 300HF </label>
</div>
<input id="rtgprze" type="checkbox" /><label for="rtgprze"> Aparaty RTG Przenośne </label>
<div class="hidden">
<input id="orange1040" type="checkbox" /><label for="orange1040"> RTG Orange 1040 </label>
<input id="orange1060" type="checkbox" /><label for="orange1060"> RTG Orange 1060 </label>
<input id="orange9020" type="checkbox" /><label for="orange9020"> RTG Orange 9020 </label>
<input id="px20" type="checkbox" /><label for="px20"> PX 20 HF Plus </label>
<input id="px40" type="checkbox" /><label for="px40"> PX 40 HF Plus </label>
<input id="px60" type="checkbox" /><label for="px60"> PX 60 HF Plus </label>
</div>
<input id="wetcr" type="checkbox" /><label for="wetcr">Radiografia pośrednia (CR)</label>
<div class="hidden">
<input id="v25wet" type="checkbox" /><label for="v25wet">X-CR TABLETOP Vita25 </label>
<input id="v45wet" type="checkbox" /><label for="v45wet">X-CR TABLETOP Vita45 </label>
<input id="crwet" type="checkbox" /><label for="crwet">CR SMART </label>
<input id="cr3wet" type="checkbox" /><label for="cr3wet">CR 3XPro2 </label>
</div>
<input id="drwet" type="checkbox" /><label for="drwet">Radiografia bezpośrednia (DR)</label>
<div class="hidden">
<input id="drmaxivetwet" type="checkbox" /><label for="drmaxivetwet">DR Maxivet </label>
<input id="drflexwet" type="checkbox" /><label for="drflexwet">DR Flexible </label>
<input id="dreasywet" type="checkbox" /><label for="dreasywet">DR EasyUpgrade </label>
<input id="drflexcasewet" type="checkbox" /><label for="drflexcasewet">Dr Flexible Case </label>
<input id="dreasycasewet" type="checkbox" /><label for="dreasycasewet">DR EasyUpgrade Case </label>
</div>
</div>
<input id="akce" type="checkbox" value="Akcesoria"/> <label for="akce"> Akcesoria </label>
<div class="hidden">
<input id="pakwym" type="checkbox" /> <label for="pakwym">Pakiety wymienne RTG</label>
<input id="odziez" type="checkbox" /> <label for="odziez">Odzież ochronna </label>
<input id="kasety" type="checkbox" /> <label for="kasety">Kasety RTG </label>
<input id="oslony" type="checkbox" /> <label for="oslony">Osłony na kasety RTG </label>
<input id="cart" type="checkbox" /> <label for="cart">Z-Cart </label>
<input id="uchwyty" type="checkbox" /> <label for="uchwyty">Uchwyty, dystansowe </label>
<input id="stoly" type="checkbox" /> <label for="stoly">Stoły i statywy </label>
</div>
<div class="form-group">
<label for="name">Imię i Nazwisko</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Przykład: Jan Kowalski" required>
<label for="company">Nazwa placówki</label>
<input type="text" name="company" class="form-control" id="company" placeholder="Przykład: Przychodnia weterynaryjna PONY" required>
</div>
<div class="form-group">
<label for="address">Ulica i nr budynku</label>
<input type="text" name="address" class="form-control" id="address" placeholder="Przykład: ul. Czarna 88" required>
</div>
<div class="form-group">
<label for="city">Kod pocztowy i miejscowość</label>
<input type="text" name="city" class="form-control" id="city" placeholder="Przykład: 12-345 Kraków" required>
</div>
<div class="form-group">
<label for="phone">Nr telefonu</label>
<input type="tel" name="phone" class="form-control" id="phone" placeholder="Przykład: 666 123 456" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Przykład: [email protected]" required>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label for="message">Treść wiadomości</label>
<textarea name="message" class="form-control" rows="6" id="message" placeholder="W tym miejscu opisz dokładnie jakiego typu usterka występuje w urządzeniu. Im dokładniejszy opis, tym szybciej i łatwiej będziemy mogli zacząć pracę." required></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="terms-and-conditions" required> Zapoznałem się z <a href="owu.php" target="_blank">Ogólnymi Warunkami Umów»</a>.
</label>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-default btn-lg btn-block btn-red" id="submit"><span class="glyphicon glyphicon-send"></span> Prześlij</button>
</div>
<input type="text" id="surname" name="surname" value="SYvhTCr929yd9Cdksct9NqOnO6yf5FykX4akPzOGlpfp8JKTatI0CZClbYlGYMytnOcqjxxnDfIt2Qpw"/>
</form>
<?php include_once("inc/nav.php"); ?>
<?php include_once("inc/footer.php"); ?>
Plik css bez zmian, wrzucając sam formularz w postaci HTMLowej stronki, wszystko działa tak jak w tym edytorze. Dodając te parę linijek checkboxy się nie pokazują.
Podam jeszcze kod zrodly nav:
<hr>
<div class="row nav-footer">
<div class="col-xs-6 col-md-3">
<ul class="list-unstyled">
<li><a href="o-firmie.php"><strong>O firmie</strong></a></li>
<li><a href="o-firmie.php">Historia</a></li>
<li><a href="o-firmie-technologia-cr.php">Systemy CR</a></li>
<li><a href="o-firmie-technologia-dr.php">Systemy DR</a></li>
<li><a href="oferta-oprogramowanie-aqs.php">Oprogramowanie AQS</a></li>
<li><a href="o-firmie-rtg.php">Jak działa RTG?</a></li>
<!--<li><a href="#">Kariera</a></li>-->
</ul>
</div>
<div class="col-xs-6 col-md-3">
<ul class="list-unstyled">
<li><a href="pomoc-zdalna.php"><strong>Serwis i wsparcie</strong></a></li>
<li><a href="pomoc-zdalna.php">Pomoc zdalna</a></li>
<li><a href="pakiety-serwisowe.php">Pakiety serwisowe</a></li>
<li><a href="przeglady-okresowe.php">Przeglądy okresowe</a></li>
<li><a href="zgloszenie-serwisowe.php">Zgłoszenie serwisowe</a></li>
<li><a href="owu.php">Ogólne warunki umów</a></li>
<li><a href="cennik.php">Cennik usług</a></li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<ul class="list-unstyled">
<li><a href="oferta-medycyna-weterynaryjna.php"><strong>Oferta</strong></a></li>
<li><a href="oferta-medycyna-ludzka.php">Medycyna ludzka</a></li>
<li><a href="oferta-medycyna-weterynaryjna.php">Medycyna weterynaryjna</a></li>
<li><a href="o-firmie-referencje.php">Referencje</a></li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<ul class="list-unstyled">
<li><a href="kontakt.php"><strong>Kontakt</strong></a></li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<ul class="list-unstyled">
<li><a href="ankieta.php">Ankieta</a></li>
</ul>
</div>
</div>
<hr>
Czy ktoś jest mi w stanie wytłumaczyć dlaczego to w połączeniu z tymi plikami nie działa ?
0
Nie do końca rozumiem... Checkboxy się nie pokazują kiedy dodajesz nav:
<?php include_once("inc/nav.php"); ?>
Czy nie pokazują się wcale poza jsfiddle?
Wkleiłem tam Twój kod i nie jestem w stanie odtworzyć tego błędu: https://jsfiddle.net/z7hkrjuL/7/
Masz tam jakiś inny css?
0
tak wygląda prawie pełny kod html (nie wrzucałem walidacji formularza), oraz pełny css:
https://jsfiddle.net/weubxx3n/
Nawet w takiej formie wrzucając to do jsfiddle'a samo pokazywanie/ukrywanie checkboxów działa. Czyli prawdopodobnie coś będzie kolidowało z załączonych plików, nie chodzi tylko o plik nav.php ale dodatkowo załączane są head.php, header.php, nav.php, footer.php . Czyli wnioskuję że tam jest coś nie tak, ciężko mi powiedzieć co jak i gdzie, bo to trochę niewdzięczna praca, dodaje różne rzeczy do strony stworzonej nie przeze mnie, i tak wszystko intuicyjnie w sumie robię.
0
Metodą prób i błędów doszedłem do wniosku że kod nie współgra z plikiem head.php. Usuwałem każdy plik osobno, i mając dołączony head.php, ukrywanie/pokazywanie checkbox'ów nie działa. Przeszukałem ten plik ale szczerze to nie mam pojęcia co tam może blokować to wyświetlanie.
Tutaj zawartość pliku :
<!DOCTYPE html>
<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<title><?php echo $page_title; ?> - FIRMA</title>
<!-- css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- microsoft -->
<meta name="application-name" content="FIRMA"/>
<meta name="msapplication-TileColor" content="#ffffff"/>
<meta name="msapplication-square70x70logo" content="img/tiny.png"/>
<meta name="msapplication-square150x150logo" content="img/square.png"/>
<meta name="msapplication-wide310x150logo" content="img/wide.png"/>
<meta name="msapplication-square310x310logo" content="img/large.png"/>
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- apple -->
<link rel="apple-touch-icon" href="img/AppIcon60x60.png" />
<link rel="apple-touch-icon" sizes="76x76" href="img/AppIcon76x76.png" />
<link rel="apple-touch-icon" sizes="120x120" href="img/[email protected]" />
<link rel="apple-touch-icon" sizes="152x152" href="img/[email protected]" />
<!-- favicon -->
<link rel="icon" href="favicon.png" />
<!-- seo -->
<meta name="author" content="ex" />
<meta name="generator" content="ex" />
<meta name="dcterms.rightsHolder" content="firm">
<meta name="dcterms.rights" content="Wszelkie prawa zastrzeżone.">
<meta name="description" content="<?php //echo $desc; ?>firma" />
<meta name="robots" content="Index,Follow" />
</head>
<body>
Jedyny plik jaki tu jest dołączany oprócz, style.css i 2 pliów JS, ale tych plików JS nie mogę znaleźć, to bootstrap, ale pojęcia nie mam do czego on służy. Czy ktoś zauważa dlaczego to ze sobą nie współgra, albo inaczej czemu ten plik head źle oddziałowywuje na ten skrypt?
kodu pliku bootstrap nie będę wrzucał bo jest bardzo długi i wyrzuca błąd na stronie. Jest on podobny do style.css tylko że wszystkie komendy mieszczą się w jednej linijce
0
Jak nie wiesz do czego służy to zapewne możesz się go pozbyć :P
Bootstrap ma swoją klasę hidden:
.hidden {
display: none !important;
}
Masz dwa rozwiązania:
Dobre:
zmienić nazwę Twojej klasy hidden na coś innego.
Złe:
w każdym display: block dodaj !important np
#medlud:checked + label + .hidden { display: block !important; }