Can't insert data forms to sql server using electron - sql-server-2008

Question

Whenever I click the submit button, it won't transfer the data to mssql.
It seems like it only works on hard-coded query with onload events without the web forms.
HTML
<form>
First Name:<input type="text" id="first_name" required="true"/>
Last Name: <input type="text" id="last_name" required="true"/>
<button onclick="formdata()"> Submit </button>
</form>
Javascript
function formdata(){
var sql = require('mssql');
var config = {
userName: 'username',
password: 'password',
server: 'server',
database: 'database',
options: {
instanceName: 'instancename'
, encrypt: false
}
};
sql.connect(config, function (err) {
if (err) console.log(err);
var request = new sql.Request();
var fn = document.getElementById('first_name').value;
var ln = document.getElementById('last_name').value;
request.query('execute sp_tmp_name fn,ln');
});
}

Answer 1

Updated
I finally work it out. I included the ipcmain and ipcrenderer part to make it work.
Forms js
const ipcRenderer = require('electron').ipcRenderer;
function formdata(event){
event.preventDefault()
let fn = document.getElementById('first_name').value;
let ln = document.getElementById('last_name').value;
ipcRenderer.send('form-submission', fn,ln)
//pass ipcRenderer data to ipcmain
}
Main js
const {app, BrowserWindow, ipcMain} = require('electron')
........
ipcMain.on('form-submission', function (event, first_name,last_name) {
event.preventDefault()
var sql = require('mssql');
const pool = new sql.ConnectionPool({
user: 'xxxx',
password: 'xxxx',
server: 'xxxx',
database: 'xxxx',
options: {
instanceName: 'xxxx'
, encrypt: false
}
})
var conn = pool;
conn.connect().then(function () {
var request = new sql.Request(conn);
request.query("execute sp_tmp_name_sample" +" "+ first_name +","+last_name).then(function (recordset) {
console.log(recordset);
conn.close();
})
.catch(function (err) {
console.log(err);
conn.close();
});
});
})
HTML
<form action="#" method="post" name="ipcForm">
First Name:<input type="text" id="first_name" name="first_name" placeholder="First Name" required="true"/>
Last Name: <input type="text" id="last_name" name="last_name" placeholder="Last Name" required="true"/>
<input type="button" value="Submit" onclick="formdata(event)"/>
</form>
<script src="forms.js"></script>