Electron - get form data

Question

I'm new to Electron and wondering how to get data from a form to main.js ( main file that launches Electron ). The snippet from my index.html file is below:

    <form id="creds">
       <h3 class="username">Username</h3>
        <input id="username" class="form-control text-input" placeholder="Username">
        <input type="submit" value="Submit">
    </form>

I read about ipcMain and ipcRenderer but I'm unable to figure out what code to use to get the data from index.html after I hit the Submit button

Answer 1

I ended up using the ipcMain and ipcRenderer approach. In index.html

<script>
   document.querySelector('#submit').addEventListener('click', function() {

    let username = document.getElementById("username").value;

    const {ipcRenderer} = require('electron')

    // send username to main.js 
    ipcRenderer.send('asynchronous-message', username )

    // receive message from main.js
    ipcRenderer.on('asynchronous-reply', (event, arg) => {
      console.log(arg) 

    })

    });
</script>

In main.js

const {ipcMain} = require('electron')

// receive message from index.html 
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log( arg );
  
  // send message to index.html
  event.sender.send('asynchronous-reply', 'hello' );
  });