Bootstrap Email Sender via PHP - javascript

I am trying to use bootstrap to have a modal pop up and lets the user enter their email and message. I already have the modal working and displaying the 2 fields. When the user clicks send I want the content of both fields to be passed to a php file on my server.
My modal code:
<!--Email Modal-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title" id="myModalLabel">Contact Me</h4>
</div>
<div class="modal-body higher">
<div class="input-group">
<span class="input-group-addon">Email: </span>
<input type="text" class="form-control" placeholder=" Enter your email address..">
</div>
<br>
<div class="input-group">
<span class="input-group-addon" >Message:</span>
<textarea class="form-control" rows="10"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="http://www.example.com/dist/php/SendEmail.php?sender=mysender&body=mybody">Send Email</button>
</div>
</div>
</div>
</div>
The contents of that php file are:
<?php
$recipient = $_POST["myemail#email.com"];
$sender = $_POST["sender"];
$body = $_POST["body"];
$headers = 'From: sample#sample.com' . "\r\n" .
'Reply-To: sample#sample.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$sendMail = mail($recipient, $sender, $body, $headers);
if( $sendMail == true )
{
echo "Message sent successfully...";
}
else
{
echo "Message could not be sent...";
}
?>
I feel the error might lie in the on click of the send button, or am I not passing in the values to the php file right?

You're sending the data like this:
http://www.example.com/dist/php/SendEmail.php?sender=mysender&body=mybody
use $_GET not $_POST
$sender = $_POST["sender"];
It also looks like you're trying to submit other data such an email address. You're mixing both $_POST and $_GET. You should just wrap this in a form tag and submit it to your php script.
Edit: after looking again, your javascript is wrong, use this...
<button onclick="location.href = 'http://www.example.com/dist/php/SendEmail.php?sender=mysender&body=mybody';" class="btn btn-primary">Send Email</button>

Related

how to add a copy button

I created a bootstrap modal and when I click on the send button I have a result.
I want to add a copy button to copy the text.
My approach does not work. Maybe I forgetten something ?
Thank you
<span class="text-white"><i class="bi bi-chat-left-dots-fill" alt="Open the chat"></i><span>
<div class="modal fade" id="chatModal" tabindex="-1" role="dialog" aria-labelledby="chatModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="chatModalLabel">What do you want to resolve ?</h5>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<div class="form-group">
<textarea class="form-control" id="messageGpt" rows="3" placeholder="Write a message (be patient on the response)"></textarea>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" id="sendGpt">Send</button>
</div>
<div class="separator"></div>
<div class="card">
<div class="chat-box-message text-start">
<div id="chatGpt-output">
<!-- add copy button -->
<button type="button" id="button-copy" data-bs-toggle="tooltip" title="" class="btn btn-light" data-bs-original-title="Copy" aria-label="Copy"><i class="bi bi-clipboard2"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
below my script to let open the modal when I click on the button send
$output .= '<script defer>';
$output .= '$(document).ready(function() {';
$output .= '$("#sendGpt").click(function() {';
$output .= 'let message = $("#messageGpt").val();';
$output .= '$.post("' . $url . '", {message: message}, function(data) {';
$output .= '$("#chatGpt-output").html(data);';
$output .= '});';
$output .= '});';
$output .= '});';
$output .= '</script>';
echo $output;

I don't want to reload the page with post request

