Hi,
Because it is so complicated, I can not explain it very well.
For the TV system in collective house houses, instead of installing a satellite dish in each block, a TV signal distribution system with fiber optic cable to all blocks from there by installing only one point.
I created a block as seen in the picture above
With the Add New Block button, it provides the opportunity to add as many blocks as the number of blocks in the project.
Floars: Total number of floors in Block / Apartment
Flats: Total number of flats in Block / Apartment
Subscriber: Total number of subscribers in Block / Apartment.(If there are 20 flats in the apartment and 2 antenna cables are installed in each flat, then 20x2 = 40 subscribers.)
Shafts: A vertical void space used for running cables inside the apartment block
TV Panel: At what points does the antenna cable coming from the apartments are collected on the shaft
Cables If the number of cables differs between TV panels. Example: There are 4 TV Panels and if 20,20,20,20 is equal, only 20 should be entered.If it differs, like 15,20,25,20. The TV should enter as many as the number of panels.
Fiber Optic At least one fiber optic cable must be run on each shaft. If 2 shafts are selected, it is imperative to choose 2 Fiber Optic.
How should I do the checks here with JQUERY?
If Block A information is entered, other added blocks will refer to Block A.
New blocks were added by inheriting
Alphabets are added to the beginning of input names
<input type="text" name="A_xxxxxxx" id="A_xxxxxxx">
<input type="text" name="A_xxxxxxx" id="A_xxxxxxx">
<input type="text" name="A_xxxxxxx" id="A_xxxxxxx">
<input type="text" name="B_xxxxxxx" id="B_xxxxxxx">
<input type="text" name="B_xxxxxxx" id="B_xxxxxxx">
<input type="text" name="B_xxxxxxx" id="B_xxxxxxx">
continues as
Let me create a generic template first.
Then I will need your help in the php process.
<form action="" method="post">
<div class="container">
<div class="panel panel-primary">
<div class="panel-body">
<h5 class="text-on-pannel text-primary"><strong> PROJE BLOK MU VİLLA MI </strong></h5>
<table class="tablo table">
<tr>
<td>Blok: </td>
<td><input type="radio" name="villa_blok" value="villa"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Villa: </td>
<td style="padding-top: 10px;"><input type="radio" name="villa_blok" value="blok"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-body">
<h5 class="text-on-pannel text-primary"><strong> HEADEND BLOK / VİLLA NEREYE KURULACAK </strong></h5>
<table class="tablo table">
<tr>
<td>Harici alanda kurulacak: </td>
<td><input type="radio" name="headend_nereye" value="harici"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Blok / Villa birinde kurulacak: </td>
<td style="padding-top: 10px;"><input type="radio" name="headend_nereye" value="blok"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-body">
<h5 class="text-on-pannel text-primary"><strong> HEADEND KANAL ÖZELLİKLERİNİ BELİRLEYİN </strong></h5>
<table class="tablo table">
<tr>
<td>Analog yayın olacak ı? </td>
<td> Evet: </td>
<td> <input type="checkbox" name="analog" id="analog"></td>
<td> Kanal sayısı: </td>
<td>
<select size="1" name="analog_kanal_sayisi" class="form-control" id="analog_kanal_sayisi" style="width: 140px;" disabled="">
<option value="-1"> </option>
<option value="8">8 Kanal</option>
<option value="16">16 Kanal</option>
<option value="24">24 Kanal</option>
<option value="32">32 Kanal</option>
<option value="40">40 Kanal</option>
<option value="48">48 Kanal</option>
<option value="54">54 Kanal</option>
</select>
</td>
</tr>
<tr>
<td>Dijital yayın olacak mı? </td>
<td> Evet: </td>
<td> <input type="checkbox" name="dijital" id="dijital"></td>
<td> QAM Paket sayısı: </td>
<td style="padding-top: 10px;">
<select size="1" name="dijital_kanal_sayisi" class="form-control" id="dijital_kanal_sayisi" style="width: 140px;" disabled="">
<option value="-1"> </option>
<option value="4">4 QAM Paket</option>
<option value="8">8 QAM Paket</option>
<option value="12">12 QAM Paket</option>
<option value="16">16 QAM Paket</option>
<option value="20">20 QAM Paket</option>
<option value="24">24 QAM Paket</option>
<option value="28">28 QAM Paket</option>
</select>
</td>
</tr>
</table>
</div>
</div>
<a id="bloklar"></a>
<div class="panel panel-primary">
<div class="panel-body">
<h5 class="text-on-pannel text-primary"><strong> KAÇ BLOK / VİLLA - KABLOLAMA BELİRLEYİN </strong></h5>
<div class="row" style="padding-left: 20px; padding-right: 20px; padding-bottom: 10px;">
<div style="float: left;">
<button type="button" class="btn btn-primary btn-sm addCF">Add New Block</button>
</div>
<div style="float: right;">
<button type="button" class="btn btn-danger btn-sm remCF">Remove Last Block</button>
</div>
</div>
<strong>Not:</strong> Yeni blok eklemeden önce A Bloğun bilgilerini girerseniz ekleyeceğiniz yeni bloklar A Bloktan bilgileri alarak ekleyecektir. Yinede her bloğu yeniden düzenleyebilirsiniz.
<table class="table table-striped" id="customFields">
<thead>
<tr>
<th>#</th>
<th style="white-space: nowrap;"><a href="#bloklar" data-toggle="blok" title="Bu blok adı geçerliliği yok. Burada önemli olan projenizde kaç blok olduğudur."><span class="glyphicon glyphicon-info-sign"></span></a> Block</th>
<th><a href="#bloklar" data-toggle="kat" title="Binanın kat sayısını giriniz"> <span class="glyphicon glyphicon-info-sign"></span></a> Floors</th>
<th><a href="#bloklar" data-toggle="daire" title="Binadaki toplam daire sayısı giriniz"><span class="glyphicon glyphicon-info-sign"></span></a> Flats</th>
<th><a href="#bloklar" data-toggle="abone" title="Abone, binanın toplam anten kablonun sayısını giiriniz"><span class="glyphicon glyphicon-info-sign"></span></a> Subscriber</th>
<th><a href="#bloklar" data-toggle="saft" title="Dairelere anten kabloların çekimi için kaç şaft kullanıldı giriniz"><span class="glyphicon glyphicon-info-sign"></span></a> Shafts</th>
<th><a href="#bloklar" data-toggle="pano" title="Bir şatta kaç pano var? Yani kaç noktaya kablolar toplanıyor?"><span class="glyphicon glyphicon-info-sign"></span></a> TV Panel</th>
<th><a href="#bloklar" data-toggle="kablo" title="Bir panoda kaç kablo var? Eğer panolar arasında farklılık gösteriyorsa sayıları virgülle ayırarak giriniz. Örnek: 3 pano varsa 20,24,30 gibi"><span class="glyphicon glyphicon-info-sign"></span></a> Cables</th>
<th><a href="#bloklar" data-toggle="optik" title="Bir bloğun şafttında birden fazla pano varsa kaç panosuna fiber optik çekilecek"><span class="glyphicon glyphicon-info-sign"></span></a> Fiber Optic</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td style="white-space: nowrap;padding-top: 10px;">A Block</td>
<td><input type="tel" class="form-control" name="A_blok_kac_kat" id="A_blok_kac_kat" onkeypress='validate(event)' style="width: 50px;"></td>
<td><input type="tel" class="form-control" name="A_blok_dairsayisi" id="A_blok_dairsayisi" onkeypress='validate(event)' style="width: 50px;"></td>
<td><input type="tel" class="form-control" name="A_blok_abone_sayisi" id="A_blok_abone_sayisi" onkeypress='validate(event)' style="width: 50px;"></td>
<td>
<select size="1" class="form-control" name="A_blok_saft_sayisi" id="A_blok_saft_sayisi" style="width: 85px;">
<option value="1">1 Shafts</option>
<option value="2">2 Shafts</option>
</select>
</td>
<td>
<select size="1" class="form-control" name="A_blok_kablolar_kac_noktada_toplaniyor" id="A_blok_kablolar_kac_noktada_toplaniyor" style="width: 95px;">
<option value="1">1 Panel</option>
<option value="2">2 Panels</option>
<option value="3">3 Panels</option>
<option value="4">4 Panels</option>
<option value="5">5 Panels</option>
<option value="6">6 Panels</option>
<option value="7">7 Panels</option>
<option value="8">8 Panels</option>
<option value="9">9 Panels</option>
<option value="10">10 Panels</option>
</select>
</td>
<td><input type="tel" class="form-control" name="A_blok_panodaki_kablo_sayisi" id="A_blok_panodaki_kablo_sayisi" onkeypress='validateKabloSayisi(event)' style="width: 150px;"></td>
<td>
<select size="1" class="form-control" name="A_blok_kac_noktasina_optik_gidecek" id="A_blok_kac_noktasina_optik_gidecek" style="width: 110px;">
<option value="1">1 Poin</option>
<option value="2">2 Points</option>
<option value="3">3 Points</option>
<option value="4">4 Points</option>
<option value="5">5 Points</option>
<option value="6">6 Points</option>
<option value="7">7 Points</option>
<option value="8">8 Points</option>
<option value="9">9 Points</option>
<option value="10">10 Points</option>
</select>
</td>
</tr>
</table>
</div>
</div>
<div class="col-md-12 text-center">
<input type="submit" class="btn btn-primary" name="teklif" id="form" value=" Devam Et ">
<input type="reset" class="btn btn-danger" value=" Sıfırla ">
</div>
</div>
</form>
<br />
<style>
.tablo td {
padding-right: 20px;
}
.text-on-pannel {
background: #fff none repeat scroll 0 0;
height: auto;
margin-left: 20px;
padding: 3px 5px;
position: absolute;
margin-top: -47px;
border: 1px solid #337ab7;
border-radius: 8px;
}
.panel {
/* for text on pannel */
margin-top: 27px !important;
}
.panel-body {
padding-top: 30px !important;
}
</style>
<script>
$(document).ready(function(){
$('[data-toggle="blok"]').tooltip();
$('[data-toggle="kat"]').tooltip();
$('[data-toggle="daire"]').tooltip();
$('[data-toggle="abone"]').tooltip();
$('[data-toggle="saft"]').tooltip();
$('[data-toggle="pano"]').tooltip();
$('[data-toggle="kablo"]').tooltip();
$('[data-toggle="optik"]').tooltip();
});
</script>
<script type="text/javascript">
$("#analog").change(function(){
$("#analog_kanal_sayisi").prop("disabled", $(this).is(':checked'));
$('#analog_kanal_sayisi').prop('selectedIndex',0);
});
$("#dijital").change(function(){
$("#dijital_kanal_sayisi").prop("disabled", $(this).is(':checked'));
$('#dijital_kanal_sayisi').prop('selectedIndex',0);
});
$(document).ready(function(){
$("input[type='reset']").click(function() {
//$('#teklif_form').submit(function(e){
$('input:checkbox').screwDefaultButtons("uncheck");
$('input:checkbox').screwDefaultButtons("enable");
$('input:radio').screwDefaultButtons("uncheck");
$('input:radio').screwDefaultButtons("enable");
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var alfabe = 66;
var sira = 2;
$(".addCF").click(function(){
if(alfabe < 91 && alfabe > 65){
$("#customFields").append(
"</tbody>" +
"\n" +
' <tr id="' + String.fromCharCode(alfabe) + '">' +
"\n" +
' <td>' + sira + '.</td>' +
"\n" +
' <td style="white-space: nowrap;padding-top: 10px;">' + String.fromCharCode(alfabe) + ' Block</td>' +
"\n" +
' <td><input type="tel" class="form-control" name="' + String.fromCharCode(alfabe) + '_blok_kac_kat" onkeypress="validate(event)" value="' + $("#A_blok_kac_kat").val()+ '" style="width: 50px;"></td>' +
"\n" +
' <td><input type="tel" class="form-control" name="' + String.fromCharCode(alfabe) + '_blok_dairsayisi" onkeypress="validate(event)" value="' + $("#A_blok_dairsayisi").val()+ '" style="width: 50px;"></td>' +
"\n" +
' <td><input type="tel" class="form-control" name="' + String.fromCharCode(alfabe) + '_blok_abone_sayisi" onkeypress="validate(event)" value="' + $("#A_blok_abone_sayisi").val()+ '" style="width: 50px;"></td>' +
"\n" +
' <td>' +
"\n" +
' <select size="1" name="' + String.fromCharCode(alfabe) + '_blok_saft_sayisi" class="' + String.fromCharCode(alfabe) + '_blok_saft_sayisi form-control" style="width: 85px;">' +
"\n" +
' <option value="1">1 Şaft</option>' +
"\n" +
' <option value="2">2 Şaft</option>' +
"\n" +
' </select>' +
"\n" +
' </td>' +
"\n" +
' <td>' +
"\n" +
' <select size="1" name="' + String.fromCharCode(alfabe) + '_blok_kablolar_kac_noktada_toplaniyor" class="' + String.fromCharCode(alfabe) + '_blok_kablolar_kac_noktada_toplaniyor form-control" style="width: 95px;">' +
"\n" +
' <option value="1">1 Pano</option>' +
"\n" +
' <option value="2">2 Pano</option>' +
"\n" +
' <option value="3">3 Pano</option>' +
"\n" +
' <option value="4">4 Pano</option>' +
"\n" +
' <option value="5">5 Pano</option>' +
"\n" +
' <option value="6">6 Pano</option>' +
"\n" +
' <option value="7">7 Pano</option>' +
"\n" +
' <option value="8">8 Pano</option>' +
"\n" +
' <option value="9">9 Pano</option>' +
"\n" +
' <option value="10">10 Pano</option>' +
"\n" +
' </select>' +
"\n" +
' </td>' +
"\n" +
' <td><input type="tel" class="form-control" name="' + String.fromCharCode(alfabe) + '_blok_panodaki_kablo_sayisi" onkeypress="validateKabloSayisi(event)" value="' + $("#A_blok_panodaki_kablo_sayisi").val()+ '" style="width: 150px;"></td>' +
"\n" +
' <td>' +
"\n" +
' <select size="1" name="' + String.fromCharCode(alfabe) + '_blok_kac_noktasina_optik_gidecek" class="' + String.fromCharCode(alfabe) + '_blok_kac_noktasina_optik_gidecek form-control" style="width: 110px;">' +
"\n" +
' <option value="1">1 Noktaya</option>' +
"\n" +
' <option value="2">2 Noktaya</option>' +
"\n" +
' <option value="3">3 Noktaya</option>' +
"\n" +
' <option value="4">4 Noktaya</option>' +
"\n" +
' <option value="5">5 Noktaya</option>' +
"\n" +
' <option value="6">6 Noktaya</option>' +
"\n" +
' <option value="7">7 Noktaya</option>' +
"\n" +
' <option value="8">8 Noktaya</option>' +
"\n" +
' <option value="9">9 Noktaya</option>' +
"\n" +
' <option value="10">10 Noktaya</option>' +
"\n" +
' </select>' +
"\n" +
' </td>' +
"\n" +
' </tr>' +
"\n" +
"</tbody>"
);
$('.' + String.fromCharCode(alfabe) + '_blok_saft_sayisi').prop('selectedIndex', ($("#A_blok_saft_sayisi").val()-1));
$('.' + String.fromCharCode(alfabe) + '_blok_kablolar_kac_noktada_toplaniyor').prop('selectedIndex', ($("#A_blok_kablolar_kac_noktada_toplaniyor").val()-1));
$('.' + String.fromCharCode(alfabe) + '_blok_kac_noktasina_optik_gidecek').prop('selectedIndex', ($("#A_blok_kac_noktasina_optik_gidecek").val()-1));
alfabe++;
sira++;
}
});
//$("#customFields").on('click','.remCF',function(){
$(".remCF").click(function(){
if(alfabe < 92 && alfabe > 66){
//$(this).parent().parent().remove();
alfabe--;
sira--;
$("#" + String.fromCharCode(alfabe)).remove();
}
});
});
</script>
<script type="text/javascript">
var input = document.querySelector('.kablo_sayisi');
input.addEventListener('input', function() {
this.value = this.value.replace(/[^0-9\,]/, '');
});
</script>
<script type="text/javascript">
function validate(evt) {
var theEvent = evt || window.event;
// Handle paste
if (theEvent.type === 'paste') {
key = event.clipboardData.getData('text/plain');
} else {
// Handle key press
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
}
var regex = /[0-9]|\.,/;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
function validateKabloSayisi(evt) {
var theEvent = evt || window.event;
// Handle paste
if (theEvent.type === 'paste') {
key = event.clipboardData.getData('text/plain');
} else {
// Handle key press
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
}
var regex = /[0-9\,]/;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
</script>