ONLINE TELEKOM ONLINE TELEKOM - 1 month ago 9
Javascript Question

JQ in HTML <form>

I have one problem with my code if there's a form in my code.

First the working code without

<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">





When you click on checkbox you will see changes, but when I add
<form method="post">
my JavaScript does not work.

Jsfiddle with
<form>
element: 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>





What do I need to do? I need it to work with
<form>
.

Answer

You need to add action and method to the form:

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

Also, the problem is the name of the checboxes inputs. They are the same as the functions names. Change the name of the functions or the name of the checkboxes and it should work.

I've also updated your fiddle. You can find it here.

Comments