We Keep Coding

Have two variables in one foreach bad insert

Hello i have a trouble with my code.
I have HTML with JS:
$(document).ready(function () {
// allowed maximum input fields
var max_input = 5;
// initialize the counter for textbox
var x = 1;
// handle click event on Add More button
$('.add-btn').click(function (e) {
e.preventDefault();
if (x < max_input) { // validate the condition
x++; // increment the counter
$('.wrapper').append(`
<div class="input-box">
<input type="text" name="input_name[]"/>
<input type="text" name="input_price[]">
Remove
</div>
`); // add input field
}
});
// handle click event of the remove link
$('.wrapper').on("click", ".remove-lnk", function (e) {
e.preventDefault();
$(this).parent('div').remove(); // remove input field
x--; // decrement the counter
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="input-box">
<input type="text" name="input_name[]">
<input type="text" name="input_price[]">
<button class="btn add-btn">+</button>
</div>
</div>
and i need insert in DB all inputs (name and price)
Now if i trying insert only first line.
php script:
This is a function and $id_produkt is GET from url.
if (isset($_POST["input_name"]) && is_array($_POST["input_name"])){
$input_name = $_POST["input_name"];
$input_price = $_POST["input_price"];
foreach (array_combine($input_name, $input_price) as $field_name => $field_price){
$sql = "INSERT INTO variant_product ( id_product, name, price ) VALUES(?,?,?)";
$data = array("isi", $id_produkt, $field_name, $field_price);
$result = db_query($sql, $data);
return $result;
}
}
Can help me please ? I am tired

I make function like that and working.
function insertVariantsProduct($id_produkt){
$userData = count($_POST["input_name"]);
if ($userData > 0) {
for ($i=0; $i < $userData; $i++) {
if (trim($_POST['input_name'] != '') && trim($_POST['input_price'] != '')) {
$var_id = $_POST["input_id"][$i];
$name = $_POST["input_name"][$i];
$price = $_POST["input_price"][$i];
if(empty($var_id) && !isset($var_id)){
$sql = "INSERT INTO variant_product ( id_product, name, price ) VALUES(?,?,?)";
$data = array("isi", $id_produkt, $name, $price);
}else {
$sql = "UPDATE variant_product SET name='$name',price='$price' WHERE id='$var_id' ";
$data = null;
}
$result = db_query($sql, $data);
}
}
return $result; // This should be out of loop because it's will break the loop
}
}

How to add dot navigation to slider

I have a working slider that I would like to add dot navigation to. However I'm not quite sure how I can pull it off. I've tried to add my own jQuery to the code, but it just breaks the slider. Does anyone have a suggestion on how to add dot navigation to the bottom of this slider?
(function () {
function init(item) {
var items = item.querySelectorAll("li"),
current = 0,
autoUpdate = true,
timeTrans = 400000000;
//create nav
var nav = document.createElement("nav");
// nav.className = "nav_arrows";
//create button prev
var prevbtn = document.createElement("button");
prevbtn.className = "fp_go_prev_slide";
prevbtn.setAttribute("aria-label", "Prev");
//create button next
var nextbtn = document.createElement("button");
nextbtn.className = "fp_go_next_slide";
nextbtn.setAttribute("aria-label", "Next");
if (items.length > 1) {
nav.appendChild(prevbtn);
nav.appendChild(nextbtn);
item.appendChild(nav);
}
items[current].className = "current_slide";
if (items.length > 1) items[items.length - 1].className = "prev_slide";
if (items.length > 1) items[current + 1].className = "next_slide";
rightClick();
var navigate = function (dir) {
items[current].className = "current_slide";
if (dir === "right") {
current = current < items.length - 1 ? current + 1 : 0;
} else if (dir === "left") {
current = current > 0 ? current - 1 : items.length - 1;
} else {
current = current > 0 ? current - 1 : items.length - 1;
}
var nextCurrent = current < items.length - 1 ? current + 1 : 0,
prevCurrent = current > 0 ? current - 1 : items.length - 1;
items[current].className = "current_slide";
items[prevCurrent].className = "prev_slide";
items[nextCurrent].className = "next_slide";
if (dir === "right") {
rightClick();
}
if (dir === "left") {
leftClick();
}
};
item.addEventListener("mouseenter", function () {
autoUpdate = false;
});
item.addEventListener("mouseleave", function () {
rightClick();
autoUpdate = true;
});
setInterval(function () {
if (autoUpdate) navigate("right");
}, timeTrans);
prevbtn.addEventListener("click", function () {
navigate("left");
});
nextbtn.addEventListener("click", function () {
navigate("right");
});
function rightClick() {
var n = document.getElementsByClassName("next_slide");
var c = document.getElementsByClassName("current_slide");
var p = document.getElementsByClassName("prev_slide");
}
function leftClick() {
var n = document.getElementsByClassName("next_slide");
var c = document.getElementsByClassName("current_slide");
var p = document.getElementsByClassName("prev_slide");
}
}
[].slice
.call(document.querySelectorAll(".fp_slider_container_top_main"))
.forEach(function (item) {
init(item);
});
})();
And here's the html
<section class="featured-project-slider">
<div class="row fp-top-slider">
<div class="col-lg-8 fp-front-left">
<h1 class="fp-header extended-black-l">Featured Projects</h1>
</div>
<div class="col-lg-4 fp-front-right">
<button class="top-right-button extended-black-s">See all projects ></button>
</div>
<div class="col-lg-10 offset-lg-1 col-12 fp-center">
<!-- // * Slider starts -->
<section class="fp_slider_container_top_main">
<!-- all slides container starts -->
<ul class="fp_slider_container_top">
<?php $loop = new WP_Query(array('post_type' => 'project', 'cat' => '4', 'orderby' => 'ID', 'order' => 'ASC' )); ?>
<?php while ($loop->have_posts()): $loop->the_post(); ?>
<!-- slide starts -->
<li>
<div class="fp_slider_container_top_img_container">
<img src="<?php the_field('top_image'); ?>" alt="slider image" class="fp_slider_container_top_img"
loading="lazy">
<div class="fp-project-box">
<p class="fp-small extended-black-s">Our History</p>
<h1 class="condensed-semibold-l"><?php echo the_title(); ?></h1>
<p class="regular-m"><?php the_field('short_description'); ?></p>
<button class="extended-black-s">Learn More ></button>
</div>
</div>
</li>
<!-- slide ends -->
<?php endwhile;
wp_reset_query(); ?>
<?php
?>
</ul>
<!-- all slides container ends -->
</section>
<!-- // * Slider ends -->
</div>
<div class="col-lg-6 offset-lg-6 col-12 fp-front-right-red">
<div>
</div>
</section>

Submit span content to a database

Just for fun, I'm trying to build a simple time tracker; the page grabs a stored duration from a database, and you can then add more time to that value, and then store it back to the database.
The value is displayed in h:i:s format, but there's also a hidden span with the same time but just in seconds.
My problem:
I cannot figure out how to submit the contents of the span to the database.
If I instead put the hidden span contents inside a form input, then the content doesn't change; it just submits the original value back to the database.
I really feel like I'm making a bit of a meal out of this.
Here's the current code...
<?php
/*
DROP TABLE IF EXISTS my_table;
CREATE TABLE my_table (t TIME NOT NULL DEFAULT 0);
INSERT INTO my_table VALUES ('00:01:50');
*/
require('path/to/connection/stateme.nts');
//wip - for later - and remember to remove the injection!!!
if(sizeof($_POST) != 0){
$query = "UPDATE my_table SET t=SEC_TO_TIME({$_GET['tts']}) LIMIT 1";
$pdo->query($query);
}
//Grab the stored value from the database
$query = "
select t
, time_to_sec(t) tts
, LPAD(HOUR(t),2,0) h
, LPAD(MINUTE(t),2,0) i
, LPAD(SECOND(t),2,0) s
from my_table
limit 1
";
if ($data = $pdo->query($query)->fetch()) {
$t = $data['t'];
$tts = $data['tts'];
$h = $data['h'];
$i = $data['i'];
$s = $data['s'];
} else {
$t = 0;
$tts = 0;
$h = '00';
$i = '00';
$s = '00';
}
?>
#relevant code starts here, I guess
<div>
<div>
<span hidden id="tts"><?php echo $tts; ?></span>
<span id="hour"><?php echo $h; ?></span>:
<span id="min"><?php echo $i; ?></span>:
<span id="sec"><?php echo $s; ?></span>
<input id="startButton" type="button" value="Start/Resume">
<input id="pauseButton" type="button" value="Pause">
<button id="submit" onclick="myFunction()" >Save</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var Clock = {
totalSeconds: <?php echo $tts ?>,
start: function () {
if (!this.interval) {
var self = this;
function pad(val) { return val > 9 ? val : "0" + val; }
this.interval = setInterval(function () {
self.totalSeconds += 1;
$("#hour").text(pad(Math.floor(self.totalSeconds / 3600 % 60)));
$("#min").text(pad(Math.floor(self.totalSeconds / 60 % 60)));
$("#sec").text(pad(parseInt(self.totalSeconds % 60)));
$("#tts").text(pad(parseInt(self.totalSeconds)));
}, 1000);
}
},
pause: function () {
clearInterval(this.interval);
delete this.interval;
},
resume: function () {
this.start();
}
};
$('#startButton').click(function () { Clock.start(); });
$('#pauseButton').click(function () { Clock.pause(); });
</script>
<script>
function myFunction() {
document.querySelectorAll('div').forEach(div => {
div.querySelectorAll('span')
.forEach(span => console.log(span.textContent));
});
}
</script>

With CBroe's useful hint, the following works... although my attempts at preparing and binding $_GET are failing at the moment, so the query itself remains insecure...
<?php
/*
DROP TABLE IF EXISTS my_table;
CREATE TABLE my_table (t TIME NOT NULL DEFAULT 0);
INSERT INTO my_table VALUES ('00:01:50');
*/
require('path/to/connection/stateme.nts');
if(sizeof($_GET) != 0){
$query = "UPDATE my_table SET t = SEC_TO_TIME({$_GET['tts']}) LIMIT 1";
$stmt = $pdo->prepare($query);
$stmt->execute();
}
//Grab the stored value from the database
$query = "
select t
, time_to_sec(t) tts
, LPAD(HOUR(t),2,0) h
, LPAD(MINUTE(t),2,0) i
, LPAD(SECOND(t),2,0) s
from my_table
limit 1
";
if ($data = $pdo->query($query)->fetch()) {
$t = $data['t'];
$tts = $data['tts'];
$h = $data['h'];
$i = $data['i'];
$s = $data['s'];
} else {
$t = 0;
$tts = 0;
$h = '00';
$i = '00';
$s = '00';
}
?>
#relevant code starts here, I guess
<form id="myForm">
<input name="tts" type= "hidden" id="tts" value="tts">
<span id="hour"><?php echo $h; ?></span>:
<span id="min"><?php echo $i; ?></span>:
<span id="sec"><?php echo $s; ?></span>
<input id="startButton" type="button" value="Start/Resume">
<input id="pauseButton" type="button" value="Pause">
<button id="submit" onclick="myFunction()" >Save</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var Clock = {
totalSeconds: <?php echo $tts ?>,
start: function () {
if (!this.interval) {
var self = this;
function pad(val) { return val > 9 ? val : "0" + val; }
this.interval = setInterval(function () {
self.totalSeconds += 1;
$("#hour").text(pad(Math.floor(self.totalSeconds / 3600 % 60)));
$("#min").text(pad(Math.floor(self.totalSeconds / 60 % 60)));
$("#sec").text(pad(parseInt(self.totalSeconds % 60)));
$("#tts").val(pad(parseInt(self.totalSeconds)));
}, 1000);
}
},
pause: function () {
clearInterval(this.interval);
delete this.interval;
},
resume: function () {
this.start();
}
};
$('#startButton').click(function () { Clock.start(); });
$('#pauseButton').click(function () { Clock.pause(); });
</script>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
}
</script>

form dropdown required codeigniter

i have code like this
<div class="col-sm-9">
<?php $attributes = 'class = "form-control" id = "actype"';
echo form_dropdown('actype',$actype,set_value('actype',$detail[0]>activity_type),$attributes);?>
</div>
my model:
function get_actype()
{
$type_id = array('-SELECT-');
$type_name = array('-SELECT-');
for ($i = 0; $i < count($result); $i++)
{
array_push($type_id, $result[$i]->activity_type_id);
array_push($type_name, $result[$i]->activity_type_name);
}
return $actype_result = array_combine($type_id, $type_name);
}
how to create validate dropdown required

how to operate checkboxes with all conditions in jquery

I want a jquery condition which will handle the following scenarios -
1) Some of the checkboxes selected
2) All of the checkboxes selected
I want them both in a single loop. Currently, I've the following code to select all checkboxes only -
$('.check-all').click(function() {
var selector = $(this).is(':checked') ? ':not(:checked)' : ':checked';
var ids = [];
$('#chkall input[type="checkbox"]' + selector).each(function() {
$(this).trigger('click');
ids.push($(this).attr('value'));
});
var id = [];
id = JSON.stringify(ids);
document.cookie = "ids="+id;
});
And taking checkboxes in my PHP code as -
echo '<ul class="list-unstyled" id="chkall">';
foreach ($contacts as $contact) {
echo '<li>
<div class="checkbox" id="checkboxes">
<label><input type="checkbox" class="case" name="case" value="'.$contact['cust_id'].'" id="'.$contact['cust_id'].'">'.$contact['cust_fname'].' '.$contact['cust_lname'].'</label>
</div>
</li>';
}
So, how should I handle both scenarios in a single loop ? I've send a cookie when checking is done.

I found a solution & now doing this in a following way -
PHP Code -
echo '<ul class="list-unstyled" id="chkall">';
foreach ($contacts as $contact) {
echo '<li>
<div class="checkbox" id="checkboxes" onclick="getID('.$contact['cust_id'].')">
<label><input type="checkbox" class="check-all" name="case" value="'.$contact['cust_id'].'" id="'.$contact['cust_id'].'">'.$contact['cust_fname'].' '.$contact['cust_lname'].'</label>
</div>
</li>';
}
<div class="checkbox" onclick="getID('0')">
<?= Html::checkbox(null, false, [
'id' => 'selectall',
'label' => 'Select all',
'class' => 'check-all',
]);?>
</div>
</div>
And the respective script is -
var ids = [];
function getID(id) {
var checkboxlist = document.getElementsByName('case');
var itr = 0, checkedFlag = 0, uncheckedFlag = 0;
var inputElements = document.getElementsByClassName('check-all');
if (id == 0) {
$(".check-all").prop("checked", $("#selectall").prop("checked"))
}
else {
for (var i = 0; inputElements[i]; ++i) {
if (inputElements[i].value == id) {
if (inputElements[i].checked == true) {
inputElements[i].checked = false;
break;
}
else {
inputElements[i].checked = true;
break;
}
}
}
while (itr < checkboxlist.length) {
if (checkboxlist[itr].checked == true) {
checkedFlag++;
}
else {
$("#selectall").prop("indeterminate", true);
uncheckedFlag++;
}
itr++;
}
if (checkedFlag == checkboxlist.length) {
$("#selectall").prop("indeterminate", false);
$("#selectall").prop("checked", true);
}
if (uncheckedFlag == checkboxlist.length) {
$("#selectall").prop("indeterminate", false);
$("#selectall").prop("checked", false);
}
}
}
That's it !!!