How do I display reCAPTCHA in modals with different id? - javascript

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.

Related

How do I pass values to modal without restarting the page?

I have an autocomplete search box to search names from DB. Result should be search name, click to open a modal posting the data from php if id is equal. My problem is that when the modal pops-up the page will refresh automatically. How do I stop the page from restarting when open the modal form upon post submit? Seeking your help for this. Thanks alot!
Please refer my codes as noted below:
Autocomplete search box
<form class="search" id="searchForm" method="post">
<div class="search__inner">
<input type="text" style="text-transform:capitalize; font-size:120%" id="livesearch" class="search__text" placeholder="Search patient's name ..."/>
<i class="zmdi zmdi-search search__helper" data-sa-action="search-close"></i>
</div>
<input type="text" name="searchid" id="searchid" style="width:7%;" placeholder="searchid" value="">
</form>
JS-Edited
<script>
$(function () {
$("#livesearch").autocomplete({
source: "php/livesearch.php",
select: function( event, ui ) {
// this will append a div to the body, then load the stream ... if the stream contains
// your modal it will be appended to the body
let div = $('<div/>').appendTo('body');
div.load('dsearch_modal.php?id=' + ui.item.id, function(data) {
// now that is complete ... open the modal
let modal = $('.modal', div); // search for your modal in the div
modal.modal('show'); // open the modal (bootstrap)
});
}
});
});
</script>
Modal
<!-- Search bar Modal -->
<?php include 'dsearch_modal.php'; ?>
<div id="searchModal" class="modal fade card new-contact" role="dialog">
<div class="modal-dialog modal-sm-10">
<div class="modal-content">
<div class="new-contact__header">
<img src="demo/img/contacts/user_empty.png" class="new-contact__img" alt="">
</div>
<div align="center">
<h4 style="text-transform:capitalize;" id="pxname"><?php print $row['search_fname']; ?> <?php print $row['search_lname']; ?> </h4>
<p hidden id="pxnameid"><?php print $row['search_PatientID']; ?></p>
</div>
<div class="card-body modal-dialog modal-content">
<h6 style="text-transform:uppercase;">
<p>Last consultation visit</p>
</h6>
<br>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Consultation date</label>
<input type="text" id="searchobgyneDate" class="form-control" value="<?php print $row['search_obgyneDate']; ?>" disabled>
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Service</label>
<input type="text" id="searchpxservice" class="form-control" value="<?php print $row['search_service']; ?>" disabled>
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label>Company</label>
<input type="text" class="form-control" id="searchcompanyname" disabled>
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-3" align="center">
<div class="form-group">
Consultation
</div>
</div>
<div class="col-sm-3" align="center">
<div class="form-group">
Records
</div>
</div>
<div class="col-sm-3" align="center">
<div class="form-group">
LAB Results
</div>
</div>
<div class="col-sm-3" align="center">
<div class="form-group">
Cancel
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of search bar Modal -->
<?php $conn->close(); ?>
PHP
<?php
$myid = $_GET['id'];
$sql1 = ("SELECT tblParity.pxservice as search_service, tblPatients.Lname as search_lname, tblPatients.mi as search_mi, tblPatients.Fname as search_fname,
tblPatients.PatientID as search_PatientID, DATE_FORMAT(tblOBGyne.obgyneDate,'%m/%d/%Y') as search_obgyneDate,
tblParity.ParityID, tblOBGyne.OBGyneID, tblOBGyne.chiefcomplain as search_chiefcomplain, tblOBGyne.companyname as search_companyname
FROM tblPatients
INNER JOIN tblParity ON tblPatients.PatientID = tblParity.PatientID
INNER JOIN tblOBGyne ON tblParity.ParityID = tblOBGyne.ParityID
WHERE tblPatients.PatientID = '{$myid}' ORDER BY tblobgyne.obgyneDate DESC limit 1");
$result1 = mysqli_query($conn, $sql1);
$num_results = mysqli_num_rows($result1);
$row = mysqli_fetch_assoc($result1);
echo $row['search_PatientID']." - ". $row['search_lname'].", ". $row['search_fname'];
?>
Use jQuery.load()
<script>
$(function () {
$("#livesearch").autocomplete({
source: "php/livesearch.php",
select: function( event, ui ) {
event.preventDefault(); // no necessary
$("#livesearch").val(ui.item.value); // not necessary
$("#searchid").val(ui.item.id); // not necessary
// this will append a div to the body, then load the stream ... if the stream contains
// your modal it will be appended to the body
let div = $('<div />').appendTo('body');
div.load( 'http://yoururl/?id=' + ui.item.id, function( data) {
// debug point - to work the data has to start with
// <div id="searchModal" class="modal
console.log( data);
// now that is complete ... open the modal
let modal = $('.modal', div); // search for your modal in the div
modal.modal( 'show'); // open the modal (bootstrap)
// debug point
console.log( modal); // should reflect div#searchModal.modal.fade.card.new-contact
});
// not this:
// $("#searchModal").modal(document.getElementById("searchForm").submit());
}
});
});
</script>

I want to open modal after submitting form?

I want to open bootstrap modal after click "Submit" button in Form-1 and if "Send" button in the modal is clicked then send an email and also save the Form-1 into the database.
If I close it should Reject and Redirect to some page.
Thanks in advance.
PHP Code for Auto-generate Code
<?php
$this->db->select_max('id');
$result= $this->db->get('numform')->row();
$result-id++;
$result = "Num-".date('Ym')."-".$result->id;
?>
Form-1
<form method="post" action="<?php echo base_url(); ?>controller/method" onsubmit="return openModal();">
<section class="content">
<input type="submit" class="form-control" name="aValue" id="aValue" value="<?php echo $result; ?>" readonly> // This is form auto generating number
<button type="submit" class="btn btn-primary">Submit</button>
</form>
//Javascript Code
function openModal(){
var aValue= document.getElementById('aValue').value;
// I want place the above value(aValue) to the modal and fill up and some fields in the modal and save to submit into the database
}
<!--Bootstrap Modal-->
<!--Email Modal -->
<div id="emailModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<form action='<?php echo base_url(); ?>controller/method' method="POST">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Send email to User</h4>
</div>
<div class="modal-body">
<label class="col-md-3">Email</label>
<div class="form-group col-md-9">
<input type="email" class="form-control" name="emailId" id="emailId" placeholder="Email ID" value="" required>
</div>
<label class="col-md-3">CC:</label>
<div class="form-group col-md-9">
<input type="email" class="form-control" name="emailCC" id="emailCC" placeholder="CC" required>
</div>
<label class="col-md-3">Message</label>
<div class="form-group col-md-9">
<textarea name="message" id="message" class="form-control" placeholder="Message" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info" id="send_email">Send</button>
</div>
</div>
</form>
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
If I Click send it how to end a message and Save the form -1 into the database. If I close it should save the data.
1) Instead of the submit button in the form you can use simple HTML button and bind the click event of it. In click event grab the value of the aValue and set in the hidden value in the form (which is in the modal).
$('#YOUR_BUTTON_ID').on('click',function(e){
e.preventDefault();
var aValue= $('#aValue').val(); //grab the value
$('#HIDDEN_INPUT').val(aValue); //set this is has hidden value in the form
$('#emailModal').modal("show"); // open the modal
});
2) Now in the opened modal bind the two event : 1) To submit the form 2) To reject the form
$(document).on('click','#ACCEPT_BTN_ID',function(){
$('#MODAL_FORM_ID').submit(); //submit the form
});
$(document).on('click','#REJECT_BTN_ID',function(){
window.location.reload(); //refresh the same page.
});
3) In the method of controller you can write sub-functions for sending message and saving the form values.
Hope this helps.

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.

