Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
Reply to this topicStart new topic
> [Ajax/jQuery] Przesłanie zmiennej do formularza
Przemo75
post 22.12.2017, 13:12:06
Post #1





Grupa: Zarejestrowani
Postów: 66
Pomógł: 2
Dołączył: 9.03.2004
Skąd: POLSKA

Ostrzeżenie: (0%)
-----


Witam,
Chciałbym, żeby po kliknięciu w przycisk ZAMÓW, otworzył się (ukryty) formularz, a w temacie formularza automatycznie pojawiły się (wygenerowane) dane - pola $nazwa $nr_katalogowy, a po kliknięciu w przycisk WYŚLIJ formularza lub poza nim, ten zniknął/
  1. <?php
  2. echo "<div id=\"container\">
  3. <ul class=\"list\">
  4. <li>
  5. <section class=\"list-top\">
  6.  
  7. <h5 class=\"title\">
  8. <span class=\"temat\">$nazwa $nr_katalogowy</span>
  9. </h5>
  10.  
  11. <span class=\"priceH\">Cena brutto: <b>$c_brutto</b> zł</span>
  12. <span class=\"tech\">
  13. <b>Numer katalogowy:</b> $nr_katalogowy <br/>
  14. </span>
  15. </section>
  16.  
  17. <section class=\"list-right\">
  18. <span><a class=\"zamow\">ZAMÓW</a></span>
  19. </section>
  20. <div class=\"clearfix\"></div>
  21. </li>
  22. </ul>
  23. </div>";
  24. ?>


Formularz:
  1. <div id="zamow" style="display:none" >
  2. <section id="formularz">
  3. <div class="form-container">
  4. <div class="col-md-12">
  5. <form id="main-contact-form" class="formularz" name="formularz" method="post" action="sendemail.php">
  6. <input type="text" class="form-control" id="title" name="title" required="required" placeholder="Temat *" value="<?php echo $formtyt; ?>">
  7. <input type="text" class="form-control" id="name" name="name" required="required" placeholder="Imię *">
  8. <input type="text" class="form-control" id="number" name="number" placeholder="Telefon">
  9. <input type="email" class="form-control" id="email" name="email" required="required" placeholder="Adres e-mail *">
  10. <textarea class="form-control" rows="3" id="message" name="message" required="required" placeholder="Wiadomość *"></textarea>
  11. <button class="btn btn-default" id="submit" type="submit" name="submit" >WYŚLIJ</button>
  12. <button class="btn btn-default" id="reset" type="reset" name="reset" >Wyczyść</button>
  13. </form>
  14. </div>
  15. </div>
  16. </section>
  17. </div>


Niestety mam problem z ajax'em, który mi nie działa.
Kod
$(document).ready(function() {

// Contact form
    var form = $('#main-contact-form');
    form.submit(function(event){
        event.preventDefault();
        var form_status = $('<div class="form_status"></div>');
        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: form.serialize(),
            beforeSend: function(){
                form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Wysyłanie wiadomości ...</p>').fadeIn() );
            }
        }).done(function(data){
            form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
        });
    });


    $('body').on('click','span.zamow',function()
    {
        var formtyt = $(this).parent().parent().find('span.temat').html();
    alert(formtyt);    
        $('body').find('form#main-contact-form').find('input.title').val(formtyt);
    });
});

Będę wdzięczny za wszelką pomoc.
Go to the top of the page
+Quote Post
nospor
post 22.12.2017, 13:13:26
Post #2





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




Pytanie, ktore w tym miesiacu byla zadane petryliard razy: co znaczy/czym sie objawia to "NIE DZIALA" ?


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
Przemo75
post 22.12.2017, 13:28:37
Post #3





Grupa: Zarejestrowani
Postów: 66
Pomógł: 2
Dołączył: 9.03.2004
Skąd: POLSKA

Ostrzeżenie: (0%)
-----


Przepraszam za brak precyzji.
Niestety nie działa już sam początek, czyli brak reakcji na kliknięcie w ZAMÓW.

Miałem wcześniej działającą akcję, ale to chyba nie było właściwe rozwiązanie:
Kod
<script language="javascript" type="text/javascript">
var last = '';
function hide(id)
{
    document.getElementById(id).style.display='none';
}

function show(id)
{
    if(last)
        hide(last)
    last = id;
    document.getElementById(id).style.display='block';
}
</script>

i wywołanie akcji:
Kod
<span><a class=\"zamow\" href=\"java script:show('zamow')\">ZAMÓW</a></span>
Go to the top of the page
+Quote Post
viking
post 22.12.2017, 14:04:22
Post #4





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Wstaw console.log(jakas zmienna np event); i zobacz co się dzieje, czy się wykonuje kod.


--------------------
Go to the top of the page
+Quote Post
Przemo75
post 22.12.2017, 14:33:08
Post #5





Grupa: Zarejestrowani
Postów: 66
Pomógł: 2
Dołączył: 9.03.2004
Skąd: POLSKA

Ostrzeżenie: (0%)
-----


