I wanna create a radio button dynamically inside a table and i have done like this
<td colspan="3" class="table-info"><div class="ck">
<label><input type="radio" name="attendance[<?php echo $_SESSION['i']?>]" id="attendance[<?php echo $_SESSION['i']?>]" value="Yes">Yes</label> <label><input type="radio" name="attendance[<?php echo $_SESSION['i']?>]" id="attendance[<?php echo $_SESSION['i']?>]" value="No">No</label></td>
<?php $_SESSION['i']++; ?>
here is my javascript code this function will be called when a new row is added
var newRow = jQuery('<tr><td colspan="3"><label><input type="radio" name="attendance[<?php echo $_SESSION['i']?>]" id="attendance[<?php echo $_SESSION['i']?>]" value="Yes">Yes</label><label><input type="radio" name="attendance[<?php echo $_SESSION['i']?>]" id="attendance[<?php echo $_SESSION['i'];$_SESSION['i']++; ?>]" value="No">No</label></td></tr>');
counter++;
jQuery('table.table').append(newRow);
I want all the radio buttons to be stored in a single array.I have no idea how to do that someone help me to do this
Here is my entire code
<?php
session_start();
error_reporting(0);
?>
<?php include 'mqsqlconnection.php';
?>
<?php
mysql_select_db("training_db");
$sql = "SELECT trainer_name as tr_name FROM training_details";
$res = mysql_query($sql);
$trainer_name=mysql_result($res,0);
$sql1 = "SELECT training_name as trng_name FROM training_details";
$res1 = mysql_query($sql1);
$training_name=mysql_result($res1,0);
if ( isset ( $_POST['submit_details'] ) ) {
$trainer_name=$_POST["trainer_name"];
$training_name=$_POST["training_name"];
$training_date=$_POST["training_date"];
$from_time=$_POST["from_time"];
$to_time=$_POST["to_time"];
$venue=$_POST["venue"];
$ins="INSERT INTO training_info(trainer_name,training_name,training_date,from_time,to_time,venue)VALUES('$trainer_name','$training_name','$training_date','$from_time','$to_time','$venue')";
mysql_query($ins);
$sql12 = "SELECT training_id as tid FROM training_info WHERE trainer_name ='$trainer_name' and training_name='$training_name'";
$res12 = mysql_query($sql12);
$training_id=mysql_result($res12,0);
//echo $training_id;
echo $_SESSION['num1'];
$present=1;
$absent=0;
if(!empty($_POST['emp_code'])) {
$empcode=$_POST['emp_code'];
for($i=0;$i<sizeof($empcode);$i++)
{
$inssql="INSERT INTO training_attendance(tid,emp_code,attendance) VALUES ($training_id,$empcode[$i],0)";
mysql_query($inssql);
}
if(isset($_POST['attendance'])&&!empty($_POST['attendance'])) {
$ccount=$_POST['attendance'];
for($i=0;$i<sizeof($ccount);$i++)
{
$inssql23="update training_attendance set attendance=1 where emp_code=$ccount[$i] and tid=$training_id";
mysql_query($inssql23);
}
}
}
}
?>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Training Attendance form</title>
<link rel="stylesheet" href="logincss.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="js/bootstrap-checkbox.js"></script>
<script>
jQuery(function() {
var counter = 1;
jQuery('a.addrow').click(function(event) {
event.preventDefault();
var newRow = jQuery('<tr><td colspan="3" class="table-active"><input type="text" name="emp_code[]" id="emp_code[]" class="form-control"></td><td colspan="3" class="table-success"><input type="text" name="emp_name[]" id="emp_name[]" class="form-control"></td><td colspan="3" class="table-info"><input type="text" name="emp_mailid[]" id="emp_mailid[]" class="form-control"></td><td colspan="3" class="table-info"><input type="text" name="nomination[]" id="nomination[]" class="form-control"></td><td colspan="3"><label><input type="radio" name="attendance[<?php echo $_SESSION['i']?>]" id="attendance[<?php echo $_SESSION['i']?>]" value="Yes">Yes</label><label><input type="radio" name="attendance[<?php echo $_SESSION['i']?>]" id="attendance[<?php echo $_SESSION['i'];$_SESSION['i']++; ?>]" value="No">No</label></td></td><td></span></td></tr>');
counter++;<?php $i++; ?>
jQuery('table.table').append(newRow);
//Init bootstrapToggle
$('.toggleone').bootstrapToggle({
on: 'Yes',
off: 'No'
});
});
});
</script>
<script>
$(function(){
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>
<script>
$(function() {
$('#toggleone').bootstrapToggle({
on: 'Enabled',
off: 'Disabled'
});
}) </script>
</head>
<body>
<div class="container">
<div class="row vertical">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"><center>Training Attendance form</center></h3>
</div>
<div class="panel-body">
<form class="form-horizontal" action="" method="post" id="loginform"
enctype="multipart/form-data">
<div class="form-group">
<label for="input_trainername" class="col-sm-3 control-label">Trainer Name</label>
<div class="col-sm-8">
<input readonly class="form-control" id="trainer_name" name="trainer_name" value="<?php echo $trainer_name;?>">
</div>
</div>
<div class="form-group">
<label for="input_trainingname" class="col-sm-3 control-label">Training Name</label>
<div class="col-sm-8">
<input readonly class="form-control" id="training_name" name="training_name" value="<?php echo $training_name;?>">
</div>
</div>
<div class="form-group">
<label for="input_trainingname" class="col-sm-3 control-label">Date</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="training_date" name="training_date" value="" onfocus="(this.type='date')" onfocusout="(this.type='text')">
</div>
</div>
<div class="form-group">
<label for="labeldate" class="col-sm-1 control-label">Time</label>
<label for="input_fromdate" class="col-sm-2 control-label">From</label>
<div class="col-sm-3">
<input type="time" class="form-control" id="from_time" name="from_time"
placeholder="Pick here">
</div>
<label for="input_todate" class="col-sm-1 control-label">To </label>
<div class="col-sm-3">
<input type="time" class="form-control" id="to_time" name="to_time" value=""
placeholder="Pick here" >
</div></div>
<div class="form-group">
<label for="input_venue" class="col-sm-3 control-label">Venue</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="venue" name="venue" value="">
</div>
</div>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<?php
//session_start();
//echo $_SESSION['year'];
//while ($row = mysql_fetch_array($result)) {
?>
<table align="center" class="table table-bordered"id="tb" border="10" bordercolor="#0066FF" style=\"background-color:#CCFFFF\" width="50%" cellpadding="9" cellspacing="9">
<tr><b>
<td colspan="3">Empid</td>
<td colspan="3">Name</td>
<td colspan="3">Email ID</td>
<td colspan="3">Nominated and invited</td>
<td colspan="3">Attendance</td>
<td><span class="glyphicon glyphicon-plus"></span></td>
</b></tr>
<?php mysql_select_db("training_db");
$result_s = mysql_query("select * from training_nominated");
$_SESSION['num1']=mysql_num_rows($result_s);
while($row = mysql_fetch_array($result_s))
{?><tr><td colspan="3" class="table-success"><div class="ck"><input readonly name="emp_name[]" id="emp_name[]" value="<?php echo $row['emp_code']?>"class="form-control"></td>
<td colspan="3" class="table-success"><div class="ck"><input readonly name="emp_name[]" id="emp_name[]" value="<?php echo $row['emp_name']?>"class="form-control"></td>
<td colspan="3" class="table-info"><div class="ck"><input readonly name="emp_mailid[]" id="emp_mailid[]" value="<?php echo $row['emp_mailid']?>"class="form-control"></td>
<td colspan="3" class="table-info"><div class="ck"><input readonly name="nomination[]" id="nomination[]" value="<?php echo $row['nomination']?>"class="form-control"></td>
<td colspan="3" class="table-info"><div class="ck">
<label><input type="radio" name="attendance[<?php echo $_SESSION['i']?>]" id="attendance[<?php echo $_SESSION['i']?>]" value="Yes">Yes</label> <label><input type="radio" name="attendance[<?php echo $_SESSION['i']?>]" id="attendance[<?php echo $_SESSION['i']?>]" value="No">No</label></td>
<td colspan="3" class="table-info">
<a href='javascript:void(0);' class='disabled'><span class='glyphicon glyphicon-remove'></span></a></td> </tr>
<?php $_SESSION['i']++; }?>
</table>
<!--<script>
$("#attendance").change(function(){
if($(this).prop("checked") == true){
alert("1");
}else{
alert("0");
}
});-->
<div class="form-group">
<div class="col-xs-11 text-center">
<button type="submit" class="btn btn-success" id="submit_details" name="submit_details">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You should remember that PHP is executed server-side, and JavaScript is executed client-side. So whithin this line of code
var newRow = jQuery('[..]id="attendance[<?php echo $_SESSION['i'];$_SESSION['i']++; ?>]" value="[..]');
the $_SESSION['i']++ is executed only once at the time the server builds the response (the HTML), and not everytime that javascript-function is called.
So you should write an incrementer on a JavaScript-variable, instead of a PHP-variable.
Assuming you don't change this form with AJAX, I replaced the $_SESSION['i'] with a normal PHP-variable in the code below (as sessions will be an overkill):
<? $nextRowId = 0; ?>
[...]
<td colspan="3" class="table-info"><div class="ck">
<label><input type="radio" name="attendance[<?php echo $nextRowId ?>]" id="attendance[<?php echo $nextRowId ?>]" value="Yes">Yes</label> <label><input type="radio" name="attendance[<?php echo $nextRowId ?>]" id="attendance[<?php echo $nextRowId ?>]" value="No">No</label></td>
<?php $nextRowId++; ?>
[...]
<script type="text/javascript">
// Store PHP-variable-value of $nextRowId in a JS-variable
// Inspect your HTML source (F12 in the browser), this will simply be something like: var nextRowId = 1;
var nextRowId = <?php echo json_encode($nextRowId) ?>;
function addRow() {
// Use this JS-variable browser-side
var newRow = jQuery('<tr><td colspan="3"><label><input type="radio" name="attendance[' + nextRowId + ']" id="attendance[' + nextRowId + ']" value="Yes">Yes</label><label><input type="radio" name="attendance[' + nextRowId + ']" id="attendance[' + nextRowId + ']" value="No">No</label></td></tr>');
// Increment JS-variable
nextRowId++;
jQuery('table.table').append(newRow);
}
</script>
When you're only just printing 1 row in your initial HTML, this can be more simplified by skipping the PHP-variable $nextRowId:
<td colspan="3" class="table-info"><div class="ck">
<label><input type="radio" name="attendance[0]" id="attendance[0]" value="Yes">Yes</label> <label><input type="radio" name="attendance[0]" id="attendance[0]" value="No">No</label></td>
<script type="text/javascript">
var nextRowId = 1;
// And so on
Ya the above comment worked
but assigning
var nextRowId=($('#tb tr').length)-1;//(number of rows fetched from database)-(one header row)
instead of
var nextRowId = <?php echo json_encode($nextRowId) ?>;
as this created conflict for array indexes.It worked perfectly.
Related
I have dynamic table. i am try to get cell value use jquery "closest & find" option. but not response it.
this is html code part.
<td>
<div id="ctrl-qun-row<?php echo $row; ?>-holder" class="">
<input id="ctrl-qun-row<?php echo $row; ?>" value="<?php echo $this->set_field_value('qun',"", $row); ?>" type="number" placeholder="Enter Qun" step="0.1" required="" name="row<?php echo $row ?>[qun]" class="form-control " />
</div>
</td>
i am try to script used keyup event.
$('#ctrl-qun').on('keyup', function(){
var rowtoatal =0;
var $row =$(this).closest("td");
var qun2 =parseFloat($row.find('.qun').val());
alert($("#qun2").val()); //remove after testing
});
full code https://pastebin.com/9ZKRNH3b
You need to get the closest tr where the quantity is change and using this tr we can get value for unit price and add total to sub total column.
Demo Code (Added dummy data in value attribute of inputs):
//on change of qty
$('.qtn').on('change keyup ', function() {
//getting closest tr
var elem = $(this).closest(".input-row");
//get qty value
var qty = parseFloat($(this).val());
var rowtoatal = 0;
//get unit price value
var $row = parseFloat(elem.find("td input.unit").val());
rowtoatal = qty * $row;
console.log(qty + " * " + $row + " = " + rowtoatal)
//adding total to sub_total
elem.find("td input.sub_total").val(rowtoatal)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<table class="table table-striped table-sm" data-maxrow="100" data-minrow="1">
<thead>
<tr>
<th class="bg-light"><label for="product">Product</label></th>
<th class="bg-light"><label for="qun">Qun</label></th>
<th class="bg-light"><label for="unite_price">Unite Price</label></th>
<th class="bg-light"><label for="sub_total">Sub Total</label></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="input-row">
<td>
<div id="ctrl-product-row<?php echo $row; ?>-holder" class="">
<input id="ctrl-product-row<?php echo $row; ?>" value="Abcd" type="text" placeholder="Enter Product" required="" name="row<?php echo $row ?>[product]" class="form-control " />
</div>
</td>
<td data="abc">
<div id="ctrl-qun-row<?php echo $row; ?>-holder" class="">
<input id="ctrl-qun-row<?php echo $row; ?>" value="1" type="number" placeholder="Enter Qun" step="0.1" required="" name="row<?php echo $row ?>[qun]" class="form-control qtn" />
<!--addded qtn class-->
</div>
</td>
<td>
<div id="ctrl-unite_price-row<?php echo $row; ?>-holder" class="">
<input id="ctrl-unite_price-row<?php echo $row; ?>" value="75" type="number" placeholder="Enter Unite Price" step="0.1" required="" name="row<?php echo $row ?>[unite_price]" class="form-control unit" />
<!--added unit class-->
</div>
</td>
<td>
<div id="ctrl-sub_total-row<?php echo $row; ?>-holder" class="">
<input id="ctrl-sub_total-row<?php echo $row; ?>" value="75" type="number" placeholder="Enter Sub Total" step="0.1" required="" name="row<?php echo $row ?>[sub_total]" class="form-control sub_total" />
<!-- added sub_total class-->
</div>
</td>
<th class="text-center">
<button type="button" class="close btn-remove-table-row">×</button>
</th>
</tr>
<tr class="input-row">
<td>
<div id="ctrl-product-row<?php echo $row; ?>-holder" class="">
<input id="ctrl-product-row<?php echo $row; ?>" value="Abc" type="text" placeholder="Enter Product" required="" name="row<?php echo $row ?>[product]" class="form-control " />
</div>
</td>
<td>
<div id="ctrl-qun-row<?php echo $row; ?>-holder" class="">
<input id="ctrl-qun-row<?php echo $row; ?>" value="1" type="number" placeholder="Enter Qun" step="0.1" required="" name="row<?php echo $row ?>[qun]" class="form-control qtn" />
</div>
</td>
<td>
<div id="ctrl-unite_price-row<?php echo $row; ?>-holder" class="">
<input id="ctrl-unite_price-row<?php echo $row; ?>" value="20" type="number" placeholder="Enter Unite Price" step="0.1" required="" name="row<?php echo $row ?>[unite_price]" class="form-control unit" />
</div>
</td>
<td>
<div id="ctrl-sub_total-row<?php echo $row; ?>-holder" class="">
<input id="ctrl-sub_total-row<?php echo $row; ?>" value="10" type="number" placeholder="Enter Sub Total" step="0.1" required="" name="row<?php echo $row ?>[sub_total]" class="form-control sub_total" />
</div>
</td>
<th class="text-center">
<button type="button" class="close btn-remove-table-row">×</button>
</th>
</tr>
</tbody>
</table>
How can I modify this form, (to be able to add a textarea, dropdown, or even edit the text area into dropdown)
I know I should use javascript but I tried several times, it doesn't work.
Below are my codes.**
I am using the MVC method of coding
This is in ModifyVersantExam.php
<?php
$this->layout = '~/views/shared/_mainLayout.php';
$this->section['title'] = 'Versant Exam';
$this->section['username'] = $user['name'];
?>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<h3><strong><center><?php echo $exam[0]['versant_exam_title'];?></center></strong></h3>
<br />
<form id="form" class="form-horizontal form-label-left" method="POST" action="./">
<?php $display = 'style="display:none"';
foreach($question as $ques){
?>
<!-- Input Area -->
<div class="form-group" id='' name='' <?php echo $i = ($ques['versant_examquestions_type']==1)? "":"$display";?> >
<label class="col-sm-2 control-label" for="<?php echo $ques['versant_examquestions_id'];?>"><?php echo $ques['versant_examquestions_question'];?></label>
<div class='col-sm-8'>
<input class='form-control' type='text' id='<?php echo $ques['versant_examquestions_id'];?>' name='<?php echo $ques['versant_examquestions_id'];?>' required>
</div>
</div>
<!-- Textarea Area -->
<div class="form-group" id='' name='' <?php echo $i = ($ques['versant_examquestions_type']==2)? "":"$display";?> >
<label class="col-sm-2 control-label" for="<?php echo $ques['versant_examquestions_id'];?>"><?php echo $ques['versant_examquestions_question'];?></label>
<div class='col-sm-8'>
<textarea class='form-control' id='<?php echo $ques['versant_examquestions_id'];?>' name='<?php echo $ques['versant_examquestions_id'];?>' required></textarea>
</div>
</div>
<!-- Select Area -->
<div class="form-group" id='' name='' <?php echo $i = ($ques['versant_examquestions_type']==3)? "":"$display";?> >
<label class="col-sm-2 control-label" for="<?php echo $ques['versant_examquestions_id'];?>"><?php echo $ques['versant_examquestions_question'];?></label>
<div class='col-sm-8'>
<select class="form-control" id="<?php echo $ques['versant_examquestions_id'];?>" name="<?php echo $ques['versant_examquestions_id'];?>" required>
<option value="0">---Select---</option>
<?php
foreach($options as $loopoption){
if($loopoption['versant_examoptions_questionid'] == $ques['versant_examquestions_id']){ ?>
<option value="<?php echo $loopoption['versant_examoptions_id']; ?>"><?php echo $loopoption['versant_examoptions_options']; ?></option>
<?php }
}
?>
</select>
</div>
</div>
<!-- Radio Button Area -->
<div class="form-group" <?php echo $i = ($ques['versant_examquestions_type']==4)? "":"$display";?> >
<label class="col-sm-2 control-label" for="">Radio Button 1:</label>
<div class="radio">
<label>
<input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios"> Option one. only select one option
</label>
</div>
<label class="col-sm-2 control-label" for="blank"> </label>
<div class="radio">
<label>
<input type="radio" value="option2" id="optionsRadios2" name="optionsRadios"> Option two. only select one option
</label>
</div>
</div>
<?php }?>
<br /><br />
<?php
$i=1;
$k = 0;?>
<td><input name='title[]' type='text' placeholder='Title' class='form-control input-md' width = "30" autocomplete='off'/> </td>
<td data-name=\"sel\">
<select class='form-control chos' name='sel[]'><option value=''>Select Option</option>
<option value='1'>Input</option>
<option value='2'>Text Field</option>
<option value='3'>Dropdown</option></select>
<br />
<div class='row ' style='display:none;' id='options'>
<div class='form-group form-group-options col-xs-11 col-sm-8 col-md-12'>
<div class='input-group input-group-option col-xs-12'>
<input type='text' name='option["<?php $k+1 ?>"][]' class='form-control' placeholder='Type here' autocomplete='off'>
<span class='input-group-addon input-group-addon-remove'>
<span class='glyphicon glyphicon-remove'></span>
</span>
</div>
</div>
</div>
<td id='require0'>
<div>
<center><label><input type='checkbox'id='versant_required' name= 'versant_examquestions_required["<?php $k+1 ?>"]' value='1'/> Required? </label></center>
</div>
</td>
</td>
<br><br>
<center>
<button id="add_row" onclick = "addrow()" class="btn btn-info">Add Row</button>
<a id="delete_row" class="btn btn-danger">Delete Row</a>
<br><br>
<a class="btn btn-danger pull-right">Cancel</a>
<a class="btn btn-primary pull-right">Save</a>
</center>
</form>
</div>
</div>
</div>
<?php
$this->section['script'] = "
<script src='/emsTest/lib/datatable/jquery.dataTables.min.js'></script>
<script src='/emsTest/lib/datatable/dataTables.bootstrap.js'></script>
<script src='/emsTest/lib/datatable/dataTables.keyTable.min.js'></script>
<script src='/emsTest/lib/datatable/dataTables.responsive.min.js'></script>
<script src='/emsTest/lib/datatable/dataTables.scroller.min.js'></script>
<script src='/emsTest/lib/datatable/responsive.bootstrap.min.js'></script>
<script src='/emsTest/custom_scripts/Recruitment/VersantModifyExamBuilder.js'></script>
<script src='/emsTest/custom_scripts/Recruitment/versant.js'></script>";
$(document).ready(function() {
$('#options').hide();
//Add Rows
var i=1;
var k = 0;
$("#add_row").click(function(){
$('#addr'+i).html("<td><center>"+ (i+1) +"</center></td>\n\
<td><input name='title[]' type='text' placeholder='Title' class='form-control input-md' autocomplete='off'/> </td>\n\
<td data-name=\"sel\">\n\
<select class='form-control chos' name='sel[]'><option value=''>Select Option</option>\n\
<option value='1'>Input</option>\n\
<option value='2'>Text Field</option>\n\
<option value='3'>Dropdown</option>\n\</select>\n\
<br /> \n\
<div class='row ' style='display:none;' id='options'>\n\
<div class='form-group form-group-options col-xs-11 col-sm-8 col-md-12'>\n\
<div class='input-group input-group-option col-xs-12'>\n\
<input type='text' name='option["+(k+1)+"][]' class='form-control' placeholder='Type here' autocomplete='off'>\n\
<span class='input-group-addon input-group-addon-remove'>\n\
<span class='glyphicon glyphicon-remove'></span>\n\
</span>\n\
</div>\n\
</div>\n\
</div>\n\
<td id='require0'>\n\
<div>\n\
<center><label><input type='checkbox'id='versant_required' name= 'versant_examquestions_required["+(k+1)+"]' value='1'/> Required? </label></center> \n\
</div>\n\
</td>\n\
</td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
k++;
});
$(document).on('change','[data-name="sel"] select',function(){
$(this).parent().find('div:first').show();
var type = $(this).val();
if(type == 3 || type == 4 ){
$(this).parent().find('div:first').show();
}else{
$(this).parent().find('div:first').hide();
}
});
//Delete Rows
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
//Focus dynamic
$(document).on('focus', 'div.form-group-options div.input-group-option:last-child input', function(){
var sInputGroupHtml = $(this).parent().html();
var sInputGroupClasses = $(this).parent().attr('class');
$(this).parent().parent().append('<div class="'+sInputGroupClasses+'">'+sInputGroupHtml+'</div>');
$('.input-group-addon.input-group-addon-remove').show();
$('.form-group-options').each(function(){
$(this).find('.input-group-addon.input-group-addon-remove:last').hide()
});
});
$(document).on('click', 'div.form-group-options .input-group-addon-remove', function(){
$(this).parent().remove();
});
});
I have an account form in which the all account are being pulled from my mysql database into a dropdown menu. The user selects the account from the dropdown menu then the account code field is automatically populated via the data-acc attribute. I have added a button to add more account.
It works at first set of input and select box, but not in the next one
sample screenshot
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('select[name="account_name[]').change(function()
{
$('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
});
</script>
<script>
$(document).ready(function(){
var i=1;
var chart_add = '<tr id="row_chart'+i+'"><td align="center"> <input type="text" name="account_code[]" class="form-control account_num" readonly></td><td><select class="form-control selectpicker" data-live-search="true" name="account_name[]" required> <option></option><?php $account = mysqli_query($conn,"SELECT chart_of_account.acoount_no, chart_of_account.account_title from chart_of_account inner join account_group_tbl on chart_of_account.account_group = account_group_tbl.account_name where account_group_tbl.account_type = 'Expense'");while($acc = mysqli_fetch_assoc($account)){$account_no = $acc['acoount_no'];$account_title = $acc['account_title'];?><option value="<?php echo $account_title; ?>" data-price="<?php echo $account_no; ?>"><?php echo $account_title ; ?> </option><?php } ?></select></td><td><button type="button" name="remove_chart" id="'+i+'" class="btn btn-danger remove_chart"><i class="fa fa-minus"></i></button></td></tr>';
$('#add').click(function(){
i++;
$('#dynamic_field').append(chart_add);
$('.selectpicker').selectpicker('render');
});
$(document).on('click', '.remove_chart', function(){
var button_id = $(this).attr("id");
$('#row_chart'+button_id+'').remove();
});
});
</script>
<div class="row">
<div class="col-md-12">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="box-title">Report Per Office</h3>
</div>
<div class="box-body">
<div class="col-md-12">
<h4>Project Procurement Management Plan (PPMP) <hr >
</div>
<div class="col-md-1">
Office:
</div>
<div class="col-md-4">
<select class="selectpicker" data-live-search="true" name="office_from" data-width="auto" required >
<option>--Select Reponsible Office--</option>
<?php
$q = "SELECT * FROM `office_code_dept`";
$r = mysqli_query($conn,$q);
while($row = mysqli_fetch_assoc($r)){
$off_desc = $row['off_name'];
?>
<option value="<?php echo $off_desc;?>"><?php echo $off_desc; ?></option>
<?php
}
?>
</select>
</div>
<div class="col-md-1">Year:</div>
<div class="col-md-4"><input type="number" min="1990" max="3000" name="tax_year" class="form-control" style="text-align: center;" value="<?php echo date('Y'); ?>"></div>
<div class="col-md-2"><input type="submit" name="search" value="Search" class="btn btn-primary btn-block">
</div>
<div class="col-md-12"><br></div>
</h4>
<table class="table table-bordered" id="dynamic_field">
<thead>
<tr>
<th width="7%" rowspan="2" style="text-align: center;">Code</th>
<th width="27%" rowspan="2" style="text-align: center;">General Description</th>
<th rowspan="2" width="5%"><button type="button" name="add" id="add" class="btn btn-success"><i class="fa fa-plus"></i></button></th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<input type="text" name="account_code[]" class="form-control account_num" readonly>
</td>
<td>
<select class="form-control selectpicker" data-live-search="true" name="account_name[]" required>
<option></option>
<?php
$account = mysqli_query($conn,"SELECT chart_of_account.acoount_no, chart_of_account.account_title from chart_of_account inner join account_group_tbl on chart_of_account.account_group = account_group_tbl.account_name where account_group_tbl.account_type = 'Expense'");
while($acc = mysqli_fetch_assoc($account)){
$account_no = $acc['acoount_no'];
$account_title = $acc['account_title'];
?>
<option value="<?php echo $account_title; ?>" data-acc="<?php echo $account_no; ?>">
<?php echo $account_title ; ?>
</option>
<?php } ?>
</select>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
your .change function is not bound to the new input and select box
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('select[name="account_name[]').change(function()
{
$('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
});
</script>
<script>
$(document).ready(function(){
var i=1;
var chart_add = '<tr id="row_chart'+i+'"><td align="center"> <input type="text" name="account_code[]" class="form-control account_num" readonly></td><td><select class="form-control selectpicker" data-live-search="true" name="account_name[]" required> <option></option><?php $account = mysqli_query($conn,"SELECT chart_of_account.acoount_no, chart_of_account.account_title from chart_of_account inner join account_group_tbl on chart_of_account.account_group = account_group_tbl.account_name where account_group_tbl.account_type = 'Expense'");while($acc = mysqli_fetch_assoc($account)){$account_no = $acc['acoount_no'];$account_title = $acc['account_title'];?><option value="<?php echo $account_title; ?>" data-price="<?php echo $account_no; ?>"><?php echo $account_title ; ?> </option><?php } ?></select></td><td><button type="button" name="remove_chart" id="'+i+'" class="btn btn-danger remove_chart"><i class="fa fa-minus"></i></button></td></tr>';
$('#add').click(function(){
i++;
$('#dynamic_field').append(chart_add);
$('.selectpicker').selectpicker('render');
$('select[name="account_name[]').change(function()
{
$('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
});
});
$(document).on('click', '.remove_chart', function(){
var button_id = $(this).attr("id");
$('#row_chart'+button_id+'').remove();
});
});
</script>
Something like this should work.
My status column should read Approved or Pending per user row. Upon click of edit button, at bottom of modal should say current status and Yes/No radio buttons to keep as is or change status, and have that reflected in the table.
Right now it's only setting to Pending in the modal upon selecting No, and I need the same logic but upon click of Yes for Approved. Help!
PHP Function:n
public function approve(){
$id = $this->input->get("user_id");
$this->db->where("id", $id);
$data = [
"approved" => 1
];
if (isset($data['approved']) && $data['approved'] == 1) {
$this->db->update("User_Inputs", $data);
redirect("/myform/getdatabase");
}
else {
echo 0;
}
HTML/JQuery:
<html>
<head>
<title>Admin View</title>
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body background=http://wallpapercave.com/wp/ItmVuT6.jpg>
<!-- container with table headers / user records / edit function / approve function -->
<div class="container">
<table class="table table-hover table-striped">
<center>
<thead>
<tr style="font-size: 24; color: white;">
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Status</th>
<th colspan="1">Action</th>
</tr>
</thead>
</center>
<tbody style="background-color: #F0F8FF">
<?php
foreach($users as $u)
{
?>
<tr style="font-size: 20;" id="row<?= $u->id?>">
<td width="5%;"> <?php echo $u->id; ?></td>
<td><?php echo $u->first_name; ?></td>
<td><?php echo $u->last_name; ?></td>
<td><?php echo $u->email; ?></td>
<td><?php echo ($u->approved) ? "Approved" : "Pending"; ?></td>
<!--edit button-->
<td><button type="button" data-id="<?= $u->id ?>" data-first_name="<?= $u->first_name ?>" data-last_name="<?= $u->last_name ?>" data-email="<?= $u->email ?>" data-approved="<?= $u->approved ?>" onclick="loadmodal(this)"><span class='glyphicon glyphicon-edit'></span></button></td>
<!--approve button
<td><span class="glyphicon glyphicon-ok gi-15x" style='color: green'></span></td>-->
</tr>
<?php } ?>
</tbody>
</table>
<!--modal-->
<script type="text/javascript">
function loadmodal(button){
var first_name = $(button).data("first_name");
var last_name = $(button).data("last_name");
var email = $(button).data("email");
var id = $(button).data("id");
var status = $(button).data("approved");
/* pass values to modal */
$("#m_id").val(id);
$("#m_first_name").val(first_name);
$("#m_last_name").val(last_name);
$("#m_email").val(email);
$("#m_approved").val(status);
$("input[name=r1]:checked").val()
$("input[name=r2]:checked").val()
$("#myModalLabel").text("Entry for User ID: " + id);
$("#editModal").modal("show");
$("#formdata").submit(function(e){
e.preventDefault();
var data = $(this).serialize();
$.post("/ci/index.php/myform/edituser", data, function(html){
console.log(html);
var response = $.parseJSON(html);
console.log(response);
if (response.status == 'success'){
$("#row"+id).html(response.html);
$("#editModal").modal("hide");
} else {
console.log('Error updating user');
$("#editModal").modal("hide");
}
});
});
function approveRadio(){
if (document.getElementsByID('r1').checked) {
rate_value = document.getElementsByID
}
var choice = document.getElementsByName('choice').value;
}
}
</script>
<div class='modal fade' id='editModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<h3 class="modal-title" id='myModalLabel'></h3>
<button type='button' class='close' data-dismiss='modal' aria-label="Close"><span class='glyphicon glyphicon-remove'></span></button>
</div>
<!--modal body-->
<div class='modal-body'>
<form id="formdata">
<input type="hidden" id="m_id" name="id" value="">
<div class='form-group'>
<label class='control-label' for='First Name'>First Name</label>
<input type='text' id="m_first_name" name='first_name' class='form-control'
value=""><br/>
</div>
<div class='form-group'>
<label class='control-label' for='Last Name'>Last Name</label>
<input type='text' id="m_last_name" name='last_name' class='form-control' value=""/><br/>
</div>
<div class='form-group'>
<label class='control-label' for='Last Name'>Email</label>
<input type='text' id="m_email" name='email' class='form-control' value=""/><br/>
</div>
<div class='form-group'>
<label class='control-label' for='Approved'>Is user approved? Current status:</label><br>
<input type="radio" id="r1" name="approved" value="1"> Yes
<input type="radio" id="r2" name="approved" value="0"> No
<!--m<input type="text" id="m_approved" name="status" class='form-control' value="">-->
</div>
<button type='submit' class='btn btn-success'>Update Entry</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Iam working with online test portal developing its working fine with chrome but the problem is it not working woth mozill.My code is as follows and it works fine in chrome and not working in the mozilla firefox Suggest me the alternative or solution for.
input[data-type="choise"] is not working
<script>
( document ).ready(function() {
$('input[data-type="choise"]').change(function() {
var Question = $(this).attr('name');
var Checked = $(this).attr('value');
y++;
if(Checked=="0"){
}else{
x++;
}
$('#score').replaceWith("<span id='score'><input type='hidden' name='score' id='score' value='"+ x +"' /> <input type='hidden' name='totalquestions' id='totalquestions' value='"+ y +"' /></span>");
alert('Selected Choise for ' + Question + ' is ' + Checked+ 'and score is'+ x);
});
});
</script>
<div class="time">
<label> Remaining Time </label> <span id="timer"></span>
</div>
<?php
include('connection.php');
$test=$_SESSION["testnum"];
$query=mysql_query("select * from questions where Testno='$test' order by Id ASC");
if($query==true){ ?>
<form id="scoretarget" name="formsubmit" action="congrasulations.php" method="POST">
<span id="score"><input type="hidden" name="score" id="score" value="" />
<input type='hidden' name='totalquestions' id='totalquestions' value="" />
</span>
<hr class="hr">
<?php $id=1;
While($row=mysql_fetch_array($query)){ ?>
<?php
$questionnum=$row['Questionno'];
$question=$row['Question'];
$ans=$row['Answer'];
?>
<div class="question">
<div class="row">
<div class="col-md-1">
<label class="control-label form-inline">
<?php echo $questionnum?>
</label>
</div>
<div class="col-md-11 quest-left">
<div class="form-group">
<label class="control-label form-inline">
<?php echo $question;?>
</label>
</div>
<fieldset>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option A"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option1'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option B"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option2'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option C"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option3'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option D"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option4'];?></span><br>
</fieldset>
</div>
</div>
</div><br>
<?php ++$id;} ?>
<input type="submit" name="proceed" value="proceed" class="btn btn-info pull-right">
</form>
<?php } else{?>
<div class="question">
<div class="row">
<div class="col-md-12">
<h4 style="text-align:center; color:red;"> Question Paper is not updated </h4>
</div></div></div>
<?php }
?>
</div>
<script>
( document ).ready(function() {
$('input[data-type="choise"]').click(function() {
var Question = $(this).attr('name');
var Checked = $(this).attr('value');
y++;
if(Checked=="0"){
}else{
x++;
}
$('#score').replaceWith("<span id='score'><input type='hidden' name='score' id='score' value='"+ x +"' /> <input type='hidden' name='totalquestions' id='totalquestions' value='"+ y +"' /></span>");
alert('Selected Choise for ' + Question + ' is ' + Checked+ 'and score is'+ x);
});
});
</script>
<div class="time">
<label> Remaining Time </label> <span id="timer"></span>
</div>
<?php
include('connection.php');
$test=$_SESSION["testnum"];
$query=mysql_query("select * from questions where Testno='$test' order by Id ASC");
if($query==true){ ?>
<form id="scoretarget" name="formsubmit" action="congrasulations.php" method="POST">
<span id="score"><input type="hidden" name="score" id="score" value="" />
<input type='hidden' name='totalquestions' id='totalquestions' value="" />
</span>
<hr class="hr">
<?php $id=1;
While($row=mysql_fetch_array($query)){ ?>
<?php
$questionnum=$row['Questionno'];
$question=$row['Question'];
$ans=$row['Answer'];
?>
<div class="question">
<div class="row">
<div class="col-md-1">
<label class="control-label form-inline">
<?php echo $questionnum?>
</label>
</div>
<div class="col-md-11 quest-left">
<div class="form-group">
<label class="control-label form-inline">
<?php echo $question;?>
</label>
</div>
<fieldset>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option A"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option1'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option B"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option2'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option C"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option3'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option D"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option4'];?></span><br>
</fieldset>
</div>
</div>
</div><br>
<?php ++$id;} ?>
<input type="submit" name="proceed" value="proceed" class="btn btn-info pull-right">
</form>
<?php } else{?>
<div class="question">
<div class="row">
<div class="col-md-12">
<h4 style="text-align:center; color:red;"> Question Paper is not updated </h4>
</div></div></div>
<?php }
?>
</div>