Load data by "id" for edit form using javascript in codeigniter

I am trying to pass data from a table to edit a form, using JavaScript. The problem is that I am a complete newbie at JavaScript. Can someone at least help me by giving me an example of what the code should be?
I am not doing AJAX, just simple load data with JavaScript
my model :
function edit($a)
{
$d = $this->db->get_where('crud', array('idcrud' => $a))->row();
return $d;
}
my controller :
function edit()
{
$kd = $this->uri->segment(3);
if ($kd == NULL) {
redirect('Chome');
}
$dt = $this->Mcrud->edit($kd);
$data['fn'] = $dt->firstname;
$data['ln'] = $dt->lastname;
$data['ag'] = $dt->age;
$data['ad'] = $dt->address;
$data['id'] = $kd;
$this->load->view('Vhome', $data);
}
And this is the button in the view, "Vhome", that I use as edit button :
<button class="btn btn-warning btn-xs" onclick="edit(<?php echo $row->idcrud; ?>)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>
That button will call JavaScript edit function that should call the data by "idcrud" :
function edit(idcrud)
{
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
// I dont know what must i do here to call my data in table crud by "idcrud"
}
And this is the form where the data gets passed to :
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Surat Keluar</h3>
</div>
<div class="modal-body form">
<form action="Chome/edit" method="post" id="form" class="form-horizontal">
<input type="hidden" value="" name="id"/>
<div class="form-body">
<div class="form-group">
<label for="fn" class="control-label col-md-3">First Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="fn" name="fn" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="ln" class="control-label col-md-3">Last Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ln" name="ln" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="ag" class="control-label col-md-3">Age</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ag" name="ag" placeholder="age">
</div>
</div>
<div class="form-group">
<label for="ad" class="control-label col-md-3">Address</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ad" name="ad" placeholder="Address">
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" name="mit" class="btn btn-primary" value="Submit">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Can someone give me an example of what must I write in the JavaScript function edit?
edit :
This is full code of my view Vhome.php
Ok, it's quite easy. First put some identifiers on this section:
foreach(...){
...
<tr id="idcrud<?php echo $row->idcrud;?>">
<td class="idcrud"><?php echo $row->idcrud; ?></td>
<td class="fn"><?php echo $row->firstname; ?></td>
<td class="ln"><?php echo $row->lastname; ?></td>
<td class="age"><?php echo $row->age; ?></td>
<td class="addr"><?php echo $row->address; ?></td>
...
</tr>
And in your edit() function:
function edit(idcrud)
{
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
// MY EDIT:
$("input #fn").val($("td #idcrud"+idcrud + " .fn").html());
$("input #ln").val($("td #idcrud"+idcrud + " .ln").html());
//and so on
}
Some observation: Inside your form <input type="hidden" value="" name="id"/> will also need an id attribute : <input id="id" type="hidden" value="" name="id"/>. Then you can update it's value with: $("input #id").val(idcrud); in the edit() function.

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>

Categories