I currently have a form in which a user can put his name, age and the message and then I have a button to submit the message and it is supposed to show an alert with the form information but when I put the information and click the button nothing is happening (the alert doesn't show). Here is the html form and javascript function code:
<form action="#" method="get">
<fieldset>
<legend>Informações do utilizador</legend>
<label for="nome">Nome:</label>
<input id="nome" name="nome" type="text" />
<br />
<label for="idade">Idade:</label>
<select id="idade" name="idade">
<option value="menor"><18</option>
<option value="jovem">18-21</option>
<option value="jovemadulto">22-29</option>
<option value="adulto">30-39</option>
<option value="adultoavancado">40-49</option>
<option value="idoso">>=50</option>
</select>
</fieldset>
<fieldset>
<legend>Ideias para tornar um campus mais sustentável</legend>
<label for="mensagem">Mensagem:</label><br />
<textarea id="mensagem" name="mensagem" rows="10" cols="50" placeholder="Introduza a sua ideia">
</textarea>
<br />
<input id="enviar" name="enviar" type="submit" onClick="submitForm()" value="Enviar">
<script>
function submitForm() {
var n = document.getElementById('nome').value;
var i = document.getElementById('idade').value;
var m = document.getElementById('mensagem').value;
alert("Nome: "+s+"\n Idade: "+i+"\n Mensagem: "+m);
}
</script>
<input id="limpar" name="limpar" type="reset" value="Limpar" />
</fieldset>
</form>
the correct way to do that...
const myForm = document.querySelector('#my-form') // use the form parent
// to refer each form elements
// think about how to write your code:
// easier to read again = less typing errors
myForm.onsubmit = evt =>
{
alert( 'Nome: ' + myForm.nome.value // access each element by his name
+ '\n Idade: ' + myForm.idade.value
+ '\n Mensagem: ' + myForm.mensagem.value
);
evt.preventDefault(); // for testing without page relaod
}<form action="#" method="get" id="my-form"> <!-- have an id (or a name) here -->
<fieldset>
<legend>Informações do utilizador</legend>
<label for="nome">Nome:</label>
<input id="nome" name="nome" type="text" />
<br />
<label for="idade">Idade:</label>
<select id="idade" name="idade">
<option value="menor"><18</option>
<option value="jovem">18-21</option>
<option value="jovemadulto">22-29</option>
<option value="adulto">30-39</option>
<option value="adultoavancado">40-49</option>
<option value="idoso">>=50</option>
</select>
</fieldset>
<fieldset>
<legend>Ideias para tornar um campus mais sustentável</legend>
<label for="mensagem">Mensagem:</label><br />
<textarea id="mensagem" name="mensagem"
rows="10" cols="50" placeholder="Introduza a sua ideia"></textarea>
<br>
<button type="submit"> Enviar </button>
<button type="reset"> Limpar </button>
</fieldset>
</form>There is no var s in your function, should be n in your alert():
<script>
function submitForm() {
var n = document.getElementById('nome').value;
var i = document.getElementById('idade').value;
var m = document.getElementById('mensagem').value;
alert("Nome: "+n+"\n Idade: "+i+"\n Mensagem: "+m);
}
</script>