Submit a form and get a JSON response with Javascript?

Question

any idea how to get a get the JSON response from server after posting a Form I want to post some info, email,pass,confirmation then I want to send the passed email back to frontend. so I can use it later to verify a pin any idea how to grab the response right after posting using JS?

// Backend code 
exports.signUp = async (req, res, next) => {
console.log(req.body);
res.status(200).json({Email : req.body.Email});
})

// Frontend code
 <form class="modal-content" method='POST' action="/sign" >
        <div class="container">
          <hr>
          <label for="email" ><b>Email</b></label>
          <input type="text" placeholder="Enter Email" name="Email">
          <label for="psw"><b>Password</b></label>
          <input id="password" type="password" placeholder="Enter Password" name="Password" required>
          <label for="psw-repeat"><b>Confirm Password</b></label>
          <input id="confirm_password" type="password" placeholder="Confirm Password" name="PasswordConfirm" required>
 </form>
 
 // outgoing data model from Frontend after post
 { Email: '[email protected]', Password: '0', PasswordConfirm: '0' }

You're looking for AJAX apparently (making a request to the server in the background). Use fetch() for that. — user5734311
– user5734311, Commented May 31, 2021 at 23:14
can a fetch accept an incoming request without the need to request to server ? since I want to send the response back anyway ? — Richardson
– Richardson, Commented May 31, 2021 at 23:20
fetch() is used to make an HTTP request to the server. You would usually use GET or POST, and URL params or body data accordingly. The server can send back arbitrary data which your frontend can process. I have no idea what you are referring to in your comment, a fetch cannot accept a request in any sense. HTTP requests are always intitiated from the client (i.e. the frontend) and answered by the server. — user5734311
– user5734311, Commented May 31, 2021 at 23:24

Mister Jojo · Accepted Answer · 2021-05-31 23:10:16Z

1

this way: use FormData

const myForm = document.forms['my-form']

myForm.onsubmit = e =>
  {
  e.preventDefault()
 
  let inputJSON = Array.from(new FormData(myForm))
      .reduce((r,[name,value])=>{ r[name]=value; return r} ,{}) 
    
  console.log(inputJSON) 
  }

<form name="my-form">
  <input name="Email" type="text" placeholder="Enter Email" required> <br>
  <input name="Password"  type="password" placeholder="Enter Password" required> <br>
  <input name="confirm_password" type="password" placeholder="Confirm Password" required> <br>
  <br>
  <button type="submit">submit</button>
  <button type="reset">reset</button>
</form>

edited May 31, 2021 at 23:10

answered May 31, 2021 at 22:59

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

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

1 Comment

Mister Jojo Over a year ago

@Jackhamer secure for what ? that's not in the question. you may use a https connexion

Collectives™ on Stack Overflow

Submit a form and get a JSON response with Javascript?

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