We Keep Coding

How do I display reCAPTCHA in modals with different id?

This is my code:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<?php
$result = $DBConnect->query("SELECT id FROM table");
while ($row = $result->fetch()) { ?>
Reply
<?php include "modal.php"; } ?>
// modal.php
<div class="modal fade" id="modal<?php echo $row['id']; ?>" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form action="" method="post" enctype="multipart/form-data" autocomplete="on">
<div class="modal-body">
<div class="row">
<label>Name : </label>
<input type="text" name="customer_name" class="pass-input" value="" required>
<label>Email : </label>
<input type="email" name="customer_email" class="pass-input" value="">
</div>
</div>
<div class="modal-footer">
<div id="captcha"></div>
<button class="btn" type="submit" name="send">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(function () {
var anchor = window.location.hash;
$(anchor).modal('show');
setTimeout(function() {
createRecaptcha();
}, 100);
});
function createRecaptcha() {
grecaptcha.render("captcha", {sitekey: "SITE_KEY", theme: "light"});
}
</script>
In above code Recaptcha works for modal opened when I click first Reply button in list of many Reply buttons. When I click other Reply buttons Recaptcha wont display in the modal popup since I used only used only one id in <div id="captcha"></div>.
How can I modify my code so that when I open different modal, Recaptcha will show in each modal.

How to create animation alert system with toastr and php mysql

