Using axios to post form data to an api javascript

Question

I know this question has been asked a lot of times but I want to use axios to submit data from a form to an api but it's not working when I click the submit button, it clears and then submits empty fields to the api. I know there is a event.preventDefault() method that should take care of this but I don't know where to put it in my code.
Here is my code:

 window.onload = function submitData(){
  const name = document.getElementById('name').value
  const email = document.getElementById('email').value
  const contacts = document.getElementById('contacts').value
  const location = document.getElementById('location').value
  const username = document.getElementById('username').value
  const password = document.getElementById('password').value

  axios.get('http://example.com/register', {
     investorNames: name,
     investorEmail: email,
     investorContacts: contacts,
     investorLocation: location,
     username: username,
     password: password
  })
  .then(function (response) {
     console.log(response);
  })
  .catch(function (error) {
     console.log(error);
  });
}

HTML

<form id='register-form'>
    <input type="text" placeholder="name" required id="name">
    <input type="email" placeholder="Email" required id="email">
    <input type="contacts" placeholder="contacts" required id="contacts">
    <input type="location" placeholder="location" required id="location" >
    <input type="username" placeholder="username" required id="username">
    <input type="password" placeholder="Password" required id="password">    
    <input class="button" name="submit" type="submit" value="submit" onclick="submitData()" />        
 </form>

Akhilesh krishnan · Accepted Answer · 2018-03-01 07:16:47Z

4

remove submitData from onload and declare it as plain function

function submitData(){}

and change input type from submit to button

<input class="button" name="submit" type="button" value="submit" onclick="submitData()" />

it works

answered Mar 1, 2018 at 7:16

Akhilesh krishnan

7992 gold badges8 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Using axios to post form data to an api javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related