CODEWITHSUNDEEP
javascriptjqueryforms
Hani Goc
Hani Goc

Reputation: 2441

Why are the values submitted from a form and added to a list disappearing?

Problem description

I am using the following javascript code in order to validate a form. What I want to add to take all the values from the form and submit them to a list. They disappear so quickly i really can't understand why.

function validateForm()
{
    //chercher les elements de la formes
    var nom = document.getElementById("nom").value;
    var prenom = document.getElementById("prenom").value;
    var dateNaissance = document.getElementById("date").value;
    
    alert(nom +" "+prenom+" "+dateNaissance);
    
    //ajouter etudiant à la liste
    select = document.getElementById('select');
    var opt = document.createElement('option');
    opt.value = 0;
    opt.innerHTML =  nom +" "+prenom+" "+dateNaissance;
    select.appendChild(opt);
}

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="etudiant.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<body>
<div>
<table border="1" >
    <tr>
        <th>
          Ajouter/Editer des étudiants
        </th>
    </tr>
    
    <tr>
      <td>
          <form id = "myForm" action = "" method = "get" onsubmit = "validateForm();">
           Nom:<input id = "nom" type = "text" name  = "nom" placeholder = "tapez votre nom" required/><br></br>
           Prénom:<input id = "prenom" type = "text" name  = "prenom" placeholder = "tapez votre prenom" required/><br></br>
           Date de naissance:<input id = "date" type = "text" name  = "date" placeholder = "tapez votre date de naissance" required/><br></br>
           <input id = "submit"  type = "submit" name = "valider"  value = "Valider"  />
           </form>
      </td>
    </tr>
    
    <tr>
        <th>
          Liste des étudiants
        </th>
    </tr>
    
    <tr>
        <td>
            <select  id="select" name="etudiants" size="1"> 
            
            </select>
        </td>
    
    </tr>

</table>

Upvotes: 0

Views: 54

Answers (2)

G. Mansour
G. Mansour

Reputation: 696

You have to return false to disable the submit action

function validateForm()
{
    //chercher les elements de la formes
    var nom = document.getElementById("nom").value;
    var prenom = document.getElementById("prenom").value;
    var dateNaissance = document.getElementById("date").value;

    alert(nom +" "+prenom+" "+dateNaissance);

    //ajouter etudiant à la liste
    select = document.getElementById('select');
    var opt = document.createElement('option');
    opt.value = 0;
    opt.innerHTML =  nom +" "+prenom+" "+dateNaissance;
    select.appendChild(opt);
    return false;
}`

Also

<form id = "myForm" action = "" method = "get" onsubmit = "return validateForm();">

Upvotes: 1

demarchisd
demarchisd

Reputation: 732

You have to tell the browser if the form should be submitted or not. For that, you can call your function returning its value:

<form id = "myForm" action = "" method = "get" onsubmit = "return validateForm();">

And, in the validateForm function, you have to return true or false whether the form is valid or not.

Upvotes: 1

Related Questions