Javascript and JQuery concise form submit

Question

I'm very new to JavaScript and jQuery, trying to find a less verbose way to submit a form to Electron, JSON format is fine it can be handled on the server-side. How would you rewrite this code to make it more concise?

<section>
  <input id="server"        type="text"     placeholder="Server">
  <input id="instanceName"  type="text"     placeholder="Instance Name">
  <input id="linkedServer"  type="text"     placeholder="Linked Server">
  <input id="histDatabase"  type="text"     placeholder="Historical Database">
  <input id="modelDatabase" type="text"     placeholder="Model Database">
  <input id="schema"        type="text"     placeholder="Schema">
  <input id="username"      type="text"     placeholder="Username">
  <input id="password"      type="password" placeholder="Password">
  <input id="clientCode"    type="text"     placeholder="Client Code">
<footer>
  <button class="submit">Create Account</button>
</footer>

$("#modal-custom").on('click', '.submit', function(event) {
    let server        = document.getElementById('server').value;
    let instanceName  = document.getElementById('instanceName').value;
    let histDatabase  = document.getElementById('histDatabase').value;
    let linkedServer  = document.getElementById('linkedServer').value;
    let modelDatabase = document.getElementById('modelDatabase').value;
    let schema        = document.getElementById('schema').value;
    let username      = document.getElementById('username').value;
    let password      = document.getElementById('password').value;
    let clientCode    = document.getElementById('clientCode').value;
    ipcRenderer.send('update:databaseDetails', server, instanceName, 
    linkedServer, histDatabase, modelDatabase,schema, username, 
    password, clientCode)
});

Instead of document.getElementById('server').value; , you can do $('#server').val(); — Sudarshan Rai
– Sudarshan Rai, Commented Mar 10, 2020 at 4:23
Thanks, do I still have to go through the process of defining id's and selecting them via jQuery? Or is there a way to submit the form as JSON or as an array? — Jack Clayton
– Jack Clayton, Commented Mar 10, 2020 at 4:28

Trevor Njeru · Accepted Answer · 2020-03-10 05:08:39Z

1

The in the tag you can specify a method and an action.

method: specifies how to send form-data --> "GET" or "POST".

action: specifies the URL route where this data will be handled.

    <form action="/formsubmit" method="POST">
      <input id="server"        type="text"     name="server">
      <input id="instanceName"  type="text"     name="instance">
      <input id="linkedServer"  type="text"     name="linked">
    </form>

Server-side you will receive the user inputs as JSON data with all the input values filled in the request.body;

Using the tag's "name" as the key and the user input as the value:

{
    server: <user's input>,
    instance: <user's input>,
    linked: <user's input>,
}

You can read more on HTML forms here: https://www.w3schools.com/tags/att_form_method.asp

answered Mar 10, 2020 at 5:08

Trevor Njeru

3262 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Trevor Njeru Over a year ago

Glad I could help!

Collectives™ on Stack Overflow

Javascript and JQuery concise form submit

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related