Develop Reference

how to validate on form repeater jquery

i have form repeater ,and i need to validate specific field before submit.
here's my code
<div class="col-lg-2" style="margin:0px 5%">
<div class="form-group">
<label for="amount_split">Amount</label>
<input tclass="form-control split-amount{{ $index }}"
name="split_amount" type="number" id="amount_split">
</div>
</div>
the form is inside table , so it keep repeated for every row.
i need whenever any field add cannot submit the form before the
addition of all this field is equal some number .
i have tried this
#section('custom_script')
<script>
var iteration = 0;
var amount = 0;
function buttonClicked(ind){
iteration++;
setTimeout(function(){
console.log(ind);
console.log($(".split-amount"+ind));
var arr=[];
for (var index = 0; index <= iteration; index++) {
// console.log(index);
arr.push($("input[name='moves["+index+"][split_amount]']"));
arr.forEach(function(e){
$(e).bind('change',function(){
// ele.value = 23;
// console.log(e[0]);
amount += e[0].value;
if(amount <= 10){
// console.log('yes');
}else{
// console.log('nooo');
}
});
});
}
},100);
}
</script>
#endsection

here's my answer for this problem
function ind(i){
$(document).ready(function(){
var el = $(".splite"+i).change(function(){
var amo = 0;
for(var it = 0;it< el.length;it++){
amo += parseFloat(el[it].value);
}
console.log(amo);
var am = $("#total"+i);
am = parseFloat(am[0].value);
if(amo == am){
$("#sub"+i).removeAttr('disabled');
}else{
$("#sub"+i).attr('disabled',true);
}
$("#split_amount_p"+i).html(amo);
$("#orignal_amount_p"+i).html(am);
if((am - amo) == 0){
$("#difference_amount_p"+i).html(0).css('color','green');
}else{
$("#difference_amount_p"+i).html(am - amo).css('color','red');
}
// console.log(am);
});
});
}
function addButton(index){
ind(index);
}
function removeButton(index)
{
setTimeout(function(){
ind(index);
},500);
}
</script>

how to change the css of the parent div in javascript not jquery

I want to change the CSS of a parent div if I click the child of its parent div, not, for example if I click href tag. I want to change the CSS of its class="changed_area".
How can I do this?
var up_btn = document.getElementsByClassName('up_btn');
var up_btn_length = up_btn.length;
var changed_area = document.getElementsByClassName('changed_area');
var changed_area_length = changed_area.length;
for (var i = 0; i < up_btn_length; i++) {
up_btn[i].addEventListener('click', function() {
//alert('welcome');
for (var i = 0; i < changed_area_length; i++) {
if (changed_area[i].style.top == '-100%') {
changed_area[i].style.top = '0%';
}
else {
changed_area[i].style.top = '-100%';
}
}
});
}
<?php foreach($questions As $question): ?>
<div class="changed_area" style="width: 100px;">
<div class="inside_ajax_part1">
<div id="inside_left">
<img src="<?php echo $Filter_customer->image; ?>" />
</div>
<div id="inside_right">
<a class="up_btn" href="#">Up</a>
</div>
</div>
<div class="inside_ajax_part2">
<p>mohammed</p>
</div>
</div>
<?php endforeach; ?>

I think you can do something like this : https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
EDIT : better way to do this
for (var i = 0; i < up_btn_length; i++) {
up_btn[i].addEventListener('click', function(){
var changed_area = up_btn[i].parentElement;
if ( changed_area.classList.contains('changed_area') ) {
changed_area.classList.remove('changed_area')
}
else {
changed_area.classList.add('changed_area')
}
if(changed_area.style.top == '-100%') {
changed_area.style.top = '0%';
}
else {
changed_area.style.top = '-100%';
}
});
}

Just add event listener on parent and use currentTarget
const parent = document.getElementsByClassName('changed_area');// select parent
for (var i = 0; i < parent.length; i++) {
parent[i].addEventListener('click', (ev) => ev.currentTarget.className = 'clicked');
}
Here is fiddle for it

