Hej.
W związku z poradami, dziś stworzyłem taki testowy kod: index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Insert</title>
</head>
<body>
<label>Name</label>
<input type="text" id="name">
<label>Email</label>
<input type="text" id="email">
<button type="submit" id="button">SAVE</button>
<script>
$(document).ready(function(){
$("#button").click(function(){
var name=$("#name").val();
var email=$("#email").val();
$.ajax({
url:'insert.php',
method:'POST',
data:{
name:name,
email:email
},
success:function(data){
alert(data);
}
});
});
});
</script>
</body>
</html>
oraz insert.php
<?php
$conn = new mysqli('', '', '', '');
$name=$_POST['name'];
$email=$_POST['email'];
$sql="INSERT INTO `data` (`id`, `name`, `email`) VALUES (NULL, '$name', '$email')";
if ($conn->query($sql) === TRUE) {
echo "Dodano do bazy";
}
else
{
echo "Błąd!";
}
?>
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:
$("#subscribe-button").on("click", function(e) {
if (validateEmail(emailInput)) {
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
} else {
// $('.error_msg').css("visibility", "visible");
return false;
}
});
Próbowałem dodać to tak:
$("#subscribe-button").on("click", function(e) {
if (validateEmail(emailInput)) {
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
///////////////// DODANY KOD /////////////////////////////////////////
var name=$("#name").val();
var email=$("#email").val();
$.ajax({
url:'insert.php',
method:'POST',
data:{
name:name,
email:email
},
success:function(data){
alert(data);
}
});
//////////////////////////////////////////////////////////////////////////////////////////
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
} else {
// $('.error_msg').css("visibility", "visible");
return false;
}
});
Ale nic się nie dzieje, dane nie dodają się do bazy, a strona formularza się zmienia.
Proszę o pomoc! ;)