writing data to realtime database from web application does not work-CodePudding

I want to insert data into a firebase realtime database from a web application using javascript. For this I have used this code taken from the firebase documentation:

function writeUserData(userId, firstName, lastName, email) {
  alert("hola");
  set(ref(database, 'users/'   userId), {
        firstName: firstName,
        lastName: lastName,
        email : email
  });
}

But it doesn't work. Reading (getData) works without problems, but writing does not. I have verified that it enters the writeUserData function without problems and that it generates the userId perfectly. This is the complete code.

<html>
<head>
<title>firebase editable table </title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3 MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</head>

<body>

<div >
  <form>
    <div >
    <label>First name</label>
    <input type="text"  id="first-name" placeholder="first name">
  </div>
  <div >
    <label>Last name</label>
    <input type="text"  id="last-name" placeholder="last name">
  </div>
  <div >
    <label for="exampleInputEmail1">Email address</label>
    <input type="email"  id="email" placeholder="Enter email">
  </div>
  <button type="submit" id="submit" >Submit</button>
</form>
</div>

  <button type="submit" id="getData" >Search data</button>

<div >
<table  id='dataTbl'>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>
</div>


</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV 2 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script type="module">

    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
    import { getDatabase, set, ref ,push, child, onValue} from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";

  const firebaseConfig = {
  
    //here goes my data
  };

  const app = initializeApp(firebaseConfig);
  const database = getDatabase(app);

 submit.addEventListener('click',(e) => {   
    var firstName = document.getElementById('first-name').value;  
    var lastName = document.getElementById('last-name').value;  
    var email = document.getElementById('email').value;        
    const userId = push(child(ref(database), 'users')).key;        
    writeUserData(userId, firstName, lastName, email)
  });     

  getData.addEventListener('click',(e) => {
    $('#dataTbl td').remove();
    var rowNum = 0; 
    //const dbRef = ref(database, 'Mensajes/');
    const dbRef = ref(database, 'users/');
    onValue(dbRef, (snapshot) => {
      snapshot.forEach((childSnapshot) => {
      const childKey = childSnapshot.key;
      const childData = childSnapshot.val();
      rowNum  = 1; 
      var row = "<tr><td>"   rowNum   "</td><td>"   childData.firstName   "</td><td>"   childData.lastName   "</td><td>"   childData.email   "</td></tr>"
      //var row = "<tr><td>"   rowNum   "</td><td>"   childData.texto   "</td><td>"   childData.lastName   "</td><td>"   childData.email   "</td></tr>"
      $(row).appendTo('#dataTbl');
      
      });
    }, {
       onlyOnce: true
    });
  });
function writeUserData(userId, firstName, lastName, email) {
  alert("hola");
  set(ref(database, 'users/'   userId), {
        firstName: firstName,
        lastName: lastName,
        email : email
  });
}        
</script>

CodePudding user response：

Remove form tag, and initialize submit button in your JS code.(Duplicated from my comment)