Hi I want to create animation notification system with toastr and PHP MySQL, But I don't understand how can I do that. I already Integrate jQuery Toastr Plugin in my header and footer files I want to create like below picture
This is example Image
I'm new so I can't understand how I can do that. Please help me.
Below are my html and PHP code. Please tell me How I can call success message, warning message and error message.
<?php include_once('inc/header.php');
$database = new Database();
$db = $database->getConnection();
$addmouja = new Mutation($db);
?>
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box">
<h4 class="page-title">নতুন মৌজা</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item">ড্যাশবোর্ড</li>
<li class="breadcrumb-item active">নতুন মৌজা</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-12">
<div class="card font-18">
<div class="card-body">
<?php
if(isset($_POST['add_mouja'])){
$mouja_n = $_POST['mname'];
$mouja_jal = $_POST['mjal'];
if($addmouja->addMouja($mouja_n, $mouja_jal)){
echo '<script type="text/javascript">toastr.success("Have Fun")</script>';
}else{
echo "<div id='toastr-four'></div>";
}
}
?>
<form method="post">
<div class="row">
<div class="col-md-6">
<label for="moujaName" class="col-form-label">মৌজার নাম <span style="color: red">*</span></label>
<input type="text" class="form-control" name="mname" autocomplete="off" required>
</div>
<div class="col-md-6">
<label for="moujaJal" class="col-form-label">জে, এল নং <span style="color: red">*</span></label>
<input type="text" class="form-control" name="mjal" autocomplete="off" required>
</div>
</div>
<p class="text-center">
<button type="submit" name="add_mouja" class="btn btn-success mt-2">Add Mouja</button>
<button type="reset" class="btn btn-danger mt-2">Reset</button>
</p>
</form>
</div>
</div>
</div>
</div>
<?php include_once('inc/footer.php');?> ```

i want to display two popups, one for error message and other for success message

I'm new to modals, i want to submit a form and then show success popup if user form is validated else want to show error popup. Also my it should execute php file for sending the email to user in background.
So, far i'm successful in executing the php file in background and show the model when user clicks on submit button.
But i want the popup to show when the form is validated. Also i want to use type="submit" instead of type="button" for form submit.
Here's my code :
<!-- javascript code to execute php file -->
<script type="text/javascript">
function executePhp() {
$.post("sendmail.php");
return false;
}
</script>
<!-- javascript code ends -->
<form class="well" action="" method="">
<div class="form-group col-md-6">
<label for="inputPassword4">Full Name</label>
<input type="text" name="name" class="form-control" id="inputPassword4" placeholder="Enter Full Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Phone Number</label>
<input type="number" name="mobile" class="form-control" id="inputEmail4" placeholder="Enter Mobile Number">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Email</label>
<input type="email" name="email" class="form-control" id="inputPassword4" placeholder="Enter Your Email">
</div>
</div>
<button type="button" class="btn btn-primary" onclick="executePhp()" style="margin-left: 3%;"
data-toggle="modal" data-target="#myModal">Check</button>
</form>
<!-- Code for popup -->
<!-- Modal -->
<div class="modal fade mymodal" id="myModal" role="dialog">
<div class="modal-dialog mydialog">
<!-- Modal content-->
<div class="modal-content mycontent">
<div class="modal-header myheader">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Message</h3>
</div>
<div class="modal-body mybody">
<br>
<br>
<h3>Thanks for choosing</h3>
<h4>
Your details will arive by email.
Sit back, we'll get back to you soon.
</h4>
<br>
<br>
</div>
<div class="modal-footer myfooter">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Code for popup end-->
Thank you.

You can use Jquery to achieve this.
In you php you can have two variables before the validation like:
$popup_message = "";
$popup_message_color = "";
Now if the form is validated you can display the modal like this:
$popup_message = "login successfully.";
$popup_message_color = "success";
//Open Modal
echo "<script type='text/javascript'>
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>";
In the modal body you can display the message and color.
<div class="modal-body">
<p class="text-<?php echo $popup_message_color; ?>"><?php echo $popup_message; ?></p>
</div>
The same would be done for if validation fails, just change your message and color to $popup_message_color = "danger";
Note If you are validation to another page then the modal should be in that page and you change the close buttons to a link to go back.
Also php script should come after you loaded the jquery.

Bootstrap Modal content issue after refreshing content

I have this modal
<!-- Modal -->
<div id="normale" class="modal fade" role="dialog">
<div class="modal-dialog" style="background-color:white">
<!-- Modal content-->
<div class="modal-content" style="background-color:white">
<div class="modal-header" style="background-color:white">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Aggiungi al carrello</h4>
</div>
<div class="modal-body" id="mod_carrello" style="background-color:white">
<div class="hidden">
<input type="text" id="id_tariffa" name="id_tariffa" value="id_tariffa" readonly class="form-control hidethis" style="display:none" >
</div>
<div class="form-group hidethis " style="display:none" >
<label for="Id" class=" control-label col-md-4 text-left"> Id </label>
<div class="col-md-6">
<input type="text" id="id" name="id">
</div>
<div class="col-md-2">
</div>
</div>
<div class="form-group hidethis " style="display:none">
<label for="Cod Carrello" class=" control-label col-md-4 text-left"> Cod Carrello </label>
<div class="col-md-6">
<?php
$persistent = DB::table('carrello')->where('entry_by', \Session::get('uid'))->first();
if (empty($persistent)) {
$chars = "abcdefghijkmnopqrstuvwxyz023456789";
srand((double)microtime()*1000000);
$i = 0;
$code = '' ;
while ($i <= 20) {
$num = rand() % 33;
$tmp = substr($chars, $num, 1);
$code = $code . $tmp;
$i++; } ?>
<input type="text" name="cod_carrello" value="{{ $code }}" id="cod_carrello">
<?php } else {
$cod_carrello = $persistent->cod_carrello; ?>
<input type="text" name="cod_carrello" value="{{ $cod_carrello }}" id="cod_carrello">
<?php } ?>
</div>
<div class="col-md-2">
</div>
</div>
<div class="form-group " >
<label for="Quantita" class=" control-label col-md-4 text-left"> Quantita </label>
<div class="col-md-6">
<input type="text" class="form-control" id="quantita" name="quantita">
</div>
<div class="col-md-2">
</div>
</div>
</fieldset>
</div>
<div class="modal-footer" style="background-color:white">
<button type="submit" id="add_to_cart" class="btn btn-assertive">Aggiungi</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
That is an Ajax cart.
This is the Jquery script:
$('#add_to_cart').click(function(){
var button = $(event.relatedTarget) // Button that triggered the modal
var id_tariffa = button.data('tariffa')
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.hidden input').val(id_tariffa);
var cod_carrello = document.getElementById("cod_carrello").value;
var quantita = document.getElementById("quantita").value;
$.ajax({
url: 'carrello-ajax',
type: "post",
data: {'id_tariffa':id_tariffa, 'cod_carrello':cod_carrello, 'quantita':quantita, '_token': $('input[name=_token]').val()},
success: function(data){
if ( data.OK == 1 ) {
var mod_carrello_original = $("#mod_carrello").html();
$('#mod_carrello').html('<h1 align="center" style="color:green; font-size: 21.5em;"><i class="fa fa-smile-o"></i></h1><br><br><h3 align="center">Servizio aggiunto correttamente al carrello</h3>');
$("#normale").on("hidden.bs.modal", function(){
$('#mod_carrello').html(mod_carrello_original);
});
} else {
$('#mod_carrello').html('<h1 style="color:green"><i class="fa fa-error"></i><br>Si è verificato un errore</h2>');
}
}
});
});
});
My problem is that after 2 times that I input and add to cart some product without any problem the modal no longer updates content nor shows every time the success message.
I hope that someone can help me.

Solved using a fresh div with the same content bu different id

keeping bootstrap modal active

hi how to keep bootstrap modal active after clicking submit button. In my case after clicking submit button it refresh the page so it close the modal. In my modal form i have a textboxes that when you click submit it will save the data in database. Now i have a php code that check the textboxes if their empty it will show/say the error and if not empty it will says success.
Thanks in advance who will help.
This is my code
<div class="modal fade" id="addtopic" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Add Topic</h4>
</div>
<form method="POST" action="index.php" role="form" id="saveform">
<div class="modal-body">
<div class="form-group">
<label for="cCategory">Category</label>
<input type="text" class="form-control" id="cCategory" name="category" value="<?php if (!empty($categ)) { echo $categ; } ?>">
</div>
<div class="form-group">
<label for="cTitle">Title</label>
<input type="text" class="form-control" id="cTitle" name="topicTitle" value="<?php if (!empty($topicTitle)) { echo $topicTitle; } ?>">
</div>
<div class="form-group">
<label for="cDesc">Description</label>
<textarea class="form-control custom-control" rows="3" style="resize:none" name="desc" value="<?php if (!empty($desc)) { echo $desc; } ?>"> </textarea>
</div>
<div class="form-group">
<label for="cDesc">Created By</label>
<input type="text" class="form-control" id="cDesc" name="createdby" value="<?php if (!empty($created)) { echo $created; } ?>">
</div>
</div>
<div class="modal-footer">
if($insert = $db->query("
INSERT INTO pncontent (category, title, description, createdby, dateadded)
VALUES ('$categ', '$topicTitle', '$desc', '$created', NOW() )
")) {
echo "<p class='pull-left'> Topic Save! </p>";
}else {
echo "<p class='pull-left'>Failed to Save</p>";
die($db->error);
}
}else {
echo "<p class='pull-left'>All Fields are required</p>";
$desc = $_POST['desc'];
$categ = $_POST['category'];
$topicTitle = $_POST['topicTitle'];
$created = $_POST['createdby'];
}
}
?>
<button type="submit" name="Sbt" class="btn btn-primary" >Save changes</button>
<button data-dismiss="modal" class="btn btn-danger">Close</button>
</div>
</form>
</div>
</div>
</div>

Where you return
echo "<p class='pull-left'>All Fields are required</p>";
Add this bit of code to open the modal on page load.
<script type="text/javascript">
$(window).load(function(){
$('#addtopic').modal('show');
});
</script>