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 hide an form after form is submitted

I am not that much good at programming. i am working on one feature, that is form hiding after the submit of form data. Here number of forms created dynamically. i need to hide the form once we submit the form data, to prevent multiple submission of form. here i used form inside div i also tried for div hiding. it is not working please let me know the solution.
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
function frmsubmit()
{
var frm = document.getElemetsByName('formdata')[0];
frm.submit();
frm.reset();
return false;
}
$('#submit_0').click(function() {
$.ajax({
url:"section.php?status=result",
data:$('#f_0').serialize(),
success:function(data)
{
alert(data);
$('#f_0')[0].reset();
}
});
});
// Haven written same code for submit_0 to submit_10
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h3>Enter the values:</h3><br>
<ul class="nav nav-tabs">
<?php
foreach($clasarr as $temp)
{
?>
<li><a href="#<?php echo $temp; ?>"> <?php echo $temp; ?> </a </li>
<?php
}
?>
</ul>
<div class="tab-content">
<?php
$y=0;
foreach($clasarr as $temp)
{
?>
<div id="<?php echo $temp; ?>" class="tab-pane fade">
<form name="formdata" action="" method="post" class="form-horizontal" id="f_<?php echo $y; ?>">
<div class="col-md-offset-2 col-md-10">
<h3> CLASS: <?php echo $temp; ?></h3>
</div>
<input type="text" name="idr" id="idr" value="<?php echo $id; ?>" hidden>
<input type="text" name="clss" id="clss" value="<?php echo $temp; ?>" hidden>
<div class="form-group">
<label class="control-label col-sm-2" for="totalb">Budgeted #:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="totalb" id="totalb" value="<?php echo $totalarr[$y]; ?>">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="received">Received #:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="received" id="received_<?php echo $y; ?>" onblur="getcsv(<?php echo $y; ?>),getupload(<?php echo $y; ?>),getexpected(<?php echo $y; ?>)"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="deleted"> Deleted data #:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="deleted" id="deleted_<?php echo $y; ?>" onblur="getcsv(<?php echo $y; ?>),getupload(<?php echo $y; ?>),getexpected(<?php echo $y; ?>)"/ >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="csvno"> CSV Number #:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="csvno" id="csvno_<?php echo $y; ?>" onload="getupload(<?php echo $y; ?>)">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="duplicate"> Duplicate #:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="duplicate" id="duplicate_<?php echo $y; ?>" onblur="getupload(<?php echo $y; ?>),getexpected(<?php echo $y; ?>)" onclick="getupload(<?php echo $y; ?>)"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="upload"> Upload #:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="upload" id="upload_<?php echo $y; ?>">
</div>
</div>
<br><br>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-2">
<input class="btn btn-info" type="submit" name="submit" id="submit_<?php echo $y; ?>" value="submit" onclick="frmsubmit()">
<input class="btn btn-info" type="reset" name="Reset" value="Reset">
</div>
</div>
</form>
</div>
<?php
$y++;
}

You may not need both input type = "submit" and onclick event handler, the submit input will be enough.
Also there is a need to prevent default behaviour of the submit button since ajax is used to submit the form data.
Replace the input type "submit" with this
<input class="btn btn-info" type="submit" name="submit" id="someId" value="submit">
Also while dynamically creating the form use a class instead of id(presuming id is also dynamic so every new form creating will change the id)
<form name="formdata" action="" method="post" class="form-horizontal someFormClass"
id="someDynamicId">
// rest of the code
</form>
To prevent the default behaviour add event.preventDefault();.Inside the ajax success delegate the event of hiding the form from body
$('#submitButtonId').click(function(e) {
e.preventDefault();
var form = $(this).parents('form.someFormClass');
$.ajax({
//Rest of the code
success:function(){
$('body').find(form).hide()
}
})
});
Hopefully this pseudo code will be useful

