How to get class array index for getElemetByClass name in JavaScript - javascript

everyone. I'm still new using JavaScript, I need your help to fix my problem, I try to disable checkbox after submitted. Because my checkbox value is from DB and the data will show as long as the DB have it so I'm using class="select_DB[]" in my input tag. From my knowledge class is using array index so I want to disable the checkbox that I choose I have to get the array index of the class. So how I can get the array index of the checkbox ? Need you help
//this code for disable checkbox after submit need improve I don't know how to get array index of the class
function closeCB() {
document.getElementByClassName("select_DB").disabled = true;
}
<tbody>
<?php
include "db_connect.php";
$sql_select = $dt_bas->prepare("SELECT id_pegawai, nm_pegawai, tmp_lahir FROM pegawai");
$sql_select->execute();
while($row = $sql_select->fetch(PDO::FETCH_ASSOC)){
$id = $row["id_pegawai"]; // id
$nm = $row["nm_pegawai"]; // employe name
$tmp = $row["tmp_lahir"]; // birthday
?>
<tr>
<td><input type="checkbox" class="select_DB[]" class="select_DB[]" value=<?php echo"$id";?> <?=was_checked($id)?>/></td> <!-- This is the checkbox-->
<td><?php echo "$id";?></td>
<td><?php echo "$nm";?></td>
<td><?php echo "$tmp";?></td>
<td>
Ubah
Detail
</td>
</tr>
<?php } ?>

Related

How can I display first 3 values from a foreach loop and on click more display All the Values from the row

I am looping through a list of values and there are more than 22 values. I want to just show maximum 3 values and a click more button so it can display all the values as the user request.
I am a little bit confuse on how to do that.
This is what I did before which when you click on the plus it will show all the records and when you click on the minus it will hide all the records
Do we have to limit the number values on the sql query or is there a PHP way to show three records and then using Javascript to display all?
Help a sister out ^^
<table>
<thead>
<tr>
<th>Std Id</th>
<th>List of Names</th>
</tr>
</thead>
<tbody>
<?php
foreach ($Names as $key => $name): ?>
<tr>
<td><?= $key ?></td>
<td class="collapse-control collapse-plus">
<?php
$students = [];
foreach($name as $r){
if(!in_array($r->getStudent(), $students ))
$students []=$r->getStudent();
?>
<span class="form-names d-none"><?= $row->getName()?><br> </span>
<?php } ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Script
$(document).ready(function() {
$('.collapse-control').on('click', function(e) {
var $cell = $(this).toggleClass('collapse-plus collapse-minus');
$cell.find('.form-names').toggleClass('d-none');
});
});
You can show all the data in PHP using loop (like what you did). Now, you just need to add a condition inside the loop. Tell the loop to show the first three items without any style or class of display:none, then the rest will have a class or style. The idea is like this:
$counter = 0;
foreach($name as $r)){ // your loop here
if($counter < 3){ //show the first 3 items
echo "<span class='form-names'>".$row->getName()."</span>";
}else{ //show the rest items but hide it
echo "<span class='form-names' style='display:none'>".$row->getName()."</span>";
}
$counter++;//add a counter
}
Then you can now trigger a button, when clicked, it will show all .form-names. OR you can use your existing JQuery toggle function.
No need to use array_slice, you just add a counter variable to check if the item is greater than 3. The use of this is to show the first 3 items as normal (no style of display:none), but the rest items will loop with style of display:none so it will hide on the webpage (but it is already loaded in DOM).

deduplicates values in array with javascript before GET query

I have the following loop that list domains. Each line contains a checkbox with domain as value stored in array urls[] :
<form action="/profiles-routing/add/63" method="get">
...
<?php foreach ($accesslogs as $accesslog): ?>
<tr>
<td>
<input class="checkbox" type="checkbox" name="urls[]" value="<?= $accesslog->DOMAIN ?>">
</td>
<td><?= $accesslog->DOMAIN ?></td>
</tr>
<?php endforeach; ?>
...
</form>
I could have many same domains in the query, I looking how to deduplicate urls values with a javascript before doing the GET query.
For example, javascript should modify this :
http://127.0.0.1:8001/profiles-routing/add/63?urls[0]=www.domaine1.com&urls[1]=www.domaine1.com&urls[2]=www.domaine1.com&urls[3]=www.domaine2.com&urls[4]=www.domaine2.com
To this :
http://127.0.0.1:8001/profiles-routing/add/63?urls[0]=www.domaine1.com&urls[3]=www.domaine2.com
How can I do it ?
Thank you,
I came up with this code to help you out:
<?php
function arr_clearduplicates($arr) {
$newArray = array();
foreach($arr as $val) {
//If the value isn't in the array, push it in.
// This will make sure no existing data is added again.
if(!in_array($val, $newArray)) {
$newArray[] = $val;
}
}
return $newArray;
}
?>
This will basically register a function doing this:
Take whatever array you give it
Make a new empty array.
Take all values in your first array, if they are already in the new array, they will not be added, otherwise, they will.
Return the empty array.
Which means: array will have no values equal to each other.

PHP get input value without submit

