3E e 3I: Visualizzare i risultati di un modulo form soltanto con il Javascript lato client
Visualizzare i risultati di un modulo form html soltanto con il Javascript lato client
pagina modulo.html
<html>
<head>
<script src="info.js"></script>
</head>
<body>
<!-- contact section -->
<section class="contact_section layout_padding">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-lg-4 offset-md-1 offset-lg-2">
<div class="form_container">
<div class="heading_container">
<h2>
Contattaci
</h2>
</div>
<form>
<div>
<label for="name"></label>Name: <input type="text" id="name" name="nome" value="" />
</div>
<div>
<label for="cognome"></label>Cognome: <input type="text" id="surname" name="cognome" value="" />
</div>
<div>
<label for="email"></label>Email: <input type="text" id="email" name="email" value="" required/>
</div>
<div>
<textarea name="testo" id="testo" cols="30" rows="10" placeholder="Commento" value=""></textarea>
</div>
<div class="d-flex">
<input id="btn" type="button" onclick="info()" value="INVIA" >
</div>
</form>
</div>
</div>
<div class="col-md-5 col-lg-4 offset-md-1 offset-lg-2" id="info">
<div>Name: <p id="pName"></p></div>
<div>Cognome: <p id="pCognome"></p></div>
<div>Email: <p id="pEmail"></p></div>
<div>Commento: <p id="pCommento"></p></div>
</div>
</div>
</div>
</section>
<!-- end contact section -->
</body>
</html>
nel file info.js c'è la funzione:
function info(){
var n = document.getElementById('name').value;
var c = document.getElementById('surname').value;
var e = document.getElementById('email').value;
var co = document.getElementById('testo').value;
document.getElementById('pName').innerHTML = n;
document.getElementById('pCognome').innerHTML = c;
document.getElementById('pEmail').innerHTML = e;
document.getElementById('pCommento').innerHTML = co;
if ((n && c && e) == '') {
alert("I seguenti campi sono obbligatori: Nome, Cognome, Email")
} else {
document.getElementById('info').style.display = 'flex';
document.getElementById('info').style.flexDirection = 'column';
document.getElementById('info').style.justifyContent = 'center';
}
}
Commenti
Posta un commento