Rework Javascript using Svelte feature

sg-frontend/src/components/SoftwareInsert.svelte

 <script>
-    import {onMount} from "svelte";
 
     const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
 
+    let newNodeName = "";
 
-    let softwares = [],
-        result,
-        node;
-
-
-    onMount(async () => {
-        const softwareName = document.getElementById("softwareName");
-        const newNodeButton = document.getElementById("newNodeButton");
-
-        newNodeButton.addEventListener("click", (e) => {
-            postSoftwareInsert();
-            e.preventDefault();
-            window.location.reload();
-        });
-
-        async function postSoftwareInsert() {
-            const res = await fetch(BACKEND_URL + "/software-insert", {
+    function postSoftwareInsert() {
+        if (newNodeName) {
+            fetch(BACKEND_URL + "/software-insert", {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",
                 },
-                body: JSON.stringify({"newNodeName": softwareName.value}),
-            });
+                body: JSON.stringify({"newNodeName": newNodeName}),
+            }).then(() => window.location.reload());
         }
-
-    });
+    }
 </script>
 
 
-<form class="form-inline">
-    <label for="softwareName">Software Name :</label>
-    <input type="text" id="softwareName" placeholder="" name="softwareName">
-    <button id="newNodeButton">Submit</button>
-</form>
+<div class="form-inline">
+    <label>Software Name :</label>
+    <input type="text" bind:value={newNodeName} placeholder="">
+    <button on:click={postSoftwareInsert}>Submit</button>
+</div>
 
 <style>
 
     /* Style the form - display items horizontally */
     .form-inline {
         display: flex;
-        flex-flow: row wrap;
         align-items: center;
     }
 
@@ -74,7 +58,7 @@
         }
     }
 
-    form {
+    .form-inline {
         max-width: 400px;
         background: #f4f4f4;
         padding: 20px;