Consola niestety niczego nie pokazuje
Go to the top of the page
+Quote Post
viking
post 22.12.2017, 14:37:07
Post #6





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Jeśli kompletnie niczego nie pokazuje chociaż masz to zdarzenie podpięte to znaczy że zły element podałeś.


--------------------
Go to the top of the page
+Quote Post
Przemo75
post 22.12.2017, 14:45:16
Post #7





Grupa: Zarejestrowani
Postów: 66
Pomógł: 2
Dołączył: 9.03.2004
Skąd: POLSKA

Ostrzeżenie: (0%)
-----


Szczerze mówiąc, to nie jestem pewien, czy w ogóle mam poprawnie napisanego ajaxa i poprawne odwołanie
Kod
    $(".zamow").on('click','span.zamow',function()
    {
    console.log(".zamow");
        var formtyt = $(this).parent().parent().find('span.temat').html();
    alert(formtyt);    
        $('body').find('form#main-contact-form').find('input.title').val(formtyt);
    });
Go to the top of the page
+Quote Post
viking
post 22.12.2017, 14:51:05
Post #8





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


No nie bardzo.
$('#container').on('click', '.zamow', function(){})

https://prophp.pl/article/28/propagacja_i_d...en_w_javascript


--------------------
Go to the top of the page
+Quote Post
Przemo75
post 22.12.2017, 15:00:49
Post #9





Grupa: Zarejestrowani
Postów: 66
Pomógł: 2
Dołączył: 9.03.2004
Skąd: POLSKA

Ostrzeżenie: (0%)
-----


To chyba też nie to. Wciąż brak info w consoli.
Go to the top of the page
+Quote Post
viking
post 22.12.2017, 15:04:25
Post #10





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


https://jsfiddle.net/b612ntr7/


--------------------
Go to the top of the page
+Quote Post
Przemo75
post 22.12.2017, 15:23:57
Post #11





Grupa: Zarejestrowani
Postów: 66
Pomógł: 2
Dołączył: 9.03.2004
Skąd: POLSKA

Ostrzeżenie: (0%)
-----


W jsfiddle'u pokazuje mi taką samą zawartość consoli jak u mnie.
Consola.png
Go to the top of the page
+Quote Post
viking
post 22.12.2017, 15:49:14
Post #12





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Bo tu dodałem czerwony kolor po kliknięciu.


--------------------
Go to the top of the page
+Quote Post
Przemo75
post 22.12.2017, 18:09:27
Post #13





Grupa: Zarejestrowani
Postów: 66
Pomógł: 2
Dołączył: 9.03.2004
Skąd: POLSKA

Ostrzeżenie: (0%)
-----


Tak, wiem.
Podmieniłem kod, do celów testowych, na ten Twój:
Kod
$('#container').on('click', '.zamow', function(e){
    e.preventDefault();
    $(this).css({'background': 'red'})
})

ale niestety u mnie to nie działa, a wydaje mi się, że powinno. Czyż nie?
Go to the top of the page
+Quote Post
viking
post 22.12.2017, 18:37:31
Post #14





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


W takim razie czegoś tu nie mówisz np nie osadziles jquery albo coś jest inaczej generowane.


--------------------
Go to the top of the page
+Quote Post
Przemo75
post 22.12.2017, 19:05:31
Post #15





Grupa: Zarejestrowani
Postów: 66
Pomógł: 2
Dołączył: 9.03.2004
Skąd: POLSKA

Ostrzeżenie: (0%)
-----


Raczej wszystko jest OK, ponieważ np. poniższy kod
Kod
    $(".zamow").click(function()
    {
        var formtyt = $(this).parent().parent().find('span.temat').html();
    alert(formtyt);    
        $('body').find('form#main-contact-form').find('input.title').val(formtyt);
    });

w połączeniu z tym
Kod
<script language="javascript" type="text/javascript">
var last = '';
function hide(id)
{
    document.getElementById(id).style.display='none';
}

function show(id)
{
    if(last)
        hide(last)
    last = id;
    document.getElementById(id).style.display='block';
}
</script>

i z tym
Kod
<span><a class=\"zamow\" href=\"java script:show('zamow')\" >ZAMÓW</a></span>

powoduje pokazanie się ukrytego formularza.
Niestety w pierwszym polu, w którym miałaby się pojawić przekazana zmienna wyświetla się
<br /><font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'><tr><th align='left' bgcolor='#f57900' colspan=
a poniżej błąd:
Notice: Undefined variable: formtyt in C:\wamp\www\Resale\zaczepy.php on line 71 Call Stack #TimeMemoryFunctionLocation 10.0017372936{main}( )...\zaczepy.php:0 ">
Go to the top of the page
+Quote Post
viking
post 22.12.2017, 19:15:52
Post #16





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Jedno nie ma nic wspólnego z drugim (js wykonuje się dawno jak php przestaje działać) chyba że masz taki śmietnik w strukturze dom że nic nie jest poprawnie pozamykane.


