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
Related
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);
}
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());
});
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));
});
});
});
I am creating a custom MySQL database query UI. Inside this UI I have a Query Builder interface that I would like to dynamically append query properties based on the user selections in order to create a dynamic query. Please see the below picture for a visual description
From the picture above I would like to append CHARACTER_SET after the FROM and append as asterisk when ALL is selected from the table and so forth with the key being the positions where I place the generated variables.
How can I achieve this with JQuery?
My JavaScript
Selecting a Table
$(document).on("change", ".tbl_list", function () {
var tbls = new Array();
$("input:checkbox[name='tbl[]']:checked").each(function () {
tbls.push($(this).val());
});
var tbl = tbls.join('|');
var db = window.sessionStorage.getItem("db");
$.ajax({
type: "POST",
url: "ajax2.php",
data: {
tbl: tbl,
db: db
},
success: function (html) {
console.log(html);
$("#tblField").html(html).show();
}
});
});
Selecting All option
$(document).on("click", ".tblall", function () {
if (this.checked) {
// Iterate each checkbox
$('.tblst').each(function () {
this.checked = true;
});
} else {
$('.tblst').each(function () {
this.checked = false;
});
}
});
EDIT
As requested HTML for my DIVs
Table Selector
while ( $row = mysqli_fetch_array ( $tbl_list ) ) {
?>
<input type="checkbox" name="tbl[]" class="tbl_list"
value="<?php echo $row [0]; ?>" />
<?php echo $row [0]; ?>
<br>
Query Builder
<div id="qryDisplay">
<fieldset>
<legend> Query Builder</legend>
<div id="qryView">
<p>SELECT FROM</p>
</div>
</fieldset>
</div>
What I have tried so far
Using .append I can add data to the end of the paragraph so this would be ideal for my Table name. However its a function and i'm not sure how I would implement the code below into my select table function.
$("#qryView > p").append(" " tblName);
Anyway, not considering the logic behind the selection of multiple tables my approach would be to store selections in hidden input fields and at the end construct from the hidden fields the query.
<input type="hidden" value="" name="hiddenTables" id="hiddenTables" />
fill field according to selections in your function from above:
$("input:checkbox[name='tbl[]']:checked").each(function () {
tbls.push($(this).val());
if($('#hiddenTables').val() == ""){
$('#hiddenTables').val($(this).val());
}else{
$('#hiddenTables').val($('#hiddenTables').val()+','+$(this).val());
}
});
At the end create your query:
// hidden field for field selection, same as above.
var fieldselection = '*';
if($('#hiddenFieldselection').val() != ""){
fieldselection = $('#hiddenFieldselection').val();
}
$("#qryView > p").html("SELECT " + fieldselection + " FROM " + $('#hiddenTables').val());
This needs to be adjusted the way you need it of course and I haven't tested any of this... So that's up to you :-)
This code causes my save to either flash "404 not found" when in a modal dialog or goes to a blank white page when in a separate tab.
Heres the code:
<script>
function changeSelection()
{
var value = $('#typeSelect').val();
var div = document.getElementById('sigType');
if(value >= 1 && value <= 3)
{
var signalTypeOptions =
<?php echo json_encode( array_values( $signalTypeOptions));?>;
var selection = document.getElementById('valueSelect');
selection.innerHTML = '';
var i = 0;
for(optionText in signalTypeOptions[value])
{
var option = document.createElement('option');
option.innerHTML = optionText;
selection.appendChild(option);
}
$(div).show();
}
else
{
$(div).hide();
}
}
</script>
The code is used to update the dropdown options for a secondary select element (valueSelect) based off of an initial select element (typeSelect).
I found that when a value is selected in the dynamically populated dropdown, the html doesn't reflect the selection.