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
<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) {
}
else
{
}
?>
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):
$("#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;
}
});
A sam formularz jest bardzo podobny, tylko na mój użytek wygląda tak:
<h2 class="fs-title">Krok drugi
</h2> <h3 class="fs-subtitle">Chcesz zapisać się na naszą subskrypcje? Zapraszamy!
</h3> <input type="text" id="name" name="imie" placeholder="Imię" /> <input class="email-form__input" id="email-input" type="email" name="email" placeholder="darek@gmail.com"> <input id="subscribe-button" class="email-form__button" type="submit" value="Dalej"> <input type="button" name="previous" class="previous action-button" value="Cofnij" /
Próbowałem dodać to tak (DODANY KOD):
$("#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-input").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 - 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!
Ten post edytował Owneds 19.01.2019, 17:31:48
[PHP][JAVASCRIPT] Dodawanie danych do bazy po kliknięciu przycisku
19.01.2019, 17:26:55
