I am very new to PHP and javascript, so my question is fairly simple... I have this JavaScript code (Sweetalert2 text field) And I want to get the information that people type into a separate PHP file using ajax. I am struggling for days now with this problem, would be super grateful if someone showed me how to do it correctly
This is my code
<button type="button" id="new-btn" class="btn btn-primary" onclick="post();">Beitrag Erstellen</button>
<script>
$(document).ready(function () {
$('#new-btn').click(function () {
swal({
title: "Add Note",
input: "textarea",
showCancelButton: true,
confirmButtonColor: "#1FAB45",
confirmButtonText: "Save",
cancelButtonText: "Cancel",
buttonsStyling: true
}).then(function () {
swal(
"Sccess!",
"Your note has been saved!",
"success"
)
})
});
})
</script></div>
when you run your code, you will get the below error
{
"message": "Uncaught ReferenceError: $ is not defined",
"filename": "https://stacksnippets.net/js",
"lineno": 15,
"colno": 9
}
"Uncaught ReferenceError: $ is not defined", means that you have used $ symbol syntax, (that is jquery), but you have not imported it properly and defined it. For this purpose, you can add the below lines at the top of your code. Then it should work as expected.
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
And then, to use swal() in your code, you have to have sweethart script imported which can be done by adding the below one also at the top of your file
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
Finally, your working code file shold be someting like this--->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
<button type="button" id="new-btn" class="btn btn-primary" onclick="post();">Beitrag Erstellen</button>
<script>
$(document).ready(function () {
$('#new-btn').click(function () {
swal({
title: "Add Note",
input: "textarea",
showCancelButton: true,
confirmButtonColor: "#1FAB45",
confirmButtonText: "Save",
cancelButtonText: "Cancel",
buttonsStyling: true
}).then(function () {
swal(
"Sccess!",
"Your note has been saved!",
"success"
)
})
});
})
</script>
</body>
</html>