How can I use form input values in my submission script?

Question

I'm trying to do a simple thing. I have a website and I want people to be able to send some feedback and warn me, for that i have a "Notify Owner" button which displays a form and on Submit should execute a python script that send myself an email with the information they filled.

This is my form code (index.html - Created on the client side)

<script>
async function notifyOwner() {
  await fetch("api/notify", { method: "post" }).catch(console.log);
}
</script>

<div class="form-popup" id="myForm">
      <form class="form-container" name="form-owner">
        <h1>Notify Owner</h1>
        <label><b>Name</b></label>
        <input id="name" style="width:90%" type="text" placeholder="Enter your name$        
        <label><b>Message</b></label>
        <input id="context" style="width:90%" type="text" placeholder="Enter Reason$
        <button type="submit" class="btn" onclick="notifyOwner()">Submit</button>
        <button type="button" class="btn cancel" onclick="closeForm()">Close</butto$
      </form>
</div>

This is my server side handling

app.post("/api/notify", async (req, res) => {
  try{
    var subject = "teste";
    var body = "ok";
    child_process.execSync('python3 sendEmail.py ' + subject + " " + body);
  }catch(error){
    console.error(error);
  }
});

what should I do to replace the var subject with the value from id="name" and replace the var body with the value from id="context"?

May I suggest sending the email using the nodejs client ? It seams far fetch to call a python script from a nodeJS app, just to send an email. There is plenty of nodejs email library available. — Nicolas
– Nicolas, Commented Dec 7, 2020 at 15:01
Are you asking how to get input values in JavaScript? Does this answer your question? stackoverflow.com/questions/11563638/… — isherwood
– isherwood, Commented Dec 7, 2020 at 15:01
I'll defintly give it a try! Even though I've searched for it, maybe I don't know enough from nodejs to properly search it :D — André Clérigo
– André Clérigo, Commented Dec 7, 2020 at 15:03
@isherwood I think that document.getElementById doesnt work because the server didn't deploy the form, the form is done on client side and i call the script on the server side. I was more interested on knowing how to transfer the data from the html to the server — André Clérigo
– André Clérigo, Commented Dec 7, 2020 at 15:05
NodeJS is just JavaScript. Widen the scope of your research. — isherwood
– isherwood, Commented Dec 7, 2020 at 15:05

André Clérigo · Accepted Answer · 2020-12-07 23:57:36Z

1

SOLVED

On the server side.

app.use(express.json());
app.post("/api/notify", async (req, res) => {
    try{
        const subject = req.body.sub;
        const body = req.body.cont;
        child_process.execSync('python3 sendEmail.py ' + subject + " " + body);
    }catch(error){
        console.error(error);
    }
});

On the client side.

<script>
async function notifyOwner(ele) {
  const name = document.getElementById("name");
  const context = document.getElementById("context");
  await fetch("api/notify", {
    method: "POST",
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({sub: name.value, cont: context.value})
  }).catch(console.log);
}
</script>

<button type="submit" class="btn" onclick="notifyOwner(this)">Submit</button>

answered Dec 7, 2020 at 23:57

André Clérigo

9162 gold badges13 silver badges37 bronze badges

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

Comments

Faraz · Accepted Answer · 2020-12-07 17:00:12Z

0

In client script tag:

async function notifyOwner(ele) {
  const form = ele.parentElement.parentElement
  await fetch("api/notify", { 
    method: "POST",
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({data form.whatever}) // Replace whatever with whatever data you want to send from the form
  }).catch(console.log);
}

HTML:

...
        <button type="submit" class="btn" onclick="notifyOwner(this)">Submit</button>
...

Pass this to notifyOwner

In Server:

app.use(express.json());

app.post("/api/notify", async (req, res) => {
  try{
    const { data } = req.body; // Get key that was sent
  }catch(error){
    console.error(error);
  }
});

edited Dec 7, 2020 at 17:00

answered Dec 7, 2020 at 15:17

Faraz

4433 silver badges8 bronze badges

17 Comments

André Clérigo Over a year ago

Do i need to install any library to use bodyParser?

Faraz Over a year ago

It was express.json() not express.bodyparser() sorry. And Nope, if you're using Express 4.16+.

André Clérigo Over a year ago

var subject is null

Faraz Over a year ago

Try loggin ele.parentElement.parentElement.getAttribute('id') in notifyOwner and see if it actually returns the id

André Clérigo Over a year ago

sorry I had a typo. My var subject is returning 'myForm' which is the id of the div that contains the form, which is not what i need.

|

Collectives™ on Stack Overflow

How can I use form input values in my submission script?

2 Answers 2

Comments

17 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

17 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related