Guys i have foreach loop where i list some prices. All price have own input radio button.
By default only one price from looping is checked. I want to get that value when page is lodaed.
I have one session where i store number of days. Based on these days I get the price of cars.
$numDays = $_SESSION['days']; // 5
$calculate_km = $numDays * 140; // 5*140km
So in page where i want to show total KM i use:
if(isset($_SESSION['days']) {
$numDays = $_SESSION['days'];
}else {
// Show default selected radio button value
}
Problem is bcs price list with radio is on the some page and there is no sumbiting
My loop:
<?php if($prices = getCarPricePeriod($car->ID, $od, $do)):?>
<?php $first = true; ?>
<?php foreach ($prices as $price): ?>
<tr>
<td><input type="radio" name="price" value="<?= $price['value'];?>" <?= $first ? 'checked' : '' ?>> </td>
<td><input type="text" name="price_name" value=" <?= $price['name'];?>">€/per day</td>
</tr>
<?php endforeach; ?>
<?php $first = false; ?>
<?php endif; ?>
Total KM : <span> <?= $numDays * 140 ;?> </span>
Only is posible to get that value if i submit that form. So i need js for this or any way to do this in php
I want to get that value when page is lodaed.
Use .ready() , selector $("tr input:checked") , .val()
$(document).ready(function() {
var val = $("tr input:checked").val()
})
If what you are asking is "how to send data from client-side to server-side", then the answer is AJAX.
Take a look at W3School's AJAX tutorial here: http://www.w3schools.com/ajax/
EDIT 1
for javascript, this should do it:
document.querySelector("input[type=radio]:checked").getAttribute("value")
Without submit, you need JavaScript to do that, like this:
<script>
var p = document.getElementByName("price");
</script>

How do I attach checkboxes to a submit

I have unknown amount of checkbox inputs on a page created based on rows in an sql database.
The checkboxes look like:
<input type="checkbox" class="deletefunc" value="<? echo $mid; ?>">
The checkboxes are intended, when checked and submitted, to delete a row from the database based on the value of $mid
The checkboxes could be either loose (not contained in any forms), or each could be contained in its own form (without a submit button). There is no way however to contain all the checkboxes in one form.
The reason is it's displayed in a loop with output like this:
<tr>
<td><input type="checkbox" class="deletefunc" value="<? echo $mid; ?>"></td>
<td><input type="checkbox" class="star" value="1"> <!-- jquery/ajax onclick function --></td>
<td><a href></td>
<td><form name....><input type="submit" value="something"></form></td>
<tr>
So what I need help understanding is, how to gather all the checkboxes based on classname, and attach them to a submit button....
And further, how would I write the loop function so it knows how many deletes to perform? What I mean is, how would I write a loop that would get the values from an unknown amount of inputs. Normally I know how many inputs there are and what the names are so its a matter of assigning a variable for each input.... I've never done this with an unknown amount of inputs.
I would do it like this:
HTML:
<input type="checkbox" class="deletefunc" value="<? echo $mid; ?>">
<button id="delete-them">Delete Them</button>
JS:
$(function() {
$('#delete-them').on('click', function() {
var data = $('.deletefunc').attr('name', 'delete[]').serialize();
$.ajax('delete-them.php', {
method: 'POST',
data: data,
success: function() {
alert('deleted!');
}
});
});
});
PHP:
<?php
$ids = $_POST['delete'];
$params = array_fill(0, count($ids), "?");
$sql = "DELETE FROM some_table WHERE id IN (" . implode(",", $params) . ")";
//DELETE FROM some_table WHERE id IN(?,?,?,?);
$pdo = new PDO('mysql:host=localhost;dbname=mydb', 'user', 'pass');
$stmt = $pdo->prepare($sql);
$stmt->execute($ids);
?>
So we basically listen for a click on our button, when it happens, we set the name (with [] at the end so it becomes an array) for all of the items with the class we care about, so that when we serialize those items we know how to reference it in our PHP.
We then POST that data over to the server, where we read the array we just sent, see how many there are, and then create a query to delete those items.

Clear input field value after javascript alert

I have a dynamic field that get value from database, and I want to check one of the field value if it was greater from the old value or not. If it does greater, i have to give an alert and reset field value back to ''
i want to do it without using document.GetElementById because the field was looped by foreach, I'm tryin to work with document.GetElementByName but got no where. here's my code
<?php foreach ($items->result_array() as $row){ ?>
<tr>
<td><p><?php echo $row['nmbr']; ?> </p>
<p><?php echo $row['urai']; ?><p> </td>
<td><?php echo $row['jml']?> </td>
<td><div class="oldprice"><?php echo $row['oldprice']?></div></td>
<td><input id="pnwrn" class="pnwrn" type="text" name="pnwrn[]" value="" data-harga="<?php echo $row['jml']?>" data-jumlah="<?php echo $row['oldprice']?>"/></td>
<td><div class="output"></div></td>
</tr>
<?php } ?>
and this is my javascript :
<script type="text/javascript">
$('.pnwrn').on('change', function () {
var twrn = $(this).val();
var price = parseInt($(this).data('harga'));
var jmlh = parseInt($(this).data('jumlah'));
if (twrn <= jmlh){
$(this).parents('tr').find('.output').html(twrn*price);
}
else {
alert("Price can not be greater from old price");
cleartext();
}
});
function clearInputs() {
document.getElementByName("pnwrn").value = "";
}
</script>
can someone help me?
You are not supposed to have multiple elements with the same id. Instead, try this:
<td><input id="pnwrn<?php echo $row['some_id_field_that_you_have']; ?>" class="pnwrn" type="text" name="pnwrn[<?php echo $row['some_id_field_that_you_have']; ?>]" value="" data-harga="<?php echo $row['jml']?>" data-jumlah="<?php echo $row['oldprice']?>"/></td>
You can also attach the matching ID on the <tr>, or to other elements, which makes it trivial to find the appropriate elements.
Unfortunately, with names like urai, harga, jumlah and pnwrn, it is extremely hard to pinpoint what exactly you're trying to do, thus just vague hints.
But - if you're trying to clear the very field you're checking, you already have it, so no lookup needs to be done. Just do clearInput(this).
Try this to loop through all the inputs and match on the class you want:
$("input").each(function (i) {
if ($(this).prop("class") === "pnwrn") {
$(this).val('');
}
});

Categories

Resources