CODEWITHSUNDEEP
javascripthtmlforms
Giorgio Torassa
Giorgio Torassa

Reputation: 75

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.

Upvotes: 0

Views: 325

Answers (2)

ishwar
ishwar

Reputation: 74

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

Upvotes: 0

Dan O&#39;Leary
Dan O&#39;Leary

Reputation: 2822

Try replacing 

<button name="ok" type="button">OK</button>

with

<input type="submit" value="Ok">

Upvotes: 1

Related Questions