I create form, the popup window (in the same file with the form) and the script that creates the post request when the user clicks the button, but when I click the button the page relaoded automatically and the popup window never appears
*I want to pass a parameter from the form to popup window in order to identify the product that the user selected.
My code is below:
*The form is inside of a loop in order to create many items
index.php
while($row = mysqli_fetch_assoc($select_all_products)) {
$product_id = $row['id'];
$product_name = $row['name'];
$product_price1 = $row['price1'];
$product_price2 = $row['price2'];
$product_price3 = $row['price3'];
$product_image= $row['photo'];
?>
<div class="col-lg-6 col-md-6 item-entry mb-4">
<form method="post" >
<a href="#" class="product-item md-height bg-gray d-block">
<?php echo "<img width='300px' height='300px' src='images/$product_image' alt='Image' class='img-fluid'>"; ?>
</a>
<h2 class="item-title"><?php echo $product_name; ?></h2>
<input id="id" type="hidden" name="id" value="<?php echo $product_id; ?>">
<label>shop1: </label>
<strong class="item-price"><?php echo $product_price1 ."\xE2\x82\xAc".str_repeat(' ', 5) ; ?></strong>
<label>shop2 </label>
<strong class="item-price"><?php echo $product_price2 ."\xE2\x82\xAc".str_repeat(' ', 5) ; ?></strong>
<label>shop3 </label>
<strong class="item-price"><?php echo $product_price3 ."\xE2\x82\xAc" .str_repeat(' ', 3) ; ?></strong>
<button type="submit" onclick="loadData(this.getAttribute('data-id'));" data-id="<?php echo $product_id; ?>" class="btn btn-primary btn-sm rounded" data-toggle="modal" data-target="#myModal">Change Price<i class="fas fa-tags"></i></button>
</form>
</div>
<?php
}
?>
popup window :
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
script :
<script type="application/javascript">
function loadData(id) {
id.preventDefault();
$.ajax({
url: "price.php",
method: "POST",
data: {get_data: 1, id: id},
success: function (response) {
console.log(response);
}
});
}
</script>
From the console log I found that the post request send it but with reload page and for this reason the the popup window never appears. 1
What I can do in order the page not reloaded ,the pop up appeared get the post request?
Thank you
To prevent the form from being submitted and hence the page refresh, you should call preventDefault on the form's onsubmit event, like this: <form method="post" onsubmit="event.preventDefault()">. It also works returning false like this: <form method="post" onsubmit="return false">.
I've made an example with the php part removed so you can see. Hope this helps.

Insert data from modal to database

I want to make a form appear on a popup window when I click "Add" button. So I am using a modal to show a PHP form but when I tried to save the data inserted into the form into database, it does not work. When I clicked save, a weird URL came out as so :
.../pembelitkatakutest.php?image=025pikachu_xy_anime_3.png&save=
I am not sure, but I think the URL should not have the "image=025pikachu_xy_anime_3.png&" part.
My code is as below:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Add Tongue Twister</button><br><br><br>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Add Tongue Twister</h4>
</div>
<div class="modal-body">
<form method = "POST">
<div class="form-group">
<label for="usr">Please Choose a Picture:</label>
<input type="file" name="image">
<script type="text/javascript">
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
</script>
</div>
<div class="form-group">
<label for="pwd">Please write the tongue twister:</label>
<input type="text" rows = "3" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="save">Save changes</button>
<?php if(isset($_POST['save']))
{
//target folder to keep the media
$target = "images/".basename($_FILES['image']['name']);
//get all submitted data from form
$image = $_FILES['image']['name'];
$text = $_POST['text'];
if(!empty($_FILES['image']['name']))
{
$sql = "INSERT INTO pembelitkataku(image, text) VALUES ('$image','$text')";
mysqli_query($db, $sql);
}
else
{
$message = "Sila pilih semua fail";
echo "<script type='text/javascript'>alert('$message');</script>";
}
move_uploaded_file($_FILES['image']['tmp_name'], $target);
}
?>
</div>
</form>
</div>
May I know what went wrong in my code and what can I do to fix it ?
If it is possible, I want to avoid using Javascript as it is very confusing to understand.
Thank you.
Use <form method="POST" enctype="multipart/form-data">
Because by default your code is making GET request but your PHP code want to receive a POST request. You can see it in this line of code :
if(isset($_POST['save']))

how to make javascript works after php database query?

