Hej.

Witam serdecznie.
Borykam się z problemem dodania wartości do bazy poprzez Javascript.
Zasada działania jest następująca: Posiadam trzystopniowy formularz: Przywitanie, w kolejnym użytkownik podaje imię oraz email, klika dalej i dostaje podziękowanie za subskrypcje mojej strony.

Na szybko stworzyłem testowo: index.html


[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  4.     <title>Insert</title>
  5. </head>
  6. <body>
  7.     <label>Name</label>
  8.     <input type="text" id="name"> 
  9.     <label>Email</label>
  10.     <input type="text" id="email">
  11.     <button type="submit" id="button">SAVE</button>    
  12.     <script>
  13.         $(document).ready(function(){
  14.             $("#button").click(function(){
  15.                 var name=$("#name").val();
  16.                 var email=$("#email").val();
  17.                 $.ajax({
  18.                     url:'insert.php',
  19.                     method:'POST',
  20.                     data:{
  21.                         name:name,
  22.                         email:email
  23.                     },
  24.                    success:function(data){
  25.                        alert(data);
  26.                    }
  27.                 });
  28.             });
  29.         });
  30.     </script>
  31. </body>
  32. </html>
[PHP] pobierz, plaintext



oraz insert.php


[PHP] pobierz, plaintext 
  1. <?php
  2. $conn = new mysqli('', '', '', '');
  3. $name=$_POST['name'];
  4. $email=$_POST['email'];
  5. $sql="INSERT INTO `data` (`id`, `name`, `email`) VALUES (NULL, '$name', '$email')";
  6. if ($conn->query($sql) === TRUE) {
  7.     echo "Dodano do bazy";
  8. }
  9. else 
  10. {
  11.     echo "Błąd!";
  12. }
  13. ?>
[PHP] pobierz, plaintext



I kod sam w sobie działa. Dodaje do bazy imie oraz email.

Tylko teraz jak to połączyć z moim kodem aby działało po kliknięciu subscribe_buton?

.js subscribe_button wygląda tak (zmienia formy + dodaje pasek postępu):


[PHP] pobierz, plaintext 
  1. $("#subscribe-button").on("click", function(e) {
  2.   if (validateEmail(emailInput)) {
  3. 	if(animating) return false;
  4. 	animating = true;
  5.  
  6. 	current_fs = $(this).parent();
  7. 	next_fs = $(this).parent().next();
  8.  
  9. 	//activate next step on progressbar using the index of next_fs
  10. 	$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  11.  
  12. 	//show the next fieldset
  13. 	next_fs.show(); 
  14. 	//hide the current fieldset with style
  15. 	current_fs.animate({opacity: 0}, {
  16. 		step: function(now, mx) {
  17. 			//as the opacity of current_fs reduces to 0 - stored in "now"
  18. 			//1. scale current_fs down to 80%
  19. 			scale = 1 - (1 - now) * 0.2;
  20. 			//2. bring next_fs from the right(50%)
  21. 			left = (now * 50)+"%";
  22. 			//3. increase opacity of next_fs to 1 as it moves in
  23. 			opacity = 1 - now;
  24. 			current_fs.css({
  25.         'transform': 'scale('+scale+')',
  26.         'position': 'absolute'
  27.       });
  28. 			next_fs.css({'left': left, 'opacity': opacity});
  29. 		}, 
  30. 		duration: 800, 
  31. 		complete: function(){
  32. 			current_fs.hide();
  33. 			animating = false;
  34.  
  35. 		}, 
  36. 		//this comes from the custom easing plugin
  37. 		easing: 'easeInOutBack'
  38.  
  39. 	});
  40.   } else {
  41.  //   $('.error_msg').css("visibility", "visible");
  42.     return false;
  43.   }
  44. });
[PHP] pobierz, plaintext

A sam formularz jest bardzo podobny, tylko na mój użytek wygląda tak:

[HTML] pobierz, plaintext 
  1.  <fieldset>
  2.  
  3.     <h2 class="fs-title">Krok drugi</h2>
  4.     <h3 class="fs-subtitle">Chcesz zapisać się na naszą subskrypcje? Zapraszamy!</h3>      
  5.     <input type="text" id="name" name="imie" placeholder="Imię" />
  6.     <input class="email-form__input" id="email-input" type="email" name="email" placeholder="darek@gmail.com">
  7.         <input id="subscribe-button" class="email-form__button" type="submit" value="Dalej">
  8.      <input type="button" name="previous" class="previous action-button" value="Cofnij" /  
  9.   </fieldset>
[HTML] pobierz, plaintext



Próbowałem dodać to tak (DODANY KOD):


[PHP] pobierz, plaintext 
  1. $("#subscribe-button").on("click", function(e) {
  2.   if (validateEmail(emailInput)) {
  3. 	if(animating) return false;
  4. 	animating = true;
  5.  
  6. 	current_fs = $(this).parent();
  7. 	next_fs = $(this).parent().next();
  8.  
  9.        ///////////////// DODANY KOD /////////////////////////////////////////             
  10.                 var name=$("#name").val();
  11.                 var email=$("#email-input").val();
  12.                 $.ajax({
  13.                     url:'insert.php',
  14.                     method:'POST',
  15.                     data:{
  16.                         name:name,
  17.                         email:email
  18.                     },
  19.                    success:function(data){
  20.                        alert(data);
  21.                    }
  22.                 });
  23.             //////////////////////////////////////////////////////////////////////////////////////////
  24. 	//activate next step on progressbar using the index of next_fs
  25. 	$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  26.  
  27. 	//show the next fieldset
  28. 	next_fs.show(); 
  29. 	//hide the current fieldset with style
  30. 	current_fs.animate({opacity: 0}, {
  31. 		step: function(now, mx) {
  32. 			//as the opacity of current_fs reduces to 0 - stored in "now"
  33. 			//1. scale current_fs down to 80%
  34. 			scale = 1 - (1 - now) * 0.2;
  35. 			//2. bring next_fs from the right(50%)
  36. 			left = (now * 50)+"%";
  37. 			//3. increase opacity of next_fs to 1 as it moves in
  38. 			opacity = 1 - now;
  39. 			current_fs.css({
  40.         'transform': 'scale('+scale+')',
  41.         'position': 'absolute'
  42.       });
  43. 			next_fs.css({'left': left, 'opacity': opacity});
  44. 		}, 
  45. 		duration: 800, 
  46. 		complete: function(){
  47. 			current_fs.hide();
  48. 			animating = false;
  49.  
  50. 		}, 
  51. 		//this comes from the custom easing plugin
  52. 		easing: 'easeInOutBack'
  53.  
  54. 	});
  55.   } else {
  56.  //   $('.error_msg').css("visibility", "visible");
  57.     return false;
  58.   }
  59. });
[PHP] pobierz, plaintext


Ale nic się nie dzieje - w sensie sam forumularz działa tak samo poprawnie jak wcześniej, ale niestety żadne dane nie dodają się do bazy (a strona formularza się zmienia na podziękowania)

Proszę o pomoc! wink.gif