Your code affects all of your divs with class "changed_area", That I don't think it is what you intend.
To access a parent element with javascript you can use parentElement. To get the parent of parent of parent.... that meets some condition (like having a class) you can do this:
function Get_changed_area(targetElement){
var parent = targetElement.parentElement;
if(parent.hasClass('changed_area'))
return parent;
else Get_changed_area(parent) //repeat the function for parent
}
for (var i = 0; i < up_btn_length; i++) {
up_btn[i].addEventListener('click', function() {
changed_area = Get_changed_area(up_btn[i]);
if (changed_area.style.top == '-100%') {
changed_area.style.top = '0%';
}
else {
changed_area.style.top = '-100%';
}
}
}

append images from DB into a div in jQuery

I am trying to show images of a particular holiday package from my DB into a slider using jQuery append. My slider is inside a modal and this modal is shown from javascript function. But I am only getting one image into the slide show. I am using while loop to iterate the image array and it is added to the div using innerhtml. I don't know where I am going. Can anyone please help me?
Here is my code:
js
function showDetailsModal(id) {
$.post('uae-holidaydetails.php',{uaeid:""+id+""},function(data){
data = jQuery.parseJSON(data);
var datadet= data[0];
if(data[1]) {
var dataimg= data[1];
var imgarray=[];
for (index = 0; index < dataimg.length; index++) {
imgarray.push(dataimg[index].image);
}
var i=0;
while(imgarray[i]){
document.getElementById("detail-banner").innerHTML='<div class="item"><img src="../sysimages/origimages/'+imgarray[i]+'" alt=""></div>'; //here I am creating the div for slider
i++;
}
}
document.getElementById("uaetitle").innerHTML= datadet.title;
document.getElementById("subtitle").innerHTML= datadet.subtitle;
$('#holiday-details').modal('show'); //modal is shown
});
}
php
<?php
include_once("index.class.php");
$objScr = new INDEX();
if(isset($_POST['uaeid'])) {
$uaeid=$_POST['uaeid'];
$rslthlydata = $objScr->getUaedata($uaeid); //get holiday details
$rowuaedetails = $rslthlydata->fetchAssoc();
$resultimages= $objScr->getUaeholyImages($uaeid); //get images
while($resultimg=$resultimages->fetchAssoc()) {
$dataimg[]=$resultimg;
}
echo json_encode(array($rowuaedetails,$dataimg)) ;
}
html
<div class="modal fade" id="holiday-details" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">CLOSE <img src="images/close-btn.png" alt=""></button>
<div class="modal-body">
<!--<section class="banner detailed"></section> -->
<div class="owl-carousel owl-theme" id="detail-banner" >
//this is the slider
</div>
<div class="details">
<h3 class="top-line" id="uaetitle"></h3>
<h4 id="subtitle"></h4>
</div>
</div>
</div>
</div>
</div>
Edit 1
I tried append also. When I append I am getting the whole images but it's not shown as slider
$('#detail-banner').append('<div class="item"><img src="../sysimages/origimages/'+imgarray[i]+'" alt=""></div>');

Try this, no need to mix pure JS and jQuery. Pick one and stick to it ;)
jQuery(document).ready(function($){
function showDetailsModal(id) {
$.post('uae-holidaydetails.php', {uaeid: id }, function(data) {
var data = JSON.parse(data);
var dataDet = data[0];
if(data[1]) {
var dataImg = data[1];
var imgArray = [];
for (var index = 0; index < dataImg.length; index++) {
imgArray.push(dataImg[index].image);
}
var items = "";
for (var j = 0; j < imgArray.length; i++) {
items += '<div class="item"><img src="../sysimages/origimages/'+imgArray[j]+'" alt=""></div>';
}
$('#detail-banner').append(items);
}
$('#uaetitle').append(dataDet.title);
$('#subtitle').append(dataDet.subtitle);
$('#holiday-details').modal('show'); //modal is shown
});
}
});

You have to concat your image array data using + to create all images.You have to use innerHTML += to avoid replacing the content of a node Like following.
function showDetailsModal(id) {
$.post('uae-holidaydetails.php',{uaeid:""+id+""},function(data){
data = jQuery.parseJSON(data);
var datadet= data[0];
if(data[1]) {
var dataimg= data[1];
var imgarray=[];
for (index = 0; index < dataimg.length; index++) {
imgarray.push(dataimg[index].image);
}
var i=0;
var imageContent = "";
for (var j = 0; j < imgArray.length; i++) {
imageContent +='<div class="item"><img src="../sysimages/origimages/'+imgarray[j]+'" alt=""></div>'; //here I am creating the div for slider
}
}
document.getElementById("detail-banner").innerHTML = imageContent;
document.getElementById("uaetitle").innerHTML= datadet.title;
document.getElementById("subtitle").innerHTML= datadet.subtitle;
$('#holiday-details').modal('show'); //modal is shown
});
}
For example let's consider the following scenario:
var array = [1,2,3,4];
for(var i=1;i<=array.length;i++){
document.getElementById("test1").innerHTML = i+" ";
}
for(var j=1;j<=array.length;j++){
document.getElementById("test2").innerHTML += j+" ";
}
<div id="test1"></div>
<div id="test2"></div>

Loop through div children and bold specific text not working

I have a suggestion dropdown under an input field and I am trying to make the text in the suggestion divs bold for the portion that matches what is currently in the input field.
e.g
input: AB
dropdown: ABCDE
My current code doesn't seem to be replacing the div content with the span
JS:
BoldMatchedText(inputToMatch:string){
var outerDiv = document.getElementById("dropdown");
if(outerDiv != null){
var subDiv = outerDiv.getElementsByTagName("div");
for (var i = 0; i < subDiv.length; i++){
subDiv[i].innerHTML.replace(inputToMatch, "<span id=\"strong\">" + inputToMatch + "</span>");
}
}
}
html:
<form>
<input type="text" id="dropdown-input">
<div id="dropdown">
<div class="reg-list-item">{{reg1}}</div>
<div class="reg-list-item">{{reg2}}</div>
<div class="reg-list-item">{{reg3}}</div>
<div class="reg-list-item">{{reg4}}</div>
</div>
</form>