--------------------
Go to the top of the page
+Quote Post
Przemo75
post 29.03.2018, 19:13:51
Post #17





Grupa: Zarejestrowani
Postów: 66
Pomógł: 2
Dołączył: 9.03.2004
Skąd: POLSKA

Ostrzeżenie: (0%)
-----


Witam,
W jaki sposób zmodyfikować hide('zamow'); żeby zadziałało dopiero po komunikacie o wysłaniu wiadomości "text-success"?

Kod
    var form = $('#main-contact-form');
    form.on('submit', function(event){
        event.preventDefault();
        var form_status = $('<div class="form_status"></div>');
        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: form.serialize(),
            beforeSend: function() {
                form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Wysyłanie wiadomości ...</p>').fadeIn() );
            }
        }).done(function(data){
            form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
            hide('zamow');
        });
    });


W chwili obecnej, po wysłaniu formularza, ten od razu się zamyka, bez wyświetlenia komunikatu o poprawnym wysłaniu wiadomości.
Jak usunę hide('zamow'); to komunikat się pojawia, ale nie zamyka się formularz.
Próbowałem zmienić hide('zamow'); na np. $('#zamow').hide(1000); ale wówczas wysyła nawet kilkanaście wiadomości.
Go to the top of the page
+Quote Post
trueblue
post 29.03.2018, 19:25:11
Post #18





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


  1. $('#zamow').delay(3000).hide(0);




--------------------
Go to the top of the page
+Quote Post
Przemo75
post 6.04.2018, 12:09:35
Post #19





Grupa: Zarejestrowani
Postów: 66
Pomógł: 2
Dołączył: 9.03.2004
Skąd: POLSKA

Ostrzeżenie: (0%)
-----


Pięknie dziękuję. Działa jak trzeba. :-)

Wracając do formularza

  1. <div id="zamow" style="display:none" >
  2. <section id="formularz">
  3. <div class="form-container">
  4. <div class="col-md-12">
  5. <form id="main-contact-form" class="formularz" name="formularz" method="post" action="sendemail.php">
  6. <span class="close">x</span>
  7. <input type="text" class="form-control" id="title" name="title" required="required" placeholder="Temat *">
  8. <input type="text" class="form-control" id="name" name="name" required="required" placeholder="Imię *">
  9. <input type="text" class="form-control" id="number" name="number" placeholder="Telefon">
  10. <input type="email" class="form-control" id="email" name="email" required="required" placeholder="Adres e-mail *">
  11. <textarea class="form-control" rows="3" id="message" name="message" required="required" placeholder="Wiadomość *"></textarea>
  12. <button class="btn btn-default" id="submit" type="submit" name="submit" >WYŚLIJ</button>
  13. <button class="btn btn-default" id="reset" type="reset" name="reset" >Wyczyść</button>
  14. </form>
  15. </div>
  16. </div>
  17. </section>
  18. </div>

[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. var form = $('#main-contact-form');
  3. form.on('submit', function(event){
  4. event.preventDefault();
  5. var form_status = $('<div class="form_status"></div>');
  6. $.ajax({
  7. url: $(this).attr('action'),
  8. method: 'POST',
  9. data: form.serialize(),
  10. beforeSend: function() {
  11. form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Wysyłanie wiadomości ...</p>').fadeIn() );
  12. }
  13. }).done(function(data){
  14. form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
  15. // hide('zamow');
  16. $('#zamow').delay(3000).hide(0);
  17. });
  18. });
  19.  
  20. $('#display').on('click', '.product .zamow', function(event) {
  21. event.preventDefault();
  22. var formtyt = $(this).parents('li').find('.list-top span.temat').html();
  23. $('#main-contact-form > #title').val(formtyt);
  24. show('zamow');
  25. });
  26.  
  27. $('#zamow').on('click', '.close', function(event) {
  28. event.preventDefault();
  29. hide('zamow');
  30. });
  31. });
[JAVASCRIPT] pobierz, plaintext


Na stronie produktu głównego mam kilka produktów dodatkowych, do wyboru.
W jaki sposób przerobić formularz, żeby oprócz produktu głównego można było "załączyć" do formularza jeden z produktów dodatkowych, do wyboru.

W jaki sposób "wyciąć" tagi html
[JAVASCRIPT] pobierz, plaintext
  1. $('#display').on('click', '.product .zamow', function(event) {
  2. event.preventDefault();
  3. var formtyt = $(this).parents('li').find('.list-top span.temat').html();
  4. $('#main-contact-form > #title').val(formtyt);
  5. show('zamow');
  6. });
[JAVASCRIPT] pobierz, plaintext

gdzie przykładowy "formtyt" może wyglądać tak:

Kula mocowana na dwie śruby<br>ALFA ROMEO 145 1994 / 2001
Go to the top of the page
+Quote Post
trueblue
post 6.04.2018, 16:53:21
Post #20





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


  1. var formtyt = $(this).parents('li').find('.list-top span.temat').text();


--------------------
Go to the top of the page
+Quote Post

2 Stron V   1 2 >
Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 21:12