I have the following codes that generate checkboxes from database
< table class="table">
< thead>
< /thead>
< th>
<?php
$oaNamesQuery = "SELECT DISTINCT oaName FROM oaDetails";
$oaNamesQueryExecute = mysqli_query($conn, $oaNamesQuery);
while($oaNamesQueryRow = mysqli_fetch_array($oaNamesQueryExecute)){
$oaName = $oaNamesQueryRow['oaName'];
echo '<div class = "checkbox-group" required style="float:left; margin-right: 25px;"> <input class="checkBoxes" type="checkbox" id="checkBoxArray" name="checkBoxArray[]" value="'.$oaName.'"> '.$oaName.'</div>';
}
?>
< /th>
< /table>
There is another input box as below whereby input type is number
<div class="col-sm">
<label for="numberOfShiftPerDay">Number</label>
<input type="number" class="form-control" id="numberOfShiftPerDay" name="numberOfShiftPerDay" placeholder="No: " onchange="disablingRoutine()" min="1" max="4">
</div>
Example UI as below
When I enter some number, there will be a drop down menu appear according to the number I entered. Eg: If keyed in 1, there will be one drop down list will appear as below using jQuery 'OnChange'. The UI will be as below
What I Need
I need the drop down menu options to be based on user selected checkboxes. Eg: If the user selected checkboxes X, Y and XX, then these drop down list should show X, Y and XX. Can someone help me how to do this?
Edit 1
Added Javascript function on the change routine as suggested by stackoverflow member. But now having duplicate issues. Below the code that I changed
if ($("#numberOfShiftPerDay").val() == 1) {
$.each($("input[name='checkBoxArray[]']:checked"), function() {
cval = $(this).val();
$('#oaInShift1').append('<option>' + cval + '</option>')
});
} else if ($("#numberOfShiftPerDay").val() == 2) {
$.each($("input[name='checkBoxArray[]']:checked"), function() {
cval = $(this).val();
$('#oaInShift2').append('<option>' + cval + '</option>')
});
} else if ($("#numberOfShiftPerDay").val() == 3) {
$.each($("input[name='checkBoxArray[]']:checked"), function() {
cval = $(this).val();
$('#oaInShift3').append('<option>' + cval + '</option>')
});
} else {
$.each($("input[name='checkBoxArray[]']:checked"), function() {
cval = $(this).val();
$('#oaInShift4').append('<option>' + cval + '</option>')
});
}
You can get the selected checkbox values and append to your dropdown list in your onchange function.
Try this:
function disablingRoutine()
{
$.each($("input[name='checkBoxArray[]']:checked"), function(){
cval = $(this).val();
$('#dropdownID').append('<option>'+cval+'</option>')
});
}
Edit 2
function disablingRoutine()
{
cdata = '';
$.each($("input[name='checkBoxArray[]']:checked"), function(){
cval = $(this).val();
cdata += '<option>'+cval+'</option>';
});
$('#dropdownID').html(cdata)
}
Related
I am trying to make a text box that when you type in it, it pulls up suggestions underneath that come from a recordset. For some reason when you type in the field, I only get the first letter. It think it has to do with the json_encode part. When I changed the array to be just text: "Brainpop","Google", etc. it worked fine. Any thoughts? This is the coding I based it off of:
https://www.w3schools.com/howto/howto_js_autocomplete.asp
<script type="application/javascript">
function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {
/*check if the item starts with the same letters as the text field value:*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/*create a DIV element for each matching element:*/
b = document.createElement("DIV");
/*make the matching letters bold:*/
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener("click", function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
});
a.appendChild(b);
}
}
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus--;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}</script>
<script>
//now put it into the javascript
var software_list = <?php echo json_encode($types2, JSON_UNESCAPED_SLASHES), "\n"; ?>;
</script>
<?php
$query1 = "SELECT software_name from software";
$result = mysqli_query($sdpc_i, $query1);
$types = array();
while ($row = $result->fetch_assoc()) {
$types[] = '"'.$row['software_name'].'"';
}
$types2 = implode(",",$types);
?>
<div class="autocomplete"><input type="text" name="software_name" id="myInput" class="form-control col-md-8" value="" required></div><script>
autocomplete(document.getElementById("myInput"), software_list);
</script>
</div>
I have a text field on my form actually its like GMT time. I want the users to
enter integers like '+5' '+6' or '-6' or '-5' etc.
I want to make it easy for users so that they don't have to write '+' or '-' by there self. There should be by default option of '+' or '-' as first character in text field.
I saw some solutions like making a simple drop down in front and user can select from there which will automatically appear in text box.
But i want to make it more easy if some other easy solution is there.
will prefer using HTML5 but if not than jquery will be fine..
Try this one:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var num = 0;
$('#txt1').keydown(function(e){
num += 1;
if (e.keyCode > 36 && e.keyCode < 41) {
if(num % 2){
$('#txt1').val('+');
}else{
$('#txt1').val('-');
}
}
});
});
</script>
<input type="text" name="txt1" id="txt1" />
you could try this:
var $input = $('#input');
var defaultChar = '+';
$input.val(defaultChar);
$input.on('keyup', function(event) {
var $this = $(this);
var currentText = $this.val();
currentText = getDigits(currentText);
$this.val(defaultChar + currentText);
});
function getDigits(text) {
var digits = text.match(/[+-]?(\d*)/);
console.log("text = " + text);
console.log("digits = " + JSON.stringify(digits));
if(digits.length > 1) {
return digits[1];
} else {
return 'did not contain numbers';
}
}
here is the fiddle
EDIT: added dropdown to select defaultChar.
Javascript:
var $input = $('#input');
var $defaultCharElem = $('#defaultChar');
var defaultChar = $defaultCharElem.val();
$input.val(defaultChar);
$defaultCharElem.on('change', function() {
var $this = $(this);
defaultChar = $this.val();
$input.val(defaultChar + getDigits($input.val()));
});
$input.on('keyup', function(event) {
var $this = $(this);
var currentText = $this.val();
currentText = getDigits(currentText);
$this.val(defaultChar + currentText);
});
function getDigits(text) {
var digits = text.match(/[+-]?(\d*)/);
console.log("text = " + text);
console.log("digits = " + JSON.stringify(digits));
if(digits.length > 1) {
return digits[1];
} else {
return 'did not contain numbers';
}
}
HTML:
<select id="defaultChar">
<option value="+">+</option>
<option value="-">-</option>
</select>
<input type="text" id="input" value="" />
Here is the new fiddle
I have a problem similar to this resolved question here link!
There are many great answers in this link even extending the OP's problem to multiple radio groups.
(My formatting is the same as in the link but) my problem is that I don't have more than two radio groups, but rather multiple elements in my radio groups using a FOREACH loop.
My PHP is below followed by the script.
<?php
$query = mysqli_query($con, "SELECT example
FROM example_DB ");
while ($row = mysqli_fetch_assoc($query)){
foreach($row as &$value) {
if ($value == NULL) {
echo "";
}
else {
?>
<form method="post">
<input data-group="A" class="A" type="radio" value="<?php echo"$value<br />\n";?>">
<?phpecho"$value<br />\n";}}}?>
</input>
</div>
<div>
<?php
$query = mysqli_query($con, "SELECT example
FROM example_DB");
while ($row = mysqli_fetch_assoc($query)){
foreach($row as &$value) {
if ($value == 0.00) {
echo "";
}
else {
?>
<input data-group="A" class="A" ID="A" type="radio" value="<?php echo"$value<br />\n";?>">
<?php
echo"$value<br />\n";
}}}
?>
</input>
</div>
</form>
Im using the script that came with one of the answers in the link:
<script>
$( document ).ready(function() {
$(function() {
var radios = $('[type=radio]');
$('input:radio').change(function(){
var index = $( this ).index( $('[name=' + this.name + ']') );
var groups = [];
radios.not( $('[name=' + this.name + ']') )
.each(function(v,i) {
$.inArray(this.name, groups) > -1 || groups.push( this.name );
});
$.each(groups, function(i,v) {
$('[name=' + v + ']').eq( index ).prop( 'checked', true );
});
});
});
});
</script>
Try this : You can read the name of selected radio button and find all radio button with same name to select them.
NOTE - $(document).ready(.. and $(function(){.. both are same, so you can use any one of them and not both at same time.
$(function() {
$('input:radio').change(function(){
var name = $(this).prop('name');
$('input:radio[name="'+name+'"]').prop('checked',this.checked);
});
});
EDIT- As OP want to select all radio button with same class name or value, use following code -
For Same Class -
$(function() {
$('input:radio').change(function(){
var className = $(this).prop('class');
$('input:radio[class="'+className +'"]').prop('checked',this.checked);
});
});
For Same Value -
$(function() {
$('input:radio').change(function(){
var radioVal = $(this).val();
$('input:radio[value="'+ radioVal +'"]').prop('checked',this.checked);
});
});
I have a script that calls to a Database to get Autocomplete data.
Once the specific Autocomplete data (Item Name) has been chosen a few other fields are populated, namely: Item Code, Price & Quantity.
When the quantity is changed the Lines Total field changes to "Quantity * Price" total.
There is the option to carry on adding rows Dynamically and autocomplete each in the same fashion ... there is a Grand Total that adds each line total together.
My issues are that the grand total only changes when the Quantity is changed, it should load on the focus of Price in each line - also, removing a line does not remove that spcific Line Totals ammount from the Grand Total and if you change the very first lines quantity (only the first line is affected) it re-sets the Grand total to anything that line has now added up to ... Please can someone look at my code.
The live version is at
http://cardoso.co.za/form/
You can also get the files there too if you browse to
http://cardoso.co.za/form/form.zip
Any and all help is greatly appreciated!!!
Edit here's some code from the entire script:
var $itemsTable = $('#itemsTable');
var rowTemp = [
'<tr class="item-row">',
'<td><a id="deleteRow"><img src="images/icon-minus.png" alt="Remove Item" title="Remove Item"></a></td>',
'<td><input name="itemType" class="itemType" id="itemType" tabindex="1" style="width:350px;"/></td>',
'<td align="center"><input name="itemCode" class="itemCode" id="itemCode" readonly="readonly" style="width:60px;" tabindex="-1"/></td>',
'<td align="center"><input name="itemQty" class="itemQty" id="itemQty" tabindex="2" style="width:40px;" maxlength="4" value=""/></td>',
'<td width="14%" align="center"><input name="itemPrice" class="itemPrice" id="itemPrice" readonly tabindex="-1"/></td>',
'<td width="17%" align="right"><input name="itemTotal" class="itemTotal" id="itemTotal" readonly tabindex="-1"/></td>',
'</tr>'
].join('');
$('#addRow').bind('click',function(){
var $row = $(rowTemp);
var $itemType = $row.find('#itemType');
var $itemCode = $row.find('.itemCode');
var $itemPrice = $row.find('.itemPrice');
var $itemQty = $row.find('.itemQty');
var $itemTotal = $row.find('.itemTotal');
if ( $('#itemType:last').val() !== '' ) {
$row.find('#itemType').autocomplete({
source: 'item-data.php',
minLength: 1,
select: function(event, ui) {
$itemType.val(ui.item.itemType);
$itemCode.val(ui.item.itemCode);
$itemPrice.val(ui.item.itemPrice);
$itemTotal.focus().val(ui.item.itemPrice);
$itemQty.focus().val(1);
$itemQty.keyup(function() {
var Quantity = $itemQty.val();
var Prices = $itemPrice.val();
var ItemsTotal = Quantity * Prices;
$itemTotal.val(ItemsTotal.toFixed(2));
var Tsum = 0;
$('.itemTotal').each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
Tsum += parseFloat(this.value);
$('#toTally').val(Tsum.toFixed(2))
}
});
});
return false;
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.itemType + "</a>" )
.appendTo( ul );
};
$('.item-row:last', $itemsTable).after($row);
$('#minusRow').show();
$('#resetTable').show();
$($itemType).focus();
}
return false;
});
I have implemented the Array, Will post this instead soon, once I get it to work with ID's and Classes without jamming.
I solved the issue by doing the following :
( function($) {
var pounter = 1;
$(document).ready(function(){
var qounter = 1;
var trounter = 1;
//Count each instance and add number to Name
$row.find('._ext_price_total_html').each(function() {
$(this).attr({
'name': function(_, name) {
return name + pounter },
});
pounter++;
})
$row.find('.quantitys').each(function() {
$(this).attr({
'name': function(_, name) {
return name + qounter },
});
qounter++;
})
$('#quantity', function(){
var Tsum = 0;
$('[id^="_ext_price_total_html"]').each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
Tsum += parseFloat(this.value);
}
$('.toTally').val(Tsum.toFixed(2))
})
})
$('#quantity').change(function(){
var Tsum = 0;
$('[id^="_ext_price_total_html"]').each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
Tsum += parseFloat(this.value);
}
$('.toTally').val(Tsum.toFixed(2))
})
})
$('#quantity').keyup(function(){
var Tsum = 0;
$('[id^="_ext_price_total_html"]').each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
Tsum += parseFloat(this.value);
}
$('.toTally').val(Tsum.toFixed(2))
})
})
//adjust/subtract from total when removeing row
$('#deleteRow').live('click',function(){
var delAsk = confirm('Remove this item?');
if (delAsk)
{
$(this).parents('.jshop_prod_cart').remove();
var Tsum = 0;
$('[id^="_ext_price_total_html"]').each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
Tsum += parseFloat(this.value);
}
$('.toTally').val(Tsum.toFixed(2))
})
}
else
{
('cancel');
}
});
I have got a ordered list
<li id="prev">
<a href="#fragment-1>Next</a>
</li>
I want to increment the href value to
<a href="#fragment-1">...
<a href="#fragment-2">...
<a href="#fragment-3">...
<a href="#fragment-4">...
When the next is clicked it should stop from 4 and return to 1 allso is it possible with javascript at all
Thank you
Give your link an id first to make it easier to select.
Then,
document.getElementById('the_id_here').addEventListener('click', function(e) {
var n = e.target.href.split('-')[1] * 1 + 1;
if (n > 4)
n = 1;
e.target.href = e.target.href.split('-')[0] + '-' + n;
}, false);
Example: http://jsbin.com/ajegaf/4#fragment-1
Not exactly what you want but should be close enough to aim you in the right direction, check http://jsfiddle.net/pj28v/
<ul id="list"></ul>
Next
$(function() {
var $list = $('#list'),
count = 4,
i = 0,
cur = 0;
for (; i < count; i++) {
$list.append('<li>frag' + i + '</li>');
}
$('a', $list).eq(0).css('color','red');
$('#next').click(function(ev) {
ev.preventDefault();
cur++;
if (cur >= count) cur = 0;
$('a', $list).css('color','blue').eq(cur).css('color','red');
});
});
A jQuery solution:
$(document).ready(function(){
$('#prev a').click(function(){
var href = $(this).attr('href');
var num = parseInt(href.substr(href.indexOf('-') + 1));
if(num == 4)
{
num = 1;
}
else
{
num++;
}
$(this).attr('href', '#fragment-' + num)
});
});
http://jsfiddle.net/UYDdB/
A solution similar to Delan's one but with jQuery and without the usage of a test. http://jsfiddle.net/GZ26j/
$('#next').on('click', function(e) {
e.preventDefault();
href = $(this).attr('href');
var n = href.split('-')[1] * 1 + 1;
n = n%5;
e.target.href = href.split('-')[0] + '-' + n;
});
Edit:
This solution makes the counter start at 0 and not 1
use a hidden field to hold the value, and an onclick function to increase it and submit the form. SEE: How can I increase a number by activating a button to be able to access a function each time the button is increased?
<?
if(!isset($_GET['count'])) {
$count = 0;
} else {
$count = $_GET['count'];
}
?>
<script type='text/javascript'>
function submitForm(x) {
if(x == 'prev') {
document.getElementById('count').value--;
} else {
document.getElementById('count').value++;
}
document.forms["form"].submit();
}
</script>
<form action='hidfield.php' method='get' name='form'>
<input type='hidden' name='count' id='count' value='<?php echo $count; ?>'>
</form>
<input type='submit' name='prev' value='prev' onclick="submitForm('prev')">
<input type='submit' name='next' value='next' onclick="submitForm('next')">