Get the Checked box input values using Jquery in CodeIgniter using Mysql - javascript

I want to display checked checkbox value with input box value when i clicking button in codeigniter. Checked checkbox value has deen displayed correctly using join function. but input values is not showing. In my code, when i clicking button all input text values are displayed. my problem to display only checked checkbox input value using join function.
Controller code:
public function unpaid()
{
$basicUrl=$this->config->item("basicUrl");
$query=$this->db->query("SELECT aa.id as id,customer_type_id,start_time,close_time,dd.name as customer_name,bb.name as vehicle_name,cc.name as driver_name,other_expensive,paid_amount,payment_date,payment_mode,payment,tour_file,DATE_FORMAT(aa.created_date, '%d/%m/%Y') as created_date FROM ".$this->tbl." as aa
left join vehicle as bb on aa.vehicle_id=bb.id
left join driver as cc on aa.driver_id=cc.id
left join tbl_customer as dd on aa.customer_id=dd.id
order by aa.id desc");
$result=array();
if($query->num_rows()){
$i=1;
foreach($query->result() as $row){
$result_row=array();
$result_row[]='<input type="checkbox" name="unpaid_id[]" id="unpaid_id" value="'.$row->id.'" />';
$result_row[]=$row->created_date;
$result_row[]=$i;
$result_row[]=$row->customer_name;
$result_row[]=$row->payment;
$result_row[]='<input type="text" name="paid_amount[]" id="paid_amount" value="'.$row->paid_amount.'" />';
$result_row[]=$row->payment_date;
$result_row[]='<input type="text" name="payment_mode[]" id="payment_mode" value="'.$row->payment_mode.'" />';
$result[]=$result_row;
$i++;
}
}
My view code:
<input type="button" class="btn btn-primary" id="save_value" name="save_value" value="Save" />
<script>
$(document).ready(function() {
$('#save_value').click(function(){
var favorite = [];
var favorite1 = [];
var unpaid_id = [];
var paid_amount = [];
var payment_mode = [];
$.each($("input[ type='checkbox']:checked"), function(){
unpaid_id.push($(this).val());
});
var unpaid_id = unpaid_id.join(",");
alert(unpaid_id);
$.each($("input[ id='paid_amount']"), function(){
paid_amount.push($(this).val());
});
alert(paid_amount.join(","));
var paid_amount = paid_amount.join(",");
});
</script>
Thanks #

use the class in place of id
$.each($("input[class='paid_amount']"), function(){
paid_amount.push($(this).val());
});

Related

Passing checkbox array to GAS?

I am using Google App Script to create an HTML sidebar in Sheets. I want to have several checkboxes to select and pass the values back to GAS, preferably as an array. I have been looking up solutions and was using this as a guide. Here is my GAS code:
function showSidebar() {
var array = ["A","B","C","D","E"];
var html = HtmlService.createTemplateFromFile('page');
html.cols = array;
var html = html.evaluate().setTitle('Example');
SpreadsheetApp.getUi()
.showSidebar(html);
}
function displayToast(columns) {
SpreadsheetApp.getActive().toast("Output: " + columns);
}
The toast is there to test my setup, but it doesn't display when I click the submit button.
Here is the 'page' HTML:
<body>
<p>Which columns should be included in the email?</p>
<? for(var i = 0; i < cols.length; i++) { ?>
<input type="checkbox" name="col" id="<?= cols[i] ?>" value="<?= cols[i] ?>">Col
<?= cols[i] ?></input>
<? } ?><br>
<button id="btn">Submit</button> <br>
</body>
<script>
document.getElementById('btn').onclick = function() {
var markedCheckbox = document.getElementsByName('col');
google.script.run.displayToast(markedCheckbox);
}
</script>
The sidebar displays correctly, but I just can't get the checkbox values to pass over to the GAS side.
TIA.
You can't pass the HTML element to Apps Script. You have to send only the values:
document.getElementById('btn').onclick = function() {
var markedCheckbox = Array.from(document.getElementsByName('col'))
.filter(x => x.checked)
.map(x => x.value)
google.script.run.displayToast(markedCheckbox);
}

How to insert JSON Array into database

I'm using dropdown when selected first dropdown, based on first dropdown selected it will show second dropdown. Each dropdown have data from database and the problem is i want to insert it into new table on database based on dropdown selected.
All the code on the same page, this is the php.
<?php
$sql= mysql_query("SELECT KodeMapel,NamaTema FROM mapel");
while ($row = mysql_fetch_array($sql))
{
$tema[] = array("KodeMapel" => $row['KodeMapel'], "val" => $row['NamaTema']);
}
$query = mysql_query("SELECT KodeMapel, Subtema FROM subtema");
while ($row = mysql_fetch_array($query))
{
$subtema[$row['KodeMapel']][] = array("KodeMapel" => $row['KodeMapel'], "val" => $row['Subtema']);
}
$jsonTema = json_encode($tema);
$jsonSubTema = json_encode($subtema);
?>
This is the form, included javascript on it. Inside the javascript there's php code.
<script type='text/javascript'>
<?php
echo "var tema = $jsonTema;";
echo "var subtema = $jsonSubTema;";
?>
function loadtema(){
var select = document.getElementById("PilihTema");
select.onchange = updateSubTema;
for(var i = 0; i < tema.length; i++){
select.options[i] = new Option(tema[i].val,tema[i].KodeMapel);
}
}
function updateSubTema(){
var PilihTema = this;
var idtema = this.value;
var PilihSubtema = document.getElementById("PilihSubtema");
PilihSubtema.options.length = 0; //delete all options if any present
for(var i = 0; i < subtema[idtema].length; i++){
PilihSubtema.options[i] = new Option(subtema[idtema][i].val,subtema[idtema][i].KodeMapel);
}
}
</script>
<body onload='loadtema()'>
<select id='PilihTema' name='PilihTema' class='form-control11'>
</select>
<select id='PilihSubtema' name='PilihSubtema' class='form-control11'>
</select>
<button input class="btn btn-success" id="submit" type="submit" name="add" value="Simpan" onclick="return(submitmapel());"/>
<i class="fa fa-save fa-fw"></i> Simpan
So far I see some errors in your code.
select.onchange = updateSubTema;
You are missing () for the function. Should be select.onchange = updateSubTema();
I'm not sure if var PilihTema = this; will actually select anything, personally i'd do it the following way.
loadTema function:
var select = document.getElementById("PilihTema");
select.onchange = updateSubTema(select.value);
updateTema function
function updateTema(pilihTema){
//Your code here
}
EDIT: If you mean you want to add an item per run through your for loop, I would suggest doing it the following way (I use jQuery as it is much easier in my opinion):
$(document).ready(function(){
<?php
echo "var tema = $jsonTema;";
echo "var subtema = $jsonSubTema;";
?>
//Load Tema
$.each(tema, function (i, item) {
//I am unsure as to what you mean by KodeMapel, though if this is associative arrays encoded as JSON, you will want to use item[val] and item[KodeMapel]
$("#PilihTema").append(new Option(item.val, item.KodeMapel));
});
//Called when the first select field is changed.
$("#PilihTema").change(function(){
//Get value of first select fields' selected item
var pilihValue = $("#PilihTema option:checked").val();
//Remove all the options from the second select field
$("#PilihSubtema").html("");
//For each subtema, with first select fields value, add option to second select field
$.each(subtema[pilihValue], function (i, item) {
//Again, I am unsure as to what you mean by KodeMapel, though if this is associative arrays encoded as JSON, you will want to use item[val] and item[KodeMapel]
$("#PilihSubtema").append(new Option(item.val, item.KodeMapel));
});
});
});

jQuery check 2 checkboxes in a PHP foreach's loop

I have a javascript's script which allow to check 2 checkboxes with the same values at the same time but it doesn't work.
I get the values from a databases thanks to a php's foreach loop. Here is my test code:
<?php
//checkboxes
foreach($host1 as $row){
echo'<input type="checkbox" name="list[]" value="'.$row['table'].'">';
}
foreach($host1 as $row){
echo'<input type="checkbox" name="list[]" value="'.$row['table'].'">';
}
//script
foreach($host1 as $row){ ?>
<script type="text/javascript">
var $checkboxes = $("input[type=checkbox][name='list[]'][value='<?php echo $row['table']?>']");
$checkboxes.on("click", function() {
var checkedState = this.checked
$checkboxes.each(function() {
this.checked = checkedState;
});
});
</script>
<?php }
If I change the value $row['table'] into a simple number, "2" for example, it's working. I also look if the values ($row['table']) of every checkboxes are the same and they are all good.
Strange thing : When I check any checkboxes, it will not check the corresponding ones, but it will instead check the lasts of the table.
Any ideas where is my mistake ?
Thank you ;)
You should try this. I think this is what you want
<?php
//checkboxes
foreach ($host1 as $row) {
echo'<input class="my_cb" type="checkbox" name="list[]" value="' . $row['table'] . '"/>';
}
foreach ($host1 as $row) {
echo'<input class="my_cb" type="checkbox" name="list[]" value="' . $row['table'] . '"/>';
}
//script
?>
<script type = "text/javascript">
$(document).ready(function () {
$(".my_cb").on("click", function () {
var val = $(this).val();
var checkboxes = $("input[type=checkbox][name='list[]'][value='"+val+"']");
var checkedState = this.checked;
checkboxes.each(function () {
this.checked = checkedState;
});
});
});
</script>
Instead of doing a php loop and assigning each click event separately, let jQuery handle that:
// this selector should get all your checkboxes
var checkboxes = $("input[type=checkbox][name='list[]']");
checkboxes.click(function() {
// not sure what you are trying to do here but it just looks like you are trying to set all checkboxes to the same state as the current one
checkboxes.prop('checked', this.checked);
});
Update
As you only have 2 list of checkboxes with the same name, I have shown options for if they have different parent elements or the same parent element
JS:
var list = $('.parent-element').find("input[type=checkbox][name='list[]']"),
list1 = $('.parent-element1').find("input[type=checkbox][name='list[]']");
list.click(function() {
var checkbox = $(this),
thisIndex = list.index(checkbox);
list1.eq(thisIndex).prop('checked', this.checked);
// if at all possible I would use the above index to change the corresponding checkbox in the other list.
// if all checkboxes are under the same parent then you will only have list (list1 won't be needed)
// and it will contain all children so to get the corresponding index you would need to do:
var thisIndex = list.index(checkbox) + (list.length / 2);
list.eq(thisIndex).prop('checked', this.checked);
});

php mysql populate several dynamic dropdown list with add button

well this is my first post :)
I have a mysql DB and a form where you chose what you want to order. I have to say, that for input fields it works, but I have a problem when it comes to dynamic dropdowns. This is what I have (the two queries):
<?php
// Getting the data from mySQL table for first list box
$quer1="SELECT DISTINCT kategorija FROM artikli order by kategorija";
// for second dropdown list we will check if category is selected else we will display all the subcategories
if(isset($kategorija) and strlen($kategorija) > 0) {
$quer2="SELECT artikel FROM artikli where kategorija='$kategorija' order by artikel";
}
else {
$quer2="SELECT artikel FROM artikli order by artikel";
}
?>
<form id="forma_narocilo" action="naroci.php" method="POST">
<div class="input_fields_wrap">
<div>
<select name="kategorija" id="kategorija" ><option value="">Izberi kategorijo</option>
<?php
foreach ($dbo->query($quer1) as $row2) {
if($row2['kategorija']==$kategorija) {
echo "<option id='izbirna_kategorija' selected value='$row2[kategorija]' onchange='self.location=self.location+'?kategorija='+this.options[this.selectedIndex].value'>$row2[kategorija]</option>"."<br />";
}
else {
echo "<option id='izbirna_kategorija' value='$row2[kategorija]'>$row2[kategorija]</option>";
}
}
echo "</select>";
echo "<select name='artikel[]'><option value=''>Izberi artikel</option>";
foreach ($dbo->query($quer2) as $row) {
echo "<option value='$row[artikel]'>$row[artikel]</option>";
}
echo "</select>";
?>
<input type="number" name="kolicina[]"/><button class="add_field_button">Add line</button>
</div>
</div>
<input type="submit" id="shrani" value="Save" >
</form>
and this works just fine and it is updating the fields according to my needs, but now I need an "add" button which will insert another line with all three fields (category, item, nrPcs). For normal html inputs I used this:
$(document).ready(function() {
var max_fields = 25; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div>'+x+'<input type="text" name="artikel[]"/><input type="text" name="kolicina[]"/>X</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
this will add a and 2 inputs inside. for the reload I use this:
function reload(){
var form = document.getElementById("forma_narocilo");
var val = form.kategorija.options[form.kategorija.options.selectedIndex].value;
self.location='?kategorija=' + val ;
}
function init(){
document.getElementById("kategorija").onchange = reload;
}
window.onload = init;
Now, my question is, how can I insert dropdowns when clicking the add button? Of course it should work as the first one e.g. it has to be independent...
thanks, erik

Dynamic Select Drop Box Generation Containing PHP Data

I need some help generating multiple select boxes. I am able to generate new boxes but they do not contain the SQL data that the boxes should have. I will link my javascript code first.
<script>
function add_file_field2(){
var container2=document.getElementById('file_container2');
var file_field2=document.createElement('select');
file_field2.name='animalCommony[]';
file_field2.type='animalCommony';
file_field2.value = 'animalCommony[]';
file_field2.text = 'animalCommony';
container2.appendChild(file_field2);
var br_field=document.createElement('br');
container2.appendChild(br_field);
}
function remove_field2() {
var container2=document.getElementById('file_container2');
lastChild = container2.lastChild;
if(lastChild !=0) {
container2.removeChild(lastChild);
file_field-= 1;
}
}
</script>
So I am not sure how I need to modify that code to generate the correct select boxes.
Here is my php code:
<?php
$db = get_db_connection('swcrc');
$db->connect();
$db->query("SELECT [ID], [Common_Name], [Scientific_Name] FROM dbo.All_Animals");
while($row = $db->fetch())
{
?>
<option value="<?php echo $row['Common_Name'];?> - <?php echo $row['Scientific_Name'];?>"><?php echo $row['Common_Name'];?> - <em><?php echo $row['Scientific_Name'];?></em></option>
<?php
}
?>
</select>
</div>
</p>
<p>
Add Another Animal
<br />
Remove Animal<br />
<br>
</p>
Finally I will have a screenshot of what it looks like after hitting the 'add another animal button' twice. Thank you for your help!
As you can see empty select boxes are generated.
Screen shot including an example of the kind of data that should populate the added boxes.
Screenshot of database
If all you want to do is copy the contents of the selection box, you don't need to query SQL again. Here's a javascript function that will do the copy, assuming your original selection box has id "myselect." I've also left you a jsfiddle below.
window.add_file_field2 = function () {
function copySelect(select) {
var newSelect = document.createElement('select');
newSelect.name = 'animalCommony[]';
newSelect.type = 'animalCommony';
newSelect.value = 'animalCommony[]';
newSelect.text = 'animalCommony';
for (var i = 0;i < select.options.length;i++) {
var option = document.createElement('option')
option.value = select.options[i].value
option.text = select.options[i].text
newSelect.appendChild(option)
}
return newSelect
}
var container2 = document.getElementById('file_container2');
container2.appendChild(copySelect(document.getElementById("myselect")));
var br_field = document.createElement('br');
container2.appendChild(br_field);
}
Here is a jsfiddle

Categories