Hello the javascript code below allows you to change the display of a container or not in javascript, to do it I use the js code below that allows you to change the display of the css containers, but the code does not show me container 2 or container 1 but it displays a blank page what is it for?
PHP CODE:
<?php
defined('_JEXEC') or die();
header('Content-type: text/css; charset: UTF-8');
$required_new = 'required';
if (
$account['id']['value'] != null &&
strcmp($account['id']['value'], '') != 0
) {
$required_new = '';
}
?>
<style>
.container {
background-color: white;
color: white;
visibility: hidden;
display: none;
}
.container2 {
background-color: white;
color: white;
visibility: visible;
margin-bottom: 100px;
display: contents;
}
.container3 {
background-color: white;
color: white;
visibility: hidden;
margin-bottom: 100px;
display: none;
}
</style>
<div class="jsn-bootstrap3">
<!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="onclick1()">Descrizione Azienda</button>
<button class="tablinks" onclick="onclick2()">Dati Aziendali</button>
<button class="tablinks" onclick="onclick3()">Procurement Code</button>
<button name="goto" id="goto" class="tablinks">Salva e Invia</button>
</div>
<div class="row" id="descrizioneazienda">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="row">
<!-- Form dati azienda-->
<form id="new_auction" action="<?php echo htmlspecialchars(
JUri::current(),
ENT_COMPAT,
'UTF-8'
); ?>" method="POST" enctype="multipart/form-data" class="container2">
<input type="hidden" id="account_id" name="account_id" value="<?php echo $account[
'id'
]['value']; ?>">
<input type="hidden" id="contact_id" name="contact_id" value="<?php echo $account[
'ilo_contact'
]['id']['value']; ?>">
<div class="form-group">
<label for="name">Nome</label>
<input type="text" class="form-control" id="name" name="name" value="<?php echo $account[
'name'
][
'value'
]; ?>" placeholder="" maxlength="70" required>
</div>
<div class="form-group">
<label for="showcase_description_c">Principali attività aziendali</label>
<textarea class="form-control" name="showcase_description_c" id="showcase_description_c" rows="3" required><?php echo $account[
'showcase_description_c'
]['value']; ?></textarea>
</div>
<div class="form-group text-center">
<h4>Oggetto delle forniture industriali</h4>
</div>
<div class="form-group">
<label for="products_c">Prodotti</label>
<textarea class="form-control" name="products_c" id="products_c" rows="6"><?php echo $account[
'products_c'
]['value']; ?></textarea>
</div>
<div class="form-group">
<label for="services_c">Servizi</label>
<textarea class="form-control" name="services_c" id="services_c" rows="6"><?php echo $account[
'services_c'
]['value']; ?></textarea>
</div>
<div class="form-group">
<label for="competitive_edge_c">Ciò che rende speciale l'azienda rispetto ai competitors</label>
<textarea class="form-control" name="competitive_edge_c" id="competitive_edge_c" rows="3" required><?php echo $account[
'competitive_edge_c'
]['value']; ?></textarea>
</div>
<div class="form-group">
<label for="foundation_year_c">Fondata l'anno</label>
<input type="number" class="form-control" id="foundation_year_c" name="foundation_year_c" value="<?php echo $account[
'foundation_year_c'
][
'value'
]; ?>" placeholder="1990" maxlength="4" required>
</div>
<div class="form-group">
<label for="employees">Numero dipendenti</label>
<?php echo $employees; ?>
</div>
<div class="form-group">
<label for="main_locations_c">Sede principale</label>
<input type="text" class="form-control" id="main_locations_c" name="main_locations_c" value="<?php echo $account[
'main_locations_c'
]['value']; ?>" placeholder="" required>
</div>
<div class="form-group">
<label for="company_size_c">Grandezza azienda</label>
<?php echo $company_size_c; ?>
</div>
<div class="form-group">
<label for="revenues_c">Turnover</label>
<?php echo $revenues_c; ?>
</div>
<div class="form-group">
<label for="revenue_period_c">Anno di riferimento turnover</label>
<input type="number" class="form-control" id="revenue_period_c" name="revenue_period_c" value="<?php echo $account[
'revenue_period_c'
][
'value'
]; ?>" placeholder="1990" maxlength="4">
</div>
<div class="form-group">
<label for="logo">Logo</label>
<input type="file" id="logo" name="logo" <?php echo $required_new; ?>>
<!--p class="help-block">Example block-level help text here.</p-->
</div>
<div class="form-group text-center">
<h4>Contatto</h4>
</div>
<div class="form-group">
<label for="contact_first_name">Nome</label>
<input type="text" class="form-control" id="contact_first_name" name="contact_first_name" value="<?php echo $account[
'ilo_contact'
]['first_name'][
'value'
]; ?>" placeholder="" required>
</div>
<div class="form-group">
<label for="contact_last_name">Cognome</label>
<input type="text" class="form-control" id="contact_last_name" name="contact_last_name" value="<?php echo $account[
'ilo_contact'
]['last_name'][
'value'
]; ?>" placeholder="" required>
</div>
<div class="form-group">
<label for="contact_phone_work">Telefono</label>
<input type="text" class="form-control" id="contact_phone_work" name="contact_phone_work" value="<?php echo $account[
'ilo_contact'
]['phone_work'][
'value'
]; ?>" placeholder="+3902123456" required>
</div>
<div class="form-group">
<label for="contact_email">Email</label>
<input type="email" class="form-control" id="contact_email" name="contact_email" value="<?php echo $account[
'ilo_contact'
]['email1'][
'value'
]; ?>" placeholder="[email protected]" required>
</div>
<div class="form-group">
<label for="competences_c">Competenze Significative dell'azienda</label>
<textarea class="form-control" name="competences_c" id="competences_c" rows="6" required><?php echo $account[
'competences_c'
]['value']; ?></textarea>
</div>
<div class="form-group">
<label for="key_equipment_c">Dotazioni Significative dell'azienda (attrezzature/macchinari)</label>
<textarea class="form-control" name="key_equipment_c" id="key_equipment_c" rows="6" required><?php echo $account[
'key_equipment_c'
]['value']; ?></textarea>
</div>
<div class="form-group">
<label for="markets_c">Mercati di riferimento</label>
<textarea class="form-control" name="markets_c" id="markets_c" rows="6" required><?php echo $account[
'markets_c'
]['value']; ?></textarea>
</div>
<div class="form-group">
<label for="assignments_c">Principali clienti/referenze</label>
<textarea class="form-control" name="assignments_c" id="assignments_c" rows="6" required><?php echo $account[
'assignments_c'
]['value']; ?></textarea>
</div>
<div class="form-group">
<label for="certifications_c">Certificazioni</label>
<textarea class="form-control" name="certifications_c" id="certifications_c" rows="3" required><?php echo $account[
'certifications_c'
]['value']; ?></textarea>
</div>
<div class="form-group">
<label for="photo">Foto significativa dei propri prodotti o servizi</label>
<input type="file" id="photo" name="photo" <?php echo $required_new; ?>>
<!--p class="help-block">Formato quadrato, tra i 300x300 ed i 2000x2000 pixel</p-->
</div>
</form>
</div>
</div>
<!-- Form dati azienda-->
<form id="new_auction" action="<?php echo htmlspecialchars(
JUri::current(),
ENT_COMPAT,
'UTF-8'
); ?>" method="POST" enctype="multipart/form-data" class="container3">
<div class="form-group">
<label for="ragionesociale_c">Ragione Sociale</label>
<textarea class="form-control" name="ragionesociale_c" id="ragionesociale_c" rows="3" required><?php echo $account[
'ragioneosociale_c'
]['value']; ?></textarea>
</div>
<!-- <div class="form-group text-center">
<button type="submit" name="goto" id="goto" class="btn btn-primary">INVIA</button>
</div>-->
</form>
<!-- Form dati azienda-->
<form id="new_auction" action="<?php echo htmlspecialchars(
JUri::current(),
ENT_COMPAT,
'UTF-8'
); ?>" method="POST" enctype="multipart/form-data" class="container">
<div class="form-group">
<label for="ragionesociale_c">Ragione Sociale</label>
<textarea class="form-control" name="ragionesociale_c" id="ragionesociale_c" rows="3" required><?php echo $account[
'ragioneosociale_c'
]['value']; ?></textarea>
</div>
<label for="partitaiva_c">Partita IVA:</label>
<p></p>
<textarea class="form-control" name="partitaiva_c" id="partitaiva_c" rows="3" required></textarea>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function onclick1() {
//Visualizzo i dati aziendali
element = document.querySelector('.container');
element.style.visibility = 'visible';
element.style.display = 'contents';
element2 = document.querySelector('.container2');
element2.style.visibility = 'hidden';
element2.style.display = 'none';
element2.remove();
element3 = document.querySelector('.container3');
element3.style.visibility = 'hidden';
element3.style.display = 'none';
}
function onclick2() {
element = document.querySelector('.container');
element.style.visibility = 'hidden';
element.style.display = 'none';
element2 = document.querySelector('.container2');
element2.style.visibility = 'visible';
element2.style.display = 'contents';
element3 = document.querySelector('.container3');
element3.style.visibility = 'hidden';
element3.style.display = 'none';
}
function onclick3() {
element = document.querySelector('.container');
element.style.visibility = 'hidden';
element.style.display = 'none';
element2 = document.querySelector('.container2');
element2.style.visibility = 'hidden';
element2.style.display = 'none';
element3 = document.querySelector('.container3');
element3.style.visibility = 'visible';
element3.style.display = 'contents';
}
function onsave() {
}