Giorgio Torassa Giorgio Torassa - 6 days ago 5
HTML Question

FORM inside Javascript DIV doesn't work

I have a page that uses tabs for visualizing different HTML codes on the basis of the tab you click.
The code is made in Javascript without libraries (like JQuery) and it can be found in many web sites related to HTML programming.
In the HTML codes associated to the tabs there is a form, the problem is that the forms doesn't work (if I press the OK button nothing happens).

<html>

<head>
<link href="css/graphtabs.css" rel="stylesheet" type="text/css">
</head>

<body>
<ul class="tab">
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'ntr')">NTR</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'unity')">Unity</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'equa')">eQuA</a></li>
</ul>

<div id="ntr" class="tabcontent">
<font size="+1">Grafici</strong></font><br><br>
<form action="details2gio.php" method="get">
<input type="checkbox" name="Brokerage" value="yes"/> a
<input type="checkbox" name="Postemobile" value="yes"/> b
<input type="checkbox" name="Prepaid" value="yes"/> c
<input type="checkbox" name="PRE_BUS" value="yes"/> d
<input type="checkbox" name="Vpn" value="yes"/> e
<br>
Seleziona grafico: <select name="report">
<option value="numreg">Numero registrazioni (Paese)</option>
<option value="regperop">Registrazioni per operatore</option>
<option value="ulsuccessperop">UL Success per operatore</option>
<option value="tmedioperop">Tempo medio di registrazione per operatore</option>
<option value="firsttimesuccperop">Successo al primo tentativo per operatore</option>
</select>
<button name="ok" type="button">OK</button>
</form>
<div id="container_ntr" align="center" style="width: 1000px; height: 450px; margin: 0 auto"><img src="images/waiting.gif" alt="Waiting..." height="300" width="300"></div>
<br>
</div>

<div id="unity" class="tabcontent">
<font size="+1">Grafici UNITY per:<strong><?php echo " ".$country?></strong></font><br><br>
<form action="details2gio.php" method="get">
<input type="hidden" name="uid" value="<?php echo $_GET['uid']?>">
<input type="hidden" name="cc" value="<?php echo $_GET['cc']?>">
<br>
Seleziona grafico: <select name="report">
<option value="ulsuccperopunity" <?php if ($_GET['report']=='ulsuccperopunity') echo 'selected';?>>Ul Success per operatore</option>
<option value="tmediounity" <?php if ($_GET['report']=='tmediounity') echo 'selected';?>>Tempo medio di registrazione per operatore</option>
</select>
<button name="ok" type="button">OK</button>
</form>
<div id="container_unity" align="center" style="width: 1000px; height: 450px; margin: 0 auto"><img src="images/waiting.gif" alt="Waiting..." height="300" width="300"></div>
<br>
</div>

<div id="equa" class="tabcontent">
<h3>EQUA</h3>
<p>Here you have to put eQuA graphs.</p>
</div>

<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>

</body>
</html>


------------------------------------------------------------------
CSS graphtabs.css
------------------------------------------------------------------

/* Style the list */
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}


I've searched for issues related to the use of FORM inside DIV but I didn't find anything.

Answer

Reason for button not to trigger is button type which should be set

type="submit"

Now ur form will be submitted to respective form action