JQ в HTML <форма>

У меня есть одна проблема с моим кодом, если есть форма в моем коде.
Сначала рабочий код без <form>: https://jsfiddle.net/hk1m6h0q/ .

function svi(){
if (document.getElementById('svi').checked) {
			document.getElementById("poslovni").disabled = "disabled";
			document.getElementById("privatni").disabled = "disabled";
        } else {
            document.getElementById("poslovni").disabled = false; 
            document.getElementById("privatni").disabled = false; 
        }
}
function privatni(){
if (document.getElementById('privatni').checked) {
			document.getElementById("poslovni").disabled = "disabled";
			document.getElementById("svi").disabled = "disabled";
        } else {
            document.getElementById("poslovni").disabled = false; 
            document.getElementById("svi").disabled = false; 
        }
}
function poslovni(){
if (document.getElementById('poslovni').checked) {
			document.getElementById("privatni").disabled = "disabled";
			document.getElementById("svi").disabled = "disabled";
        } else {
            document.getElementById("privatni").disabled = false; 
			document.getElementById("svi").disabled = false; 
        }
}
function trazi(){
if (document.getElementById('trazi').checked) {
			document.getElementById("poib2").style.display='block';
			document.getElementById("poib").style.display = "block";
			document.getElementById("pime").style.display = "block";
			document.getElementById("pime2").style.display = "block";
			
        } else {
			 document.getElementById("poib2").style.display = "none";
             document.getElementById("poib").style.display = "none";
			 document.getElementById("pime").style.display = "none";
			 document.getElementById("pime2").style.display = "none";
			 document.getElementById("iime2").style.display = "none";
             document.getElementById("iime").style.display = "none";
             document.getElementById("ioib2").style.display = "none";
             document.getElementById("ioib").style.display = "none";
			
        }
}
function poib(){
if (document.getElementById('poib').checked) {
			document.getElementById("ioib").style.display = "block";
			document.getElementById("ioib2").style.display = "block";
			
			
        } else {
			 document.getElementById("ioib2").style.display = "none";
             document.getElementById("ioib").style.display = "none";
           
			
        }
}
function pime(){
if (document.getElementById('pime').checked) {
			document.getElementById("iime").style.display = "block";
			document.getElementById("iime2").style.display = "block";
			
			
        } else {
			 document.getElementById("iime2").style.display = "none";
             document.getElementById("iime").style.display = "none";
           
			
        }
}
<input id="svi" name="svi" type="checkbox" onclick="svi()">
<label for="svi">Odaberi sve korisnike </label>
<br>
<input id="poslovni" name="poslovni" type="checkbox" onclick="poslovni()">
<label for="poslovni">Prikaži samo poslovne korisnike </label>
<br>
<input id="privatni" name="privatni" type="checkbox" onclick="privatni()">
<label for="privatni">Prikaži samo privatne korisnike </label>
<br><br>
<input id="trazi" name="trazi" type="checkbox" onclick="trazi()">
<label for="trazi">Potrebna pretraga</label>
<br><br>
<input style="display:none;" id="poib" name="poib" type="checkbox" onclick="poib()">
<label style="display:none;" id="poib2" name="poib2" for="poib">Pretraga po OIBu</label>
<br>
<input style="display:none;" id="pime" name="pime" type="checkbox" onclick="pime()">
<label style="display:none;" id="pime2" name="pime2" for="pime">Pretraga po nazivu</label>
<br><br>
<label style="display:none;" id="ioib2" for="last_name" class="">Unesite OIB</label>
<input style="display:none;" id="ioib" class="validate" type="text">
<br><br>
<label style="display:none;" id="iime2" for="last_name" class="">Unesite naziv</label>
<input style="display:none;" id="iime" class="validate" type="text">

При нажатии на флажок вы увидите изменения, но при добавлении <form method="post">мой JavaScript не работает.
Jsfiddle с <form>элементом: https://jsfiddle.net/wqg7bmn8/

