I have a function called cek2(). The function works like this, if checkbox is not checked it will reset the dropdown menu.
Here is my code.
This is my PHP code.
<?php
while ($r = mysql_fetch_array($sql)) {
echo "<tbody><td>Apakah <b>$r[nama_kriteria]</b> mobil sangat penting bagi anda?</td><td>"
. "<select disabled id='bobot' name='bobot[]' class='bobot'>"
. "<option id='kosong' value=0 hidden selected> Pilih Bobot</option>"
. "<option value=1> Sangat Tidak Penting </option>"
. "<option value=2> Tidak Penting </option>"
. "<option value=3> Cukup Penting </option>"
. "<option value=4> Penting </option>"
. "<option value=5> Sangat Penting </option>"
. "</select>"
. "<td><input type='checkbox' class='kriteria' id='kriteria' name='kriteria[]' onClick='cek();cek2();'</td>"
. "</tbody>";
}
?>
This is my Javascript code.
function cek2() {
var x = document.getElementsByName('kriteria[]');
var y = document.getElementsByName('bobot[]');
var y2 = document.getElementById('kosong').selected = "true";
n = x.length;
for (var i = 0; i < n; i++) {
y[i].y2 = !x[i].checked;
}
}
EDIT
I just find a simple solution. Here is my code.
function cek2() {
var x = document.getElementsByName('kriteria[]');
var y = document.getElementsByName('bobot[]');
n = x.length;
for (var i = 0; i < n; i++) {
if (!x[i].checked) {
y[i].selectedIndex = "0";
}
}
}
function cek2() {
var x = document.getElementsByName('kriteria[]'); // will give checkbox
var y = document.getElementsByName('bobot[]');
var y2 = document.getElementById('kosong').selected = "true";
n = x.length; // you have only one checkbox with name 'kriteria[]' hence length is 1 , valueof n ==1
for (var i = 0; i < n; i++) { // for (var i=0 ; i< 1 ; i++)
y[i].y2 = !x[i].checked; // Hence loop will run only once
}
}
Related
need help i am working with some text inputs here that are dynamic depending on how many the user enter. what i wanted to do is to compute the text inputs automatically after user input value using onkeyup javascript.
here the php and html code:
<?Php
$x = 10;
$i = 0;
for($i=0; $i<$x; $i++){
echo "<input type='text' onkeyup='multiply()' id='tb1'>";
echo "x";
echo "<input type='text' onkeyup='multiply()' id='tb2'>";
echo "=";
echo "<input type='text' onkeyup='multiply()' id='tb3'>";
echo "<br>";
}
?>
total:<input type='text' onkeyup='multiply()' id='tb4'>
and here's the javascript:
<script>
function multiply(){
var textbox1 = document.getElementById('tb1').value;
var textbox2 = document.getElementById('tb2').value;
var result = parseFloat(textbox1) * parseFloat(textbox2);
if(!isNaN(result))
{
document.getElementById('tb3').value = result;
}
}
</script>
now, the first row of text inputs works fine but the remaining text inputs doesn't I know i'm missing something here and i can't figure it out, how can
i compute horizontally those values from tb1 and tb2 then display it on tb3
and compute vertically all the values of tb3 and display it in tb4. any help is much appreciated.TIA
Well all rows contain elements with same ids. So row 1 will contain elements with ids: tb1, tb2, tb3. Row 2 will also contain elements with ids tb1, tb2 and tb3.
The id of each element on a page needs to be unique. You can make the ids unique by appending the row number to the id. For example:
<?php
$x = 10;
$i = 0;
for($i=0; $i<$x; $i++){
echo "<input type='text' onkeyup='multiply(" . $i . ")' id='tb" . $i . "-1'>";
echo "x";
echo "<input type='text' onkeyup='multiply(" . $i . ")' id='tb" . $i . "-2'>";
echo "=";
echo "<input type='text' onkeyup='multiply(" . $i . ")' id='tb" . $i . "-3'>";
echo "<br>";
}
?>
Total: <input type='text' id='tb4'> <input type='button' onclick='CalculateSum()' title='Calculate Sum'>
Your JavaScript code will then look as follows:
<script>
function multiply(row) {
var textbox1 = document.getElementById('tb' + row + '-1').value;
var textbox2 = document.getElementById('tb' + row + '-2').value;
var result = parseFloat(textbox1) * parseFloat(textbox2);
if(!isNaN(result))
{
document.getElementById('tb' + row + '-3').value = result;
}
}
function CalculateSum() {
let total = 0;
for (let i=0; i < 10; i++) {
total += document.getElementById('tb' + i + '-3').value;
}
document.getElementById('tb4').value = total;
}
</script>
<script type="text/javascript">
$(document).ready(function() {
var x;
var test = '';
var y = 0;
var a = 0;
day = 5;
for (i = 0; i < day; i++)
{
y++;
a++;
test = test + '<b>Masa Hari '+ y +' </b>- Masa Dari : <input type="text" placeholder="contoh 16:30" name="masakursus[]" value="<?php echo ' + a +'." ".$masakursus1['+ a +']; ?>"/> Masa Hingga : <input placeholder="contoh 16:30" type="text" name="masakursus[]" value="<?php echo $masakursus1[10];?>"/></br>';
}
document.getElementById("demo").innerHTML =test;
});
</script>
is it possible to put the value of var a into var test.? I want to view output from array php.
Looked through various solutions but unable to resolve. So far what I have implemented, only the first row is getting hid whereas the id of column remains same throughout. Can you please tell me that what needs to be changed?
JAVASCRIPT:
<script>
$(document).on("pagecreate","#pageone",function(){
$("button").click(function(){
var theID = $(this).attr('id');
$("#"+theID).slideToggle("slow");
$("table, tr,th#"+theID).slideToggle("slow");
$("table, tr,td#"+theID).slideToggle("slow");
});
/*
$("button").click(function(){
var theID = $(this).attr('id');
$("#"+theID).slideDown("slow");
$("td.#"+theID).slideDown("slow");
});
*/
});
</script>
The table query
$query = "select * from $table_select";
$result = mysql_query($query);
echo "<table id = 'table-1'>";
$num_columns = mysql_num_fields($result);
echo "<tr>";
for ($i = 0; $i < $num_columns; $i++)
{
echo "<th id='".$i."'>";
$meta = mysql_field_name($result, $i);
if($i == 0) {
$arg1 = $meta;
}
$field_name[] = $meta;
echo "$meta</th>";
}
$k = 0;
while($table = mysql_fetch_array($result)) {
$v[] = $table[0];
echo "<tr class = 'hid_tr'>";
for ($i = 0; $i < $num_columns; $i++) {
echo "<td id='".$field_name[$i]."'>{$table[$i]}</td>";
if($i == $num_columns-1) {
echo '<td><form action="'.$_SERVER['PHP_SELF'].'" method="post"> <input type="hidden" id="quoteid" name="quoteid" value='.$v[$k].' /><input type="hidden" id="db" name="db" value='.$db_select.' /> <input type="hidden" id="table" name="t" value='.$table_select.' /> <input type="hidden" id="field" name="field" value='.$arg1.' /> <input type="submit" name="formDelete" id"formDelete" value="" style="background-color:#f00;color:#fff;"/></form></td>';
}
}
echo "</tr>";
$k += 1;
}
echo '<tr>';
for ($i = 0; $i < $num_columns; $i++) {
//echo 'Slide up';
echo '<td><button id="'.$field_name[$i].'">Toggle '.$field_name[$i].'</button></td>';
}
echo '</tr>';
/*
echo '<tr>';
for ($i = 0; $i < $num_columns; $i++) {
//echo 'Slide Down';
echo '<td><button id="'.$field_name[$i].'">Slide down</button></td>';
}
echo '</tr>';
*/
echo "</table>";
The toggle button
echo '<tr>';
for ($i = 0; $i < $num_columns; $i++) {
//echo 'Slide up';
echo '<td><button id="'.$field_name[$i].'">Toggle '.$field_name[$i].'</button></td>';
}
echo '</tr>';
Thanks!
If what you mean is you want all the rows' 3rd tds to be hidden when someone clicks the button in the 3rd td of the top row, then you need to do something like this:
CREATING THE HEADERS
echo '<tr>';
for ($i = 0; $i < $num_columns; $i++) {
//The button calls a function with the proper position
echo '<td id="hideableHeader' . $i . '"><button onclick="hide(' . $i . ');">Toggle '.$field_name[$i].' </button></td>';
}
echo '</tr>';
CREATING THE COLUMNS WITH DATA
Here, you give each TD an id that combines its row and column index like this:
'<td id="hideable_' . $rowNum . '_' . $colNum . '">datahere</td>';
And keep track of total rows.
HIDING (this is a javascript function)
function hide(colNum)
{
//This is the header which will store its state for toggling
var header = document.getElementById( "hideableHeader" + colNum );
//Hide all of these tds starting after the first header row
for ( var row = 0; row < totalRows; row++ )
{
for ( var col = 0; col < totalCols; col++ )
{
var column = document.getElementById( "hideable_" + row + "_" + col );
//Is hidden, show it
if ( header.isHidden === true ) column.style.visibility = "visible";
//Hide it
else column.style.visibility = "hidden";
}
}
}
Code: Fetch JSON and create cart contents. Create a list of each products info, and have a form required for each product to update qty
$.ajax({
url: "myurl",
type: 'POST',
dataType: "json"
}).done(function(response){
$.each(response,function(k,v){
//UL this products info list was here
var otions = '';
for( i=1; i<20; i++ ){
options += '<option value="'+i+'">'+i+'</option>';
}
var form = '<form action="myurl" method="post" accept-charset="utf-8"><label for="products_qty">Quantity</label>'
+'<select name="products_qty>'
+options
+'</select>'
+'<input type="hidden" name="row_id" value="17e62166fc8586dfa4d1bc0e1742c08b" />'
+'<input type="submit" name="submit_item" value="Update" /></form>';
$('#formWrapper').append(form);
});
});
The code runs well. In the for loop I need to add selected=selected to a particular option tag.How and where will this be added.
Can a if statement be achieved inside for loop?
var otions = '';
for( i=1; i<20; i++ )
{
if(i=7)
{
var select = 'selected="selected"';
}
options += '<option value="'+i+'" '+select+'>'+i+'</option>';
}
Ive seen the following link and tried adding their stuff just before my apped, and no luck.
set option "selected" attribute from dynamic created option
Try this changes,
var otions = '';
for( i=1; i<20; i++ ){
if(i==7){
options += '<option value="'+i+'" selected="selected">'+i+'</option>';
}
else
options += '<option value="'+i+'" +select+>'+i+'</option>';
}
The problem with your code:
var otions = '';
for( i=1; i<20; i++ )
{
if(i=7)
{
var select = 'selected="selected"';
}
options += '<option value="'+i+'" '+select+'>'+i+'</option>';
}
... is that select only exists inside the if statement, because that's where you're defining it.
So:
var otions = '';
for( i=1; i<20; i++ )
{
var select;
if(i=7)
{
select = 'selected="selected"';
}
else
{
select = "";
}
options += '<option value="'+i+'" '+select+'>'+i+'</option>';
}
Maybe this is what you want:
var select = i === 7 ? " selected='selected'" : '';
options += "<option value='"+i+"'"+select+'>'+i+'</option>';
I am dynamically generating table rows using javascript (no jquery involved). Each row has 3 cells zone number, input, and a delete button. The number of rows added uses a select box to if they select 3, 3 rows are added ect. What I want to happen is if they add 3 rows then add another 3. the rows will be will displayed as 1,2,3,4,5,6, Currently its 1,2,3,1,2,3. I also what to re-order the rows when a row is deleted.
Current code php file:
function display_Zones($focus, $field, $value, $view){
global $locale, $app_list_strings, $mod_strings;
$html = '';
if($view == 'EditView'){
$html .= '<script src="modules/dry_Zones/zone_items.js"></script>';
$html .= "<div style='padding-top: 10px; padding-bottom:10px;'>";
$html .= "<select id='zone' name='zone'>";
$html .= get_select_options_with_id($app_list_strings["zone_list"]);
$html .= "</select> ";
$html .= "<input type=\"button\" tabindex=\"116\" class=\"button\" value=\"addZone\" id=\"addZone\" onclick=\"insertZone()\" />";
$html .= "</div>";
$html .= "<table border='0' cellspacing='4' width='40%' id='zoneItems'>";
$html .= "<tr><td></td><td>Motor Reference Point</td><td></td></tr>";
$html .= "</table>";
return $html;
}
javascript file:
var num = 1;
function insertZone() {
var table = document.getElementById('zoneItems');
var e = document.getElementById('zone');
var number = e.options[e.selectedIndex].value;
if(number != ''){
for (var i=0; i < number; i++)
{
var x = table.insertRow(-1);
var a = x.insertCell(0);
num = num+i;
a.innerHTML = "<span>Zone: "+num+"</span> ";
var b = x.insertCell(1);
b.innerHTML = "<input type='text' name='motor_ref_point' size='18' value='' />";
var c = x.insertCell(2);
c.innerHTML = "<button class='button lastChild' onclick='removeZone(this)' ><img src='themes/default/images/id-ff-clear.png'></button>";
}
}
}
function removeZone(rows) {
var _row = rows.parentElement.parentElement;
document.getElementById('zoneItems').deleteRow(_row.rowIndex);
}
Probably not the most efficient, way, but I don't think you'll notice any problems unless you have thousands of rows. When you add/delete rows, you could just iterate through the first table cell of each row and update it based on the index.
Array.prototype.forEach.call(document.querySelectorAll('td:first-child'),
function (elem, idx) {
elem.innerHTML = idx + 1;
});
http://jsfiddle.net/ExplosionPIlls/2QxX6/
Ended up just doing it like this:
function insertZone() {
var table = document.getElementById('zoneItems');
var e = document.getElementById('zone');
var number = e.options[e.selectedIndex].value;
if(number != ''){
for (var i=0; i < number; i++)
{
var x = table.insertRow(-1);
var a = x.insertCell(0);
num = i+1;
// a.innerHTML = "<span>Zone: "+num+"</span> ";
var b = x.insertCell(1);
b.innerHTML = "<input type='text' name='motor_ref_point' size='18' value='' />";
var c = x.insertCell(2);
c.innerHTML = "<button class='button lastChild' onclick='removeZone(this)' ><img src='themes/default/images/id-ff-clear.png'></button>";
}
count();
}
}
function removeZone(rows) {
var _row = rows.parentElement.parentElement;
document.getElementById('zoneItems').deleteRow(_row.rowIndex);
count();
}
function count(){
var table = document.getElementById("zoneItems");
var tbody = table.tBodies[0];
row_count = tbody.rows.length - 1;
for (var i = 0, row; row = tbody.rows[i]; i++) {
if(i != 0){
for (var j = 0, col; col = row.cells[j]; j++) {
if(j == 0){
col.innerHTML = "<span>Zone: "+i+"</span> ";
}
}
}
}
}