A ridiculously simplified version of what you're trying to do. A form, in a div, with a jQuery on click hook that will hide the div on submit click.
$('#submit').click(function() {
$('#f_0').hide();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="f_0">
<form name="formdata" action="" method="post" class="form-horizontal" id="f_1">
<input class="btn btn-info" type="submit" name="submit" id="submit" value="submit">
<input class="btn btn-info" type="reset" name="Reset" value="Reset">
</form>
</div>

#AvinashT But is the ajax call being made or not?
#gurvinder372 ajax is called and form data is entring into table
successfully
Based on above discussion, you just need to add this line in the success handler to hide the form
$('#submit_0').closest( "form" ).hide()
Here number of forms created dynamically. i need to hide the form once
we submit the form data, to prevent multiple submission of form.
Form is being submitted multiple times, because you have two handlers (one is via onclick and other via submit click event handler).
You need to remove the onclick="frmsubmit()" from the form tag since submit click event handler is already taking care of form-submission.

Undefined index and form doesn't work Properly

Hello Friends I am having issue with sizes option on my page
this is the form of sizes
<!-- Sizes And Quantity [Onclick Modal]-->
<div class="form-group col-md-3">
<label>Sizes & Quntity<span class="required">*</span>:</label>
<button class="btn btn-default form-control btn-info" onclick="jQuery('#sizesModal').modal('toggle'); return false;">Sizes & Quantity</button>
</div>
<!-- Sizes & Quantity Preview -->
<div class="form-group col-md-3">
<label for="sizes">Size & Quantity Preview:</label>
<input type="text" name="sizes" id="sizes" class="form-control" value="<?= ((isset($_POST['sizes']))?sanitize($_POST['sizes']):''); ?>" disabled/>
</div>
and this is modal it is using when click on button
<!-- Modal for sizes & quantity -->
<div class="modal fade" id="sizesModal" tabindex="-1" role="dialog" aria-labelledby="sizesModalLabel">
<div class="modal-dialog modal-lg" role="document">
<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>
<h4 class="modal-title" id="sizesModalLabel">Size & Quantity</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<?php for($i=1; $i <= 12; $i++): ?>
<!-- Size Edit -->
<div class="form-group col-md-4">
<label for="size<?= $i; ?>">Size</label>
<input type="text" class="form-control" id="size<?= $i; ?>" name="size<?= $i; ?>" value="<?= ((!empty($sArray[$i-1]))?$sArray[$i-1]:''); ?>" />
</div>
<!-- Quantity Edit -->
<div class="form-group col-md-2">
<label for="qty<?= $i; ?>">Quantity</label>
<input type="number" class="form-control" id="qty<?= $i; ?>" name="qty<?= $i; ?>" value="<?= ((!empty($qArray[$i-1]))?$qArray[$i-1]:''); ?>" min="0"/>
</div>
<?php endfor; ?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="updateSizes();jQuery('#sizesModal').modal('toggle');return false;">Save changes</button>
</div>
</div>
</div>
</div>
And this is function to update sizes
function updateSizes(){
var sizeString ='';
for (var i= 1; i<=12; i++){
if(jQuery('#size'+i).val() != ''){
sizeString += jQuery('#size'+i).val()+':'+jQuery('#qty'+i).val()+',' ;
}
}
jQuery('#sizes').val(sizeString);
}
My issues are
1. When the form is submited and if it gives error the sizes field shouldn't be black it should have already entered values like every feild holds them it should do the same it shouldn't erase them so that user don't need to re-enter them
2.Whenever i use 'sizes' in php it gives me error as sizes is undefined.
This is PHP where i am using it its on the same page
if ($_POST) {
if (!empty($_POST['sizes'])) {
$sizeString = sanitize($_POST['sizes']);
$sizeString = rtrim($sizeString,',');
echo $sizeString;
$sizesArray = explode(',', $sizeString);
$sArray = array();
$qArray = array();
foreach ($sizesArray as $ss) {
$s = explode(':', $ss);
$sArray[] = $s[0];
$qArray[] = $s[1];
}
}
else {
$sizesArray = array();
}
$required = array('//Some Arrays' 'sizes');
foreach ($required as $field) {
if ($_POST[$field] == '') {
$errors[] = 'All Fields with <span class="required">*</span> are required.';
break;
}
}
i have rechecked the entire code 5 times now but i didn't find anything at all.
Please help me.

Showing AJAX Confrimation into a modal

I have a form which basically inserts the form data into database. I am doing this by AJAX request. Now, So when the data is inserted the success info of "rentinsert.php" is shown in the form page which is showing "Your order has bee placed". What i want to do is to show it into a modal. So how to show the success message upon AJAX in a modal. Below is my code -
the html -
<form method="post" id="rentalform" action="rentinsertdb.php">
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Full Name</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" placeholder="Enter full name" name="rentname">
</div>
</div>
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Choose your ride</label>
<div class="col-sm-8 tabular-border">
<div class="dropdown">
<select class="btn btn-default dropdown-toggle" name="rentcar" >
<option>Choose your ride</option>
<option value="Toyota Alion 2008">Toyota Alion 2008</option>
<option value="Toyota Alion 2008">Toyota Premio 2008</option>
<option value="Toyota Alion 2008">Toyota Corolla 2006</option>
<option value="Toyota Alion 2008">Toyota Noah 2010</option>
</select>
</div>
</div>
</div>
<!-- <div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" id="focusedinput" placeholder="Enter phone number">
</div>
<div class="col-sm-2">
<p class="help-block"></p>
</div>
</div> -->
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" name="rentphone" placeholder="Enter phone number">
</div>
<div class="col-sm-2">
<p class="help-block"></p>
</div>
</div>
<div class="form-group space">
<label for="txtarea1" class="col-sm-2 control-label">Pick up address</label>
<div class="col-sm-8 tabular-border"><textarea name="rentaddress" cols="50" rows="4" class="form-control" placeholder="Enter Full Address; For example: House#38, Road 7/a, Dhanmondi, Dhaka-1205, Bangladesh"></textarea></div>
</div>
<div class="col-sm-8 col-sm-offset-2 space">
<button class="btn-primary btn" style="background-color:#03a9f4; border-color:#03a9f4;" id="submitrent"> Confirm </button>
</div>
</form>
</div>
<span id="result"></span>
<script type="text/javascript">
$("#submitrent").click( function() {
$.post( $("#rentalform").attr("action"),
$("#rentalform :input").serializeArray(),
function(info){ $("#result").html(info);
});
// clearInput();
});
$("#rentalform").submit( function() {
return false;
});
// function clearInput() {
// $("#myForm :input").each( function() {
// $(this).val('');
// });
// }
</script>
rentinsert.php -
<?php
header("Access-Control-Allow-Origin: *");
include_once "rentconnection.php";
// echo "<pre>";
// print_r($_POST);
$sql = "INSERT INTO `rental`
(`name`,`car`,`phone`,`address`)
VALUES ('".$_POST['rentname']."','".$_POST['rentphone']."','".$_POST['rentcar']."','".$_POST['rentaddress']."');";
if(mysqli_query($con, $sql)){
?>
<body style= "background-color:#1D726A">
<h1>Your Order Has Been Placed! </h1>
</body>
<?php
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);
?>

You need to echo your message when you successfully insert data into database
if (mysqli_query($con, $sql)) {
echo "<body style= 'background-color:#1D726A'><h1>Your Order Has Been Placed! </h1></body>";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);

if (mysqli_query($con, $sql)) {
echo json_encode(array('message' => 'Your Order Has Been Placed!'));
exit();
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);
Add modal
<div class="modal fade" id="modal-content">
<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>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p id="msg">Message here!</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Show message in view
("#submitrent").click( function() {
$.post( $("#rentalform").attr("action"),
$("#rentalform :input").serializeArray(),
function(info){
var obj = jQuery.parseJSON(info);
$("#msg").html(obj.message);
$("#modal-content").modal('show');
});
// clearInput();
});

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.