function svi(){
if (document.getElementById('svi').checked) {
			document.getElementById("poslovni").disabled = "disabled";
			document.getElementById("privatni").disabled = "disabled";
        } else {
            document.getElementById("poslovni").disabled = false; 
            document.getElementById("privatni").disabled = false; 
        }
}
function privatni(){
if (document.getElementById('privatni').checked) {
			document.getElementById("poslovni").disabled = "disabled";
			document.getElementById("svi").disabled = "disabled";
        } else {
            document.getElementById("poslovni").disabled = false; 
            document.getElementById("svi").disabled = false; 
        }
}
function poslovni(){
if (document.getElementById('poslovni').checked) {
			document.getElementById("privatni").disabled = "disabled";
			document.getElementById("svi").disabled = "disabled";
        } else {
            document.getElementById("privatni").disabled = false; 
			document.getElementById("svi").disabled = false; 
        }
}
function trazi(){
if (document.getElementById('trazi').checked) {
			document.getElementById("poib2").style.display='block';
			document.getElementById("poib").style.display = "block";
			document.getElementById("pime").style.display = "block";
			document.getElementById("pime2").style.display = "block";
			
        } else {
			 document.getElementById("poib2").style.display = "none";
             document.getElementById("poib").style.display = "none";
			 document.getElementById("pime").style.display = "none";
			 document.getElementById("pime2").style.display = "none";
			 document.getElementById("iime2").style.display = "none";
             document.getElementById("iime").style.display = "none";
             document.getElementById("ioib2").style.display = "none";
             document.getElementById("ioib").style.display = "none";
			
        }
}
function poib(){
if (document.getElementById('poib').checked) {
			document.getElementById("ioib").style.display = "block";
			document.getElementById("ioib2").style.display = "block";
			
			
        } else {
			 document.getElementById("ioib2").style.display = "none";
             document.getElementById("ioib").style.display = "none";
           
			
        }
}
function pime(){
if (document.getElementById('pime').checked) {
			document.getElementById("iime").style.display = "block";
			document.getElementById("iime2").style.display = "block";
			
			
        } else {
			 document.getElementById("iime2").style.display = "none";
             document.getElementById("iime").style.display = "none";
           
			
        }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="svi" name="svi" type="checkbox" onclick="svi()">
<label for="svi">Odaberi sve korisnike </label>
<br>
<input id="poslovni" name="poslovni" type="checkbox" onclick="poslovni()">
<label for="poslovni">Prikaži samo poslovne korisnike </label>
<br>
<input id="privatni" name="privatni" type="checkbox" onclick="privatni()">
<label for="privatni">Prikaži samo privatne korisnike </label>
<br><br>
<input id="trazi" name="trazi" type="checkbox" onclick="trazi()">
<label for="trazi">Potrebna pretraga</label>
<br><br>
<input style="display:none;" id="poib" name="poib" type="checkbox" onclick="poib()">
<label style="display:none;" id="poib2" name="poib2" for="poib">Pretraga po OIBu</label>
<br>
<input style="display:none;" id="pime" name="pime" type="checkbox" onclick="pime()">
<label style="display:none;" id="pime2" name="pime2" for="pime">Pretraga po nazivu</label>
<br><br>
<label style="display:none;" id="ioib2" for="last_name" class="">Unesite OIB</label>
<input style="display:none;" id="ioib" class="validate" type="text">
<br><br>
<label style="display:none;" id="iime2" for="last_name" class="">Unesite naziv</label>
<input style="display:none;" id="iime" class="validate" type="text">
<button type="submit" class="waves-effect waves-light btn orange m-b-xsn">Filtriraj</button>
</form>

Что мне нужно сделать? Мне нужно с ним работать <form>.

1 ответ

  1. Необходимо добавить действие и метод в форму:

    <form action='' method='post'></form>
    

    Кроме того, проблема заключается в имени входных данных чекбоксов. Они совпадают с именами функций. Измените имя функций или имя флажков, и это должно работать.

    Я также обновил вашу скрипку. Вы можете найти его здесь .