CODEWITHSUNDEEP
javascriptnode.jsforms
André Clérigo
André Clérigo

Reputation: 916

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

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"?

Upvotes: 1

Views: 64

Answers (2)

Andr&#233; Cl&#233;rigo
Andr&#233; Cl&#233;rigo

Reputation: 916

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>

Upvotes: 1

Faraz
Faraz

Reputation: 443

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);
  }
});

Upvotes: 0

Related Questions