I am using bootstrap framework, javascript(jquery) and php for my website.
So basic I want to press a button, by pressing it, we query database and return result, the results will be displayed in the bootstrap javascript powered modal: because popup modal is written in javascript and its run after php, the $row is always shown as undefined. I am wondering if there is a way to make php runs before js?
<form action="" method="post">
<input type="text" id="field" name="field">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" name="submit" id="submit">
Launch demo modal
</button>
</form>
<?php
if(isset($_POST['submit'])){
$link = mysqli_connect("myhost","myuser","mypassw","mybd") or die("Error " . mysqli_error($link));
//consultation:
$query = "SELECT name FROM mytable" or die("Error in the consult.." . mysqli_error($link));
//execute the query.
$result = mysqli_query($link, $query);
//display information:
if ($row = mysqli_fetch_array($result)) {
?>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<?php echo $row["name"] . "<br>"; ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<?php
}
}
?>
You are better off separating this request for data to an AJAX request, and then open the modal in the AJAX success callback.
example:
ajax_handler.php:
if(isset($_POST['submit'])){
$link = mysqli_connect("myhost","myuser","mypassw","mybd") or die("Error " . mysqli_error($link));
//consultation:
$query = "SELECT name FROM mytable";
//execute the query.
$result = mysqli_query($link, $query);
$rows = mysqli_fetch_array($result);
//always wrap a response in an 'object' (associative array)
//more infor here: http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx/
echo json_encode(array('result' => $rows));
}
js code:
$("#submit").on('click', function(){
$.post('ajax_handler.php', {submit: true}, function(data){
var data = JSON.parse(data), markup = '';
for(var i = 0; i < data.result.length; i++){
markup = markup + '<div>' + data.result[i] + '</div>';
}
$('myModal').modal('open');
$('.modal-body').append(markup)
});
});
markup:
<button class="btn btn-primary btn-lg" id="submit">

load bootstrap modal as alert after inserting data to database

im new to php and still learning. i tried to customized bootstrap template and tried to connect a form to a database.
insert.php
$con=mysqli_connect("localhost","root","","finalproject");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql="INSERT INTO stokbarang (Merek, Tipe, Harga)
VALUES
('$_POST[merek]','$_POST[tipe]','$_POST[harga]')";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error($con));
}
header("Location: stock.php");
and a page where the form is stock.php, the form is below :
<form name="sentMessage" class="well" id="contactForm" novalidate action = "insert.php" method = "post">
<legend>Masukkan Data</legend>
<div class="control-group">
<div class="controls">
<label>Merek Mobil</label>
<input type="text" class="form-control" placeholder="Merek mobil" id="merek" required
data-validation-required-message="Masukkan Merek mobil" name = "merek"/>
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<label>Tipe Mobil</label>
<input type="text" class="form-control" placeholder="Tipe Mobil" id="email" required
data-validation-required-message="Masukkan tipe mobil" name = "tipe"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<label>Harga</label>
<input type="number" class="form-control" placeholder="Harga"
id="email" required
data-validation-required-message="Masukkan harga mobil" name = "harga"/>
</div>
<br>
<div id="success"> </span></div> <!-- For success/fail messages -->
<br>
<button type="submit" class="btn btn-primary pull-right">Insert</button><br/><br>
</form>
the form is work and i can insert the data by clicking Insert button to database.
Now i want to add a modal as alert after the form is submitted to database in stock.php
i modified the Insert button as following
<button type="submit" class="btn btn-primary pull-right" data-toggle="modal" data-target="#myModal">Insert</button><br/><br>
here is the modal :
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">SUCCESS</h4>
</div>
<div class="modal-body">
<p>Data Inserted!!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
but it seems like the button only trigger the modal to appear without submit the form to database. Any suggestion to make the modal appear after successful inserting data to database (after redirecting to stock.php)? or maybe there is better way to make alert after redirect? thank you for your time and help :)
change the header location on insert.php as below :
header("Location: stock.php?sucsess=true");
then stock.php on the head :
<script type="text/javascript">
<?php
if ($_GET['sucsess'] =='true'){
echo '$(function() {
$( "#myModal" ).dialog();
});'
}
?>
</script>
here is a demo only for the alert demo

Categories