I need some help with my code as I have got a problem with defined the variable to post them in Ajax. I am working on PHP as I am fetching the data from mysql database to input the information in PHP, so I would like to post the ID in ajax.
I have defined the variable $autoid outside of the while loop, but I am unable to defined them when I am using jquery because it will show empty data when I try to post them in Ajax.
When I try this:
var ID = $(this).data('deleteid');
$.ajax({
type: 'POST',
url: "sendtest.php",
data: {ID : "deleteid"
},
success: function(resultData) {
alert(resultData)
}
Here is the full code:
<?php
// Initialize the session
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
else
{
$link = mysqli_connect('localhost', 'mydbusername', 'mydbpassword', 'mydbpassword');
$param_username = $_SESSION['username'];
$autocampaign = $_SESSION["auto_campaign"];
$autor_sql = "SELECT id, subject, day_cycle, enabled, delaysend FROM auto WHERE campaign ='$autocampaign' AND username ='$param_username'";
$autoid = '';
$results = mysqli_query($link, $auto_sql);
if (mysqli_num_rows($results) > 0)
{
while ($row = mysqli_fetch_array($results))
{
$autoid = $row["id"];
$autosubject = $row["subject"];
$autodaycycle = $row["day_cycle"];
$autoenabled = $row["enabled"];
$autodelay = $row["delaysend"];
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.calendar-content {
float: left;
width: 100%;
min-height: 112px;
border: 1px solid #ccc;
position: relative;
margin-top: -1px;
}
</style>
<div class="calendar-content">
<div style="margin-left: 40px;margin-top: 20px; height: 40px;">
<span id="autosubject" style="font-size: 25px;color: #0c7ac0;float: left;">Subject: <?php echo $autosubject ?> </span><br>
<div style="margin-left: 35px; margin-top: 15px; height: 40px;">
<form action="" method="post">
<span style="font-size: 15px; color: #ccd5d9; float: left; margin-top: -1px"><a name="autoid" id="autoid" href="#contactModal" role="button" data-toggle="modal">Send a test</a> | <a name="deleteid" id="deleteid" href="/auto/delete_auto.php?id=<?php echo $autoid; ?>"> Delete </a> | Copy to Draft | Settings</span>
</form>
</div>
</div><br>
<!-- email Modal -->
<div id="contactModal" class="modal fade" style="margin-top: 12%;" tabindex="-1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="height: 250px;">
<div class="modal-header" style="margin-bottom: 10px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Send A Test Email</h3>
</div>
<div class="modal-body" style="height: 65%;">
<form action="" method="post">
<label class="label-control" value="">Send test message to email address:</label>
<select name="emails" id="emails" value="" style="width: 400px; margin-top: 10px; margin-bottom: 18px; margin-left: 60px;">
<option selected="selected" value='title'>Title</option>";
</select><br>
<button name="send_email" id="send_email" type="submit" class="btn btn-primary" style="margin-left: 36%;" data-auto-id="<?php echo $autoid; ?>">Send Test</button>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#send_email').click(function(e) {
$(this)
.html("<span><i class='fa fa-spinner fa-spin'></i> Sending...</span>")
.prop("disabled", true);
var ID = $(this).data('deleteid');
$.ajax({
type: 'POST',
url: "sendtest.php",
data: {ID : "deleteid"
},
success: function(resultData) {
alert(resultData)
$('#contactModal').modal('hide');
$("#send_email")
.html("Send Test")
.prop("disabled", false);
}
});
});
});
</script>
<?php
}
?>
Here is the sendtest.php:
<?php
// Initialize the session
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
else if(isset($_POST))
{
$id = $_POST[$autoid];
echo "hello your id is...";
echo $id;
}
?>
What I want to achieve is when I click on a send a test hyperlink, a modal will display and when I click on a button after I select on a dropdown listbox, I want to fetch the ID from the Delete hyperlink so I can post them in ajax. The reasons I want to post the ID in ajax is because I want to stay on the same page while I want to fetch the information from the mysql database.
Can you please show me an example how I can fetch the ID from the Delete hyperlink to post them in ajax?
Thank you for understanding what I am trying to do.
