Develop Reference

When I click on a button, I want to show an element only if another element contains a specific text

So as an example, when I click on the button (class="button"), it will show class="test2" if class="test1" contains the text "Select".
<input class="button" type="button" value="Button"></input>
<div class="test1">Select</div>
<div class="test2">12345</></div>

<div class="test1">Select</div>
<div class="test2" hidden>12345</div>
<div class="test1">Select</div>
<div class="test2" hidden>54321</div>
<div class="test1">hide</div>
<div class="test2" hidden>67890</div>
<input class="button" type="button" value="Button"></input>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$('.button').on('click',function(){
$.each($('.test1'), function(key, value){
var tdValue = $(value).text();
console.log(value, key);
if (tdValue == 'Select'){
$(value).next('.test2').show();
$(value).hide();
}else{
$(value).next('.test2').hide();
$(value).hide();
}
});
});
</script>

<div class="test1">Select</div>
<div class="test2" hidden>12345</div>
<input class="button" type="button" value="Button"></input>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$('.button').on('click',function(){
var tdValue = $('.test1').text();
if (tdValue === 'Select'){
$('.test2').show();
$('.test1').hide();
}else{
$('.test2').hide();
$('.test1').hide();
}
});
</script>

how to call a javascript function whenever an html code loads

function addMore() {
$("<div>").load("m_text.php", function() {
$("#product").append($(this).html());
});
}
the below html code with flate_rate function is in m_text.php
<div class="float-leftt"><input type="number" name="saleable_area[]" id="isalable_area[]" placeholder="Salable Area" /></div>
<div class="float-leftt"><input type="number" name="flat_rate[]" id="iflat_area[]" placeholder="Flat Rate"/ onkeyup="flat_rate()"></div>
<div class="float-leftt"><input type="number" name="flat_cost[]" id="iflat_cost[]" placeholder="Flat Cost"/></div>
<script type="text/javascript">
function flat_rate(){
var salable_area = document.getElementById("isalable_area[]");
var flat_area = document.getElementById("iflat_area[]");
var flat_cost=[];
var i=0;
flat_cost[0] = salable_area.value*flat_area.value;
alert( flat_cost[0]);
document.getElementById("iflat_cost[]").value=(flat_cost[0]);
}
</script>
add more code
<input type="button" id="add_button" name="add_item" value="Add More" style="width:15%;" onClick="addMore();"/>
this code works properly when the html code runs first time. when user click on add more button this html code loads again at that time the calaculated value doesnt appear in flat cost .
If i use class instead of id then it shows NaN in output.
please help me. thank you

According to your example code, you can try this:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
function addMore() {
$("#product").append($("div.block").html());
}
</script>
<div id="product">
<div class="block">
<div class="input">
<div class="float-leftt"><input type="number" name="saleable_area[]" id="isalable_area[]" placeholder="Salable Area" /></div>
<div class="float-leftt"><input type="number" name="flat_rate[]" id="iflat_area[]" placeholder="Flat Rate"/></div>
<div class="float-leftt"><input type="number" name="flat_cost[]" id="iflat_cost[]" placeholder="Flat Cost"/></div>
</div>
add more code
<input type="button" id="add_button" name="add_item" value="Add More" style="width:15%;" onClick="addMore();"/>
</div>
</div>
<script>
$("#product").on('keyup', "[name='flat_rate[]']", function(){
var salable_area = $(this).parents("div.input").find("[name='saleable_area[]']");
var flat_area = $(this);
var flat_cost=0;
flat_cost = salable_area.val()*flat_area.val();
alert( flat_cost);
$(this).parents("div.input").find("[name='flat_cost[]']").val(flat_cost);
});
</script>
If you want to load file, you can take <div class="block">...</div> block to your file, then modify the add-more function:
$.get( "m_text.php", function( data ) {
$("#product").append(data);
});

Updating a client side table

