Wsparcie » Zaawansowane » Własny formularz kontaktowy i AJAX

  • Rozwiązano Damian P.

    (@damian-p)


    Cześć wszystkim

    Zbudowałem własny formularz kontaktowy (czyt. wbudowany w szablon, bez użycia pluginów). Chcę go połączyć z JS aby informacje o sukcesie / porażce wysłania wiadomości wyświetlały się bez przeładowywania strony. Stworzyłem więc taki oto kod: http://ideone.com/IsjW1n Problem w tym, że formularz w ogóle nie wysyła wiadomości i nie wiem jak to ugryźć. Skrypt o którym mowa znajduje się na samym końcu. Czy mógłby ktoś rzucić okiem? 🙂

Viewing 13 replies - 1 through 13 (of 13 total)
  • Chyba należy podać ścieżkę do pliku ajax:

    Masz:

    $.ajax({
       url: $('#index_form').attr('action'),

    ??
    A powinno być raczej:

    $.ajax({
              url: '<?php echo admin_url("admin-ajax.php") ?>',

    (jeżeli kod jest wklejony w php)

    Czyż nie?

    Bo to w końcu WordPress jest.

    Kierowałem się tymi przykładami: KLIK i Klik
    i w szybki sposób udało mi się zrobić szkielet działającego formularza.

    Moderator amistad18

    (@amistad18)

    Ten kod powinien wylądować w functions.php motywu.

    Co w konsoli widzisz podczas próby wysyłania formularza?

    Thread Starter Damian P.

    (@damian-p)

    Konsola:

    jquery.min.js:4 XHR finished loading: POST "http://love90.pl/test/email_form_submit".
    send @ jquery.min.js:4
    ajax @ jquery.min.js:4
    (anonymous) @ (index):406
    dispatch @ jquery.min.js:3
    q.handle @ jquery.min.js:3
    Thread Starter Damian P.

    (@damian-p)

    Tru, ale nawet to nic nie zmienia.

    Moderator amistad18

    (@amistad18)

    Chciał bym zobaczyć screena z konsoli z akcji wysyłania formularza, jaka jest odpowiedź, oraz jakie dane wysyłasz (post?), na jaki adres etc.

    Thread Starter Damian P.

    (@damian-p)

    @amistad18 dziękuję Ci za odpowiedź 🙂

    Myślę, że najlepiej będzie jak zerkniesz sobie na formularz bezpośrednio na stronie: http://love90.pl/test/#contact_index wersja testowa, więc nie ma nic poza samym formularzem.

    Dzięki za zaangażowanie 🙂

    Moderator amistad18

    (@amistad18)

    data: {
           action: 'data_fetch', // wp_ajax_*, wp_ajax_nopriv_*
    },

    Nie pokrywa się z:

    add_action('wp_ajax_email_form_submit', 'send_email_form');
    add_action('wp_ajax_nopriv_email_form_submit', 'send_email_form');
    Thread Starter Damian P.

    (@damian-p)

    Ach, wprowadziłem Cię niechcący w błąd. W nocy usiłowałem jeszcze raz wszystko zrobić od początku, w kodzie do którego umieściłem link na początku wątku faktycznie nie pokrywa się to z 'action’ które widzisz obecnie na stronie. Jednak spójrz tutaj:

    http://ideone.com/kyybQ1

    Tak wygląda aktualny kod, action pokrywa się z add_action (chyba, że jestem ślepy i czegoś nie dostrzegam… :/ )

    • Ta odpowiedź została zmodyfikowana 5 years, 1 month temu przez Damian P..
    Moderator amistad18

    (@amistad18)

    Chyba jednak nadal się nie pokrywa 🙂

    Zacznij od tego że rozdzielisz poprawnie kod zamiast mieć śmietnik w jednym pliku. Akcje i funkcje do nich podpięte do functions.php, JS do osobnego pliku i wp_register_script() oraz wp_enqueue_script(). Jak chcesz JS karmić zmiennymi to wp_localize_script().

    Jak skończysz to podaj znowu linka do jakiejś testowej strony gdzie on działa.

    Thread Starter Damian P.

    (@damian-p)

    Zrobione, rozdzielone. Wersja testowa: http://love90.pl/test/#contact_index

    Kod złożyłem w jeden plik aby łatwiej się go udostępniało na forum/ach… no ale prawda, tak jest poprawnie.

    Moderator amistad18

    (@amistad18)

    Pokaż jeszcze plik functions.php.

    Teraz wysyłasz POSTa ajaxem na adres http://love90.pl/test/[object%20Object], i cały czas na action: 'data_fetch'

    Thread Starter Damian P.

    (@damian-p)

    Oto i functions.php: http://ideone.com/nasWRb 🙂

    Nie możesz tak po prostu użyć funkcji rejestrującej i wrzucającej skrypty. Musisz je podpiąć pod akcję: ’wp_enqueue_scripts’

    Patrz: dokumentacja.

    To raz.

    Dwa, co najważniejsze:

    data: {
       action: 'data_fetch', // wp_ajax_*, wp_ajax_nopriv_*
    },

    nie odnosi się do nazwy funkcji a do parametru action jakiego używasz w zaczepie akcji: wp_ajax_* i wp_ajax_nopriv_*.

    Nazwa funkcji jest bez znaczenia (choć ma być unikatowa), nazwa akcji ma być unikatowa i pokrywać się z tą użytą w zaczepie:

    add_action( 'wp_ajax_$nazwa_akcji', 'nazwa_funkcji' );
    add_action( 'wp_ajax_nopriv_$nazwa_akcji', 'nazwa_funkcji' );

    data: {
       action: '$nazwa_akcji', // wp_ajax_*, wp_ajax_nopriv_*
    },

    lub po przez użycie ukrytego pola (ten sam efekt):

    $lt;input type="hidden" name="action" value="$nazwa_akcji">

    Tu też patrz: dokumentacja.

    Lub polski artykuł: KLIK, lub inny dobry przykład: KLIK.

    Ale przede wszystkim to stwórz sobie najpierw prosty formularz (tu przykład), który będzie działał a dopiero potem dodawaj zawijasy.

    P.s. Jak wyślesz wiadomość testową to na maila otrzymasz link do pełnej działającej wersji formularza ajax.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Temat ‘Własny formularz kontaktowy i AJAX’ jest zamknięty na nowe odpowiedzi.