Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ XML, AJAX _ [Ajax/jQuery] Przesłanie zmiennej do formularza

Napisany przez: Przemo75 22.12.2017, 13:12:06

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ął/

[PHP] pobierz, plaintext 
  1. <?php
  2. 			http://www.php.net/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. 				?>
[PHP] pobierz, plaintext


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


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.

Napisany przez: nospor 22.12.2017, 13:13:26

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

Napisany przez: Przemo75 22.12.2017, 13:28:37

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>

Napisany przez: viking 22.12.2017, 14:04:22

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

Napisany przez: Przemo75 22.12.2017, 14:33:08

Consola niestety niczego nie pokazuje

Napisany przez: viking 22.12.2017, 14:37:07

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

Napisany przez: Przemo75 22.12.2017, 14:45:16

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);
    });

Napisany przez: viking 22.12.2017, 14:51:05

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

https://prophp.pl/article/28/propagacja_i_delegacja_zdarzen_w_javascript

Napisany przez: Przemo75 22.12.2017, 15:00:49

To chyba też nie to. Wciąż brak info w consoli.

Napisany przez: viking 22.12.2017, 15:04:25

https://jsfiddle.net/b612ntr7/

Napisany przez: Przemo75 22.12.2017, 15:23:57

W jsfiddle'u pokazuje mi taką samą zawartość consoli jak u mnie.
https://ibb.co/i3iefR

Napisany przez: viking 22.12.2017, 15:49:14

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

Napisany przez: Przemo75 22.12.2017, 18:09:27

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?

Napisany przez: viking 22.12.2017, 18:37:31

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

Napisany przez: Przemo75 22.12.2017, 19:05:31

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 ">

Napisany przez: viking 22.12.2017, 19:15:52

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.

Napisany przez: Przemo75 29.03.2018, 19:13:51

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.

Napisany przez: trueblue 29.03.2018, 19:25:11 

[HTML] pobierz, plaintext 
  1. $('#zamow').delay(3000).hide(0);
[HTML] pobierz, plaintext



Napisany przez: Przemo75 6.04.2018, 12:09:35

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

Wracając do formularza

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

[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

Napisany przez: trueblue 6.04.2018, 16:53:21 

[HTML] pobierz, plaintext 
  1. var formtyt = $(this).parents('li').find('.list-top span.temat').text();
[HTML] pobierz, plaintext

Napisany przez: Przemo75 6.04.2018, 19:26:24

Ależ to było proste. :-o Wielkie dzięki. :-)
Kombinowałem z tym text na różne sposoby, ale chyba tego nie sprawdziłem.

@trueblue można się z Tobą jakoś skontaktować na priv?

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)