Cześć :)
Tworzę formularz kontaktowy z funkcją kalkulatora w Wordpressie (Contact Form 7). Stworzyłem dwie funkcje:
function showDiv() {
if(document.getElementById("wynagrodzenie").value != ""){
document.getElementById('formStep2').style.display = "block";
document.getElementById('validation').style.display = "none";
}
else{
document.getElementById("validation").innerHTML += "Proszę wypełnić pole Wynagrodzenie";
}
}
function conditions() {
if(document.getElementsByClassName("ctf7-total").value > "200000" && document.getElementsByName("produkt").value == "35" ){
document.getElementById("validation").innerHTML += "Kwota maksymalna to 200000zł";
}
}
Poniżej kod HTML:
<form action="/sprawdz-bezplatnie-swoja-zdolnosc/#wpcf7-f3230-p3228-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input name="_wpcf7" value="3230" type="hidden">
<input name="_wpcf7_version" value="5.0.2" type="hidden">
<input name="_wpcf7_locale" value="pl_PL" type="hidden">
<input name="_wpcf7_unit_tag" value="wpcf7-f3230-p3228-o1" type="hidden">
<input name="_wpcf7_container_post" value="3228" type="hidden">
<input name="_cf_logic" value="" type="hidden">
</div>
<label>Produkt który mnie interesuje
<span class="wpcf7-form-control-wrap produkt"><select name="produkt" class="wpcf7-form-control wpcf7-select_custom wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="35">kredyt gotówkowy</option><option value="35">kredyt konsolidacyjny</option><option value="70">kredyt hipoteczny</option><option value="70.0">kredyt firmowy</option><option value="12">pożyczka pozabankowa</option></select></span></label>
<label>Główne źródło dochodów
<span class="wpcf7-form-control-wrap zrodlo"><select name="zrodlo" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="Umowa o pracę">Umowa o pracę</option><option value="Umowa zlecenie/o dzieło">Umowa zlecenie/o dzieło</option><option value="Emerytura/Renta">Emerytura/Renta</option><option value="Dochody uzyskiwane z działalności gospodarczej">Dochody uzyskiwane z działalności gospodarczej</option><option value="Dochody uzyskiwane z działalności rolniczej">Dochody uzyskiwane z działalności rolniczej</option><option value="Umowy najmu">Umowy najmu</option><option value="Inne">Inne</option></select></span>
</label>
<label>Kwota miesięcznego wynagrodzenia netto w złotych
<span class="wpcf7-form-control-wrap wynagrodzenie"><input name="wynagrodzenie" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number" id="wynagrodzenie" aria-required="true" aria-invalid="false" type="number"></span>
</label>
<label>Miasto zamieszkania
<span class="wpcf7-form-control-wrap miasto"><textarea name="miasto" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea></span>
</label>
<label>Liczba osób w gospodarstwie domowym
<span class="wpcf7-form-control-wrap domownicy"><input name="domownicy" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number" aria-required="true" aria-invalid="false" type="number"></span> </label>
<label>Liczba osób w gospodarstwie domowym uzyskujących dochód
<span class="wpcf7-form-control-wrap domownicy-dochod"><input name="domownicy-dochod" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number" aria-required="true" aria-invalid="false" type="number"></span> </label>
<label>Kwota stałych miesięcznych obciążeń gospodarstwa domowego
<span class="wpcf7-form-control-wrap obciazenia"><input name="obciazenia" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number" aria-required="true" aria-invalid="false" type="number"></span> </label>
<label>Kwota miesięcznych zobowiązań kredytowych w złotych
<span class="wpcf7-form-control-wrap zobowiazania"><input name="zobowiazania" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number" aria-required="true" aria-invalid="false" type="number"></span> </label>
<div id="group-676" class="cf7-group cf7-logic-hidden">
Wartość musi być niższa niż 200 000 zł
</div>
<div id="group-176" class="cf7-group cf7-logic-hidden">
Wartość musi być niższa niż 500 000 zł
</div>
<div id="group-276" class="cf7-group cf7-logic-hidden">
Wartość musi być niższa niż 30 000 zł
</div>
<a onclick="showDiv()" class="wpcf7-form-control wpcf7-submit check" id="ShowDivBtn">Sprawdź zdolność</a><span class="ajax-loader"></span>
<div id="validation" style="display: none;">Proszę wypełnić pole Wynagrodzenie</div>
<div id="formStep2" style="display: block;">
Twoja zdolność kredytowa dla wybranego produktu wynosi
<span class="wpcf7-form-control-wrap calculated-829"><input name="calculated-829" value="0" size="40" class="wpcf7-form-control wpcf7-total wpcf7-calculated ctf7-total" readonly="readonly" aria-invalid="false" data-formulas="produkt*wynagrodzenie" type="text"></span>
<label> Imię i nazwisko (wymagane)
<span class="wpcf7-form-control-wrap your-name"><input name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" type="text"></span> </label>
<label> Adres email (wymagane)
<span class="wpcf7-form-control-wrap your-email"><input name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" type="email"></span> </label>
<label> Numer telefonu
<span class="wpcf7-form-control-wrap tel"><input name="tel" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" type="text"></span> </label>
<input value="Prześlij wybrane parametry do eksperta" class="wpcf7-form-control wpcf7-submit" type="submit"><span class="ajax-loader"></span>
</div><div class="wpcf7-response-output wpcf7-display-none"></div><input value="no" id="cf7-calculator-enable" type="hidden"><input value="2" id="cf7-calculator-decimals" type="hidden"><input value="." id="cf7-calculator-separator" type="hidden"><input value="," id="cf7-calculator-thousand" type="hidden"><input value="no" id="cf7-calculator-right" type="hidden"><input value="" id="cf7-calculator-currency" type="hidden"><input value="yes" id="cf7-calculator-currency_position" type="hidden">
<style type="text/css">
.cf7-hide {
display: none !important;
}
.cf7-calculated-name {
width: 100%;
display: inline-block;
}
</style><script type="text/javascript">var cf7_logic = {"1":{"type":"show","then":["group-676"],"when":"all","condition":{"1":{"name":"calculated-829","equals":"3","value":"200000"},"2":{"name":"zrodlo","equals":"1","value":"35"}}},"2":{"type":"show","then":["group-176"],"when":"all","condition":{"1":{"name":"calculated-829","equals":"3","value":"700000"},"2":{"name":"zrodlo","equals":"1","value":"70.0"}}},"3":{"type":"show","then":["group-276"],"when":"all","condition":{"1":{"name":"zrodlo","equals":"1","value":"12"},"2":{"name":"calculated-829","equals":"3","value":"30000"}}}};</script></form>
O ile funkcja z wyświetleniem diva po kliknięciu przycisku działa, o tyle walidacja nie chce działać. Podejrzewam, że chodzi o to, że pole calculated-829 jest niewidoczne od początku wyświetlenia strony (jest widoczne dopiero po kliknięciu przycisku Sprawdź zdolność) i w związku z tym funkcja nie pobiera jego wartości. Jak mogę sprawić, by kalkulator działał prawidłowo. Pomocy :)
Szymon