Przycisk zmieniający opcje w menu rozwijanym form7

Masz problem z modyfikacją wtyczki Wordpress, to odpowiednie miejsce na Twój wpis.
no avatar
Maciej Wiśniewski
 
Posty: 5
Reputacja: 0 pkt
Od: 28 sty 2015, o 09:24

Przycisk zmieniający opcje w menu rozwijanym form7

przez Maciej Wiśniewski » 28 sty 2015, o 09:34

Cześć!
Szukałem, szukałem nie udało mi się znaleźć wiec zakładam post, do rzeczy...

Mam formularz na form7 z listą rozwijaną i 3 opcjami.
Czy istnieje opcja, sposób aby na stronie z formularzem zamieścić przyciski, które w zależności od kliknięcia w menu rozwijanym wybierały by opcję przypisaną do przycisku?

no avatar
admin
Administrator
 
Posty: 629
Reputacja: 38 pkt
Od: 30 sty 2013, o 17:39
Lokalizacja: Kraj nad Wisłą

Re: Przycisk zmieniający opcje w menu rozwijanym form7

przez admin » 28 sty 2015, o 16:17

Zależy Ci na tym aby po wybraniu danej opcji z menu rozwijanego przyciski zmieniały tylko etykietę np. "Wyślij do webmastera", "Wyślij do działu sprzedaży" ? Jeśli tak to będzie to do zrobienia najprawdopodobniej przez dopisanie krótkiego skryptu jquery, nie wiem czy znalazłby się jakiś dodatek rozwiązujący tę kwestię.

no avatar
Maciej Wiśniewski
 
Posty: 5
Reputacja: 0 pkt
Od: 28 sty 2015, o 09:24

Re: Przycisk zmieniający opcje w menu rozwijanym form7

przez Maciej Wiśniewski » 28 sty 2015, o 17:31

dokładnie! Słyszałem coś o jquery ale jak to napisać...
Znasz jakiś opis działającego jquery, które tak działa, spróbowałbym to ogarnąć samemu o ile modyfikacja kodu nie będzie za bardzo skomplikowana.
Próbowałem to znaleźć na zagranicznych forach ale, hm, nie wiem jak to nazwać po angielsku.

no avatar
admin
Administrator
 
Posty: 629
Reputacja: 38 pkt
Od: 30 sty 2013, o 17:39
Lokalizacja: Kraj nad Wisłą

Re: Przycisk zmieniający opcje w menu rozwijanym form7

przez admin » 28 sty 2015, o 19:34

Skorzystaj z tego kodu, dołącz go do np. pliku .js szablonu (bez znaczników <script>) lub utwórz własny
Kod: Zaznacz cały
   <script>jQuery(function($){
   $('select[name="menu-426"]').change(function(){
   
   if ('opcja1' == $(this).val()) {
      $('.wpcf7-submit').val('wyslij do webmastera'); }
   else if ('opcja2' == $(this).val())
      { $('.wpcf7-submit').val('Wyslij do dzialu sprzedazy'); }
   else if ('opcja3' == $(this).val())
      { $('.wpcf7-submit').val('wyslij ...'); }
   else if ('opcja4' == $(this).val())
      { $('.wpcf7-submit').val('wyslij'); }
   });
   });
   </script>


name="menu-426" - to nazwa pola rozwijanego <select .. name="menu-426"
wpcf7-submit - nazwa klasy przycisku dla którego zmienisz etykietę
u Ciebie te wartości będą najprawdopodobniej inne ale możesz je pobrać z kodu własnego forumlarza, a wartości w menu rozwijanym u mnie to opcja1,opcja2,opcja3
Kod: Zaznacz cały
<option value="opcja1">opcja1</option>

no avatar
Maciej Wiśniewski
 
Posty: 5
Reputacja: 0 pkt
Od: 28 sty 2015, o 09:24

Re: Przycisk zmieniający opcje w menu rozwijanym form7

przez Maciej Wiśniewski » 29 sty 2015, o 01:56

poziom.js u mnie wygląda tak:
Kod: Zaznacz cały
jQuery(function($){
   $('select[name="Poziom"]').change(function(){
   
   if ('opcja1' == $(this).val()) {
      $('.wpcf7-submit').val('Podstawowe'); }
   else if ('opcja2' == $(this).val())
      { $('.wpcf7-submit').val('Zaawansowane'); }
   else if ('opcja3' == $(this).val())
      { $('.wpcf7-submit').val('Pakiet'); }
   });
   });


a formularz:
Kod: Zaznacz cały
<div class="wpcf7-select-parent">
<select name="Poziom" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="Podstawowe">Podstawowe</option>
<option value="Zaawansowane">Zaawansowane</option>
<option value="Pakiet">Pakiet</option>
</select>


A przycisk

Kod: Zaznacz cały
<a class="button small button default fusion-button button-flat button-round button-small button-default button-1 buttonshadow-no" target="_blank" href="#form"><span class="fusion-button-text">Zapisuje się!</span></a>


Jak przycisk powinien być opisany?

no avatar
admin
Administrator
 
Posty: 629
Reputacja: 38 pkt
Od: 30 sty 2013, o 17:39
Lokalizacja: Kraj nad Wisłą

Re: Przycisk zmieniający opcje w menu rozwijanym form7