You need to assign the result of calling the function replace.
subDiv[i].innerHTML = subDiv[i].innerHTML.replace(inputToMatch, "<span id=\"strong\">" + inputToMatch + "</span>");
function BoldMatchedText(inputToMatch) {
var outerDiv = document.getElementById("dropdown");
if (outerDiv != null) {
var subDiv = outerDiv.getElementsByTagName("div");
for (var i = 0; i < subDiv.length; i++) {
subDiv[i].innerHTML = subDiv[i].innerHTML.replace(inputToMatch, "<span id=\"strong\">" + inputToMatch + "</span>");
}
}
}
BoldMatchedText('Go');
#strong {
font-weight: 700
}
<form>
<input type="text" id="dropdown-input">
<div id="dropdown">
<div class="reg-list-item">Ele</div>
<div class="reg-list-item">Gomez</div>
<div class="reg-list-item">Rod</div>
<div class="reg-list-item">Enr</div>
</div>
</form>

Try this working sample with a benchmark. Compared with the previous answer.
function BoldMatchedText1(inputToMatch) {
var outerDiv = document.getElementById("dropdown");
if (outerDiv != null) {
var subDiv = outerDiv.getElementsByTagName("div");
for (var i = 0; i < subDiv.length; i++) {
subDiv[i].innerHTML = subDiv[i].innerHTML.replace(inputToMatch, "<span id=\"strong\">" + inputToMatch + "</span>");
}
}
}
function BoldMatchedText2(inputToMatch) {
var outerDiv = document.getElementById("dropdown");
if(outerDiv !== null) {
// Use `getElementsByClassName` instead using `getElementsByTagName('div')` JS will traverse your entire HTML file and look for all div tags, may take a little longer if you have a lot
var items = outerDiv.getElementsByClassName("reg-list-item");
// Getting the iteration length before the loop will give you performance benefit since items.length will not be checked per iteration
var len = items.length;
// Using while loop evaluating only if len is any positive number (true) except 0 (false) with reverse iteration making it faster
while(len--) {
var item = items[len].innerHTML;
// ONLY replace the text that contains the `inputToMatch`
if(item.indexOf(inputToMatch) !== -1) {
items[len].innerHTML = item.replace(inputToMatch, "<span id=\"strong\">" + inputToMatch + "</span>");
}
}
}
}
console.time('filter1');
BoldMatchedText1('Gom');
console.timeEnd('filter1');
console.time('filter2');
BoldMatchedText2('Gom');
console.timeEnd('filter2');
#strong {
font-weight: 700
}
<form>
<input type="text" id="dropdown-input">
<div id="dropdown">
<div class="reg-list-item">Ele</div>
<div class="reg-list-item">Gomez</div>
<div class="reg-list-item">Rod</div>
<div class="reg-list-item">Enr</div>
</div>
</form>

How can I refresh second select option when first select option is changed?

How can I refresh second select option when first select option is changed?
I am generating the array here for patient_code2:
//GENERATE NUMBERS FOR CYCLE
function patsient(selector) {
var i;
for (i = 1; i <= 99; i++) {
var text = '0' + i;
selector.options[i - 1] = new Option(text.substr(text.length - 2, 2));
}
}
patsient(document.getElementById("patient_code2"));
I am generating the array for patient_code here:
function myFunction(selector) {
var i;
for (i = 1; i <= 999; i++) {
var text = '00' + i;
selector.options[i - 1] = new Option(text.substr(text.length - 3, 3));
}
}
//usage:
myFunction(document.getElementById("patient_code"));
Here I am inserting the last value from database to the field:
//INSERT THE VALUE FROM DATABASE
var tsykkel_id = '<?php foreach ($tsykkel_id as $row){echo $row['patsiendi_tsykkel'];}?>';
$('#patient_code2')[0].options[parseInt(tsykkel_id)].selected = true;
$(document).ready().on('change', '#patient_code2', function () {
var index = $('option:selected', $(this)).index();
$('option', $(this)).each(function (i, x) {
if (i < index) { $(this).remove(); }
});
});
HTML
<select name="patient_code" data-placeholder="" id="patient_code" class="chosen-select form-control" tabindex="2">
</select>
<label class="control-label">Tsükkel:</label>
<select name="patient_code2" data-placeholder="" id="patient_code2" class="chosen-select form-control" tabindex="2">
</select>
So lets say that person chooses 002 from the first then the second should start from 01 again.

try this then. Code is tested.
$(document).ready().on('change','#patient_code2',function(){
var index = $('option:selected',$(this)).index();
$('option',$(this)).each(function(i,x){
if(i<index){$(this).remove();}
});
$('select#patient_code').prop('selectedIndex', 0);
});
fiddle : http://jsfiddle.net/roullie666/69j94ro6/2/

You can just start printing after the match has been found. I am writing both ways since you asked?
For javascript version use roullie's no point duplicating.
<?php
$flag = false;
foreach ($tsykkel_id as $row) {
if ($selected) {
$flag = true;
}
if ($flag) {
$row['patsiendi_tsykkel'];
}
}?>