I am reading data from a csv file and showing it in the form of table on screen. I have checkbox before every row with 'ID' saved as value in respective checkboxes. Now I want to remove fields with 'checked' checkboxes from the displayed table on the click of button - Cancel/Save
HTML Code-
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
<title>ABCD</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src ="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"> </script>
<!--<script type="text/javascript" src="JavaScript.js"></script>-->
<script type="text/javascript" src="JavaScript2.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
th {
text-align: left;
}
table {
border-spacing: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<h2>EFGH</h2>
<p>KLMNO </p>
</div>
<div class="panel panel-primary">
<div class="panel-heading">KKKK</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-12 col-sm-offset-1">
<div class="page-header">
<h2>----</h2>
</div>
<form id="form1" runat="server" class="form-horizontal">
<div class="form-group">
<div class="col-sm-5">
<div class="col-sm-6"><input type="file" accept=".csv" id="fileUpload"/></div>
<div class="col-sm-6"><input type="button" id="upload" class="btn btn-primary" value="Upload" /></div>
</div>
<div class="col-sm-7">
<div class="col-sm-2"><input type="button" id="cancel" class="btn btn-primary btn pull-right" value="Cancel/Save" style="visibility:hidden" /></div>
<div class="col-sm-2"><input type="button" id="process" class="btn btn-primary btn pull-right" value="Process" style="visibility:hidden" /></div>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default" style="align-self:center">
<div class="panel-body" style="max-height: 400px;min-height:400px;overflow-y: scroll;">
<div class="row">
<div class="col-sm-12"><center>
<div class="input-append" id="filterDev" style="visibility:hidden">
<input name="search" id="search" placeholder="Enter PO to filter" />
<input type="button" value="Filter" id="filter" class="btn btn-primary" />
</div></center></div><br /><br />
</div>
<div class="row">
<div class="col-sm-12" id="dvCSV"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JavaScript2.js
$(function () {
$("#upload").bind("click", function () {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test($("#fileUpload").val().toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var table = $("<table />");
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) {
var row = $("<tr />");
var cells = rows[i].split(",");
$("<td/>").html('<input type="checkbox" id='+cells[0]+'>').appendTo(row);
//alert(cells[0]);
for (var j = 0; j < cells.length; j++) {
$("<td/>").html('<input type="text" disabled value=' +cells[j]+ '>').appendTo(row);
$("<td/>")
}
table.append(row);
}
$("#dvCSV").html('');
$("#dvCSV").append(table);
document.getElementById("cancel").style.visibility = "visible";
document.getElementById("process").style.visibility = "visible";
document.getElementById("filterDev").style.visibility = "visible";
//document.getElementById("filter").style.visibility = "visible";
}
reader.readAsText($("#fileUpload")[0].files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
});
});
How can this be implemented?

I assumed that you want to remove the row completely. Maybe you should clarify that a bit.
Add this script tag under your html file, or include it as a seperate js file. Tested, working.
<script type="text/javascript">
$("#cancel").on("click", function() {
$('input:checked').each( function() {
$( this ).closest("tr").remove();
});
});
</script>

To remove checked checkboxes you can use jQuery.
To remove just the checkboxes:
$('input').is(':checked').remove()
To do this "on a submit" of something, like a button click:
//Specific for button with ID someButton
$('button #someButton').on('click', function() {
$('input').is(':checked').remove();
});
Have a look at the jQuery checked selector, especially when combining it with the .is() function.
Like #Kartal answer, but without the .each() method you can delete all selected rows from the table like so:
//Remove all selected rows
$('button #someButton').on('click', function() {
$('tr > input:checked').remove();
});
The > selector is described here

JQuery Enlarge/Shrink Related Elements

var up_vote_button = $('.up-vote-button');
var down_vote_button = $('.down-vote-button');
$(up_vote_button).click(function(){
$(this).siblings('i').css('font-size', '16px');
$(this).parent().siblings('down-vote')
.find('i').css('font-size', '14px');
});
$(down_vote_button).click(function(){
$(this).siblings('i').css('font-size', '16px');
$(this).parent().siblings('up-vote')
.find('i').css('font-size', '14px');
});
<div class="votes-container">
<div class="up-vote">
<i></i>
<input class="up-vote-button" type="button" />
</div>
<div class="down-vote">
<i></i>
<input class="down-vote-button" type="button"/>
</div>
</div>
Why is this not toggling the font-sizes of related icons. The HTML has been added per the request in comment. Thanks!

You are missing . at .siblings() selector at each .click() handler
var up_vote_button = $('.up-vote-button');
var down_vote_button = $('.down-vote-button');
up_vote_button.click(function(){
$(this).siblings('i').css('font-size', '16px');
$(this).parent().siblings('.down-vote')
.find('i').css('font-size', '14px');
});
down_vote_button.click(function(){
$(this).siblings('i').css('font-size', '16px');
$(this).parent().siblings('.up-vote')
.find('i').css('font-size', '14px');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="votes-container">
<div class="up-vote">
<i>up</i>
<input class="up-vote-button" type="button" />
</div>
<div class="down-vote">
<i>down</i>
<input class="down-vote-button" type="button"/>
</div>
</div>

Disable input if checkbox checked

i want to disable inputs when a checbox is checked.
part of html:
<div class="span1 ">
<div class="control-group" id="niedziela">
<label class="control-label" for="">Niedziela</label>
<div class="controls">
<input type="text" value="<?= $metavalue->nightlife_open_7_start ?>" name="meta[nightlife_open_7_start]" id="nightlife_open_7_start" class="m-wrap span12 timepicker-24" placeholder="">
<input type="text" value="<?= $metavalue->nightlife_open_7_end ?>" name="meta[nightlife_open_7_end]" id="nightlife_open_7_end" class="m-wrap span12 timepicker-24" placeholder="">
<input id="klient_open_4_end" type="checkbox" <?=_ set_checked($metavalue->nightlife_open_7_end,'do ostatniego klienta') ?> value="do ostatniego klienta" name="meta[nightlife_open_7_end]" class="m-wrap span12 timepicker" placeholder=""> Do ost. klienta
<input id="zamkniete_open_4_end" type="checkbox" <?=_ set_checked($metavalue->nightlife_open_7_start,'zamkniete') ?> value="zamkniete" name="meta[nightlife_open_7_start]" class="m-wrap span12 timepicker" placeholder=""> Zamknięte
</div>
</div>
</div>
what i want is that if checkbox with id klient_open_4_end is checked it should disable input with id="nightlife_open_7_end"
if checkbox with id="zamkniete_open_4_end" is checked should disable both inputs text areas
i tried with :
<script type="text/javascript">
$(document).ready(function($) {
$('#klient_open_4_end').change(function() {
$(this).find("#nightlife_open_7_start").attr("disabled", true);
});
});
</script>

You'll need to listen to the click event of the checkboxes. Since you've tagged the question with jQuery too,
$(function(){
$('#klient_open_4_end').on('click', function(){
if($(this).is(':checked')){
$('#nightlife_open_7_start').attr('disabled', true);
} else {
$('#nightlife_open_7_start').attr('disabled', false);
}
});
$('#zamkniete_open_4_end').on('click', function(){
// assuming the textarea is inside <div class="controls /">
if($(this).is(':checked')){
$('.controls input:text, .controls textarea').attr('disabled', true);
} else {
$('.controls input:text, .controls textarea').attr('disabled', false);
}
});
});
Update
You can shorten this even more and use the following instead:
$(function(){
$('#klient_open_4_end').on('click', function(){
$('#nightlife_open_7_start').attr('disabled', $(this).is(':checked'));
});
$('#zamkniete_open_4_end').on('click', function(){
// assuming the textarea is inside <div class="controls /">
$('.controls input:text, .controls textarea').attr('disabled', $(this).is(':checked'));
});
});

This is fairly simple, you can do it like this
$(document).ready(function () {
$('#klient_open_4_end').click(function () {
$('#nightlife_open_7_start').prop('disabled', function(i, v) { return !v; });
});
});
But from your snippet I'm assuming you want to run something when the page loads to disable the input as well, you can do that the same way essentially.

You can achieve this as
$('#chk').change(function(){
if($(this).is(':checked'))
$('#inp1').prop('disabled','disabled')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' id='inp1' />
<input type='text' id='inp2' />
<input type='checkbox' id='chk' />

checkout this simple code
<html>
<body>
<input type="checkbox" id="klient_open_4_end" name="klient_open_4_end"/>
<input type="text" id="nightlife_open_7_end" name="nightlife_open_7_end"/>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#klient_open_4_end").change(function(){
if($(this).prop("checked")){
$("#nightlife_open_7_end").prop("disabled",true);
}
else{
$("#nightlife_open_7_end").prop("disabled",false);
}
});
});
</script>
</html>
In above code
$("#nightlife_open_7_end").prop("disabled",true/false);
you may use
$('#nightlife_open_7_end').attr('disabled', true/false);

It is for onclick disable and enable
<!DOCTYPE html>
<html>
<body>
Checkbox: <input type="checkbox" id="myCheck">
<button onclick="check()">Check Checkbox</button>
<button onclick="uncheck()">Uncheck Checkbox</button>
<script type="text/javascript">
function check() {
if(document.getElementById("myCheck").checked == true)
{
document.getElementById("input").disabled = true;
}
else{
document.getElementById("input").disabled = false;
}
}
</script>
</body>
</html>