przez admin » 29 sty 2015, o 02:40

Sprawdź tak
Kod: Zaznacz cały
  $(".fusion-button-text").text('zapisuję się ....');

czyli zamiast
Kod: Zaznacz cały
if ('opcja1' == $(this).val()) {
 $('.wpcf7-submit').val('Podstawowe'); }

to np. dla 'Podstawowe'
Kod: Zaznacz cały
if ('Podstawowe' == $(this).val()) {
 $(".fusion-button-text").text('zapisuję się ....'); }

no avatar
Maciej Wiśniewski
 
Posty: 5
Reputacja: 0 pkt
Od: 28 sty 2015, o 09:24

Re: Przycisk zmieniający opcje w menu rozwijanym form7

przez Maciej Wiśniewski » 29 sty 2015, o 23:17

plik wygląda teraz następująco

Kod: Zaznacz cały
jQuery(function($){
   $('select[name="Poziom"]').change(function(){
   
   if ('Podstawowe' == $(this).val())
         {   $(".fusion-button-text").text('Podstawowe - 20zł netto'); }
   else if ('Zaawansowane' == $(this).val())
         {   $(".fusion-button-text").text('Zaawansowane - 25zł netto'); }
   else if ('Pakiet' == $(this).val())
         {   $(".fusion-button-text").text('Pakiet - 35zł netto'); }
   });
   });



formularz

Kod: Zaznacz cały
<div class="wpcf7-select-parent">
<select name="Poziom" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="Podstawowe - 20zł netto">Podstawowe - 20zł netto</option>
<option value="Zaawansowane - 25zł netto">Zaawansowane - 25zł netto</option>
<option value="Pakiet - 35zł netto">Pakiet - 35zł netto</option>
</select>


A jak powinien wyglądać przycisk?
Teraz wyglądają następująco:

Kod: Zaznacz cały
<a class="button small button default fusion-button button-flat button-round button-small button-default button-1 buttonshadow-no" target="_blank" href="#form"><span class="fusion-button-text">Zapisuje się!</span></a>

<a class="button small button default fusion-button button-flat button-round button-small button-default button-2 buttonshadow-no" target="_blank" href="#form"><span class="fusion-button-text">Zapisuje się!</span></a>

<a class="button small button default fusion-button button-flat button-round button-small button-default button-3 buttonshadow-no" target="_blank" href="#form"><span class="fusion-button-text">Zapisuje się!</span></a>


Kod: Zaznacz cały
href="#form

jest dodane aby po kliknięciu strona zjechała do formularza.

no avatar
admin
Administrator
 
Posty: 629
Reputacja: 38 pkt
Od: 30 sty 2013, o 17:39
Lokalizacja: Kraj nad Wisłą

Re: Przycisk zmieniający opcje w menu rozwijanym form7

przez admin » 30 sty 2015, o 00:03

Jeśli chcesz to rozwiązać za pomocą linka (a href), to pozostaw sobie tylko jeden ulr, który będzie modyfikowany, a Twój warunek będzie taki
zamiast
Kod: Zaznacz cały
$(".fusion-button-text").text('Podstawowe - 20zł netto');

podaj
Kod: Zaznacz cały
$("a.button-1").attr("href", "http://google.pl").text('Nazwa linka - przejdz ...');

Od razu zostanie zmieniony adres url w tym przypadku będzie to google.pl i nazwa linka .text() jeśli niechesz go zmieniać to poprostu usuń .text(....)

Przycisk ma następującą definicję w cf7
Kod: Zaznacz cały
[submit "Wyślij"]

w kodzie strony wygląda tak
Kod: Zaznacz cały
<input type="submit" class="wpcf7-form-control wpcf7-submit" value="Wyslij ...">

(input dla type=submit) w Twoim kodzie nie jest widoczny taki zapis więc chcesz zrobić przekierowanie na inny adres po linku, czy tak ?

daj znać czy udało Ci sie zaimplementować obsługe tego linka

no avatar
Maciej Wiśniewski
 
Posty: 5
Reputacja: 0 pkt
Od: 28 sty 2015, o 09:24

Re: Przycisk zmieniający opcje w menu rozwijanym form7

przez Maciej Wiśniewski » 30 sty 2015, o 23:29

Udało się!

błąd leżał po stronie pliku, który się wykonywał przed jqery

teraz wygląda to tak:

Kod: Zaznacz cały
   <script type="text/javascript">
   jQuery(document).ready(function() {
      jQuery('.fusion-pricing-table > div:nth-child(1) a').click( function(e) {
         e.preventDefault();
         jQuery(".Poziom select").val("Podstawowe - 20zł");
      })
      jQuery('.fusion-pricing-table > div:nth-child(2) a').click( function(e) {
         e.preventDefault();
         jQuery(".Poziom select").val("Zaawansowane - 30zł");

      })
      jQuery('.fusion-pricing-table > div:nth-child(3) a').click( function(e) {
         e.preventDefault();
         jQuery(".Poziom select").val("Pakiet - 40zł");

      })
   });
   </script>

i zostało ręcznie dodane przed </head> w pliku templaty




  • Podobne tematy
    Odpowiedzi
    Wyświetlone
    Ostatni post

Powrót do Modyfikacja wtyczek Wordpress

Kto przegląda forum Wordpress

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 2 gości