JavaScript Coder

Submit a form using link

beginner javascript submit form javascript submit form using link

Submitting a form using a link in JavaScript can be done using the Fetch API.

Step 1: Create a Form

First, create an HTML form that includes the inputs you want. For example:

<h2>Contact Us</h2>
<div class="p-4">
<form id="myform">
  <div class="form-group">
    <label for="myform_name">Name</label>
    <input type="text" name="name" class="form-control" id="myform_name" placeholder="Your Name">
  </div>
  <div class="form-group">
    <label for="myform_email">Email address:</label>
    <input type="email" name="email" class="form-control" id="myform_email"  placeholder="Your email">
  </div>
  <div class="form-group">
    <label for="myform_message">Message</label>
    <textarea class="form-control" name="message" id="myform_message" rows="3"></textarea>
  </div>
  
  <a href="#" id="myLink"  >Submit</a>
</form>
</div>

This form has two input fields for name, email, a message, and a link to submit the form.

Step 2: Create a JavaScript Function

Now, create a JavaScript function that will handle the form submission using the Fetch API with the POST method. This function will create an object with the form data and make a POST request to the server.

function submitForm(e) {
  e.preventDefault();

  var myform = document.getElementById("myform");

  var formData = new FormData(myform);

  fetch("https://show.ratufa.io/json", {
    method: "POST",
    body: formData
  })
    .then(response => {
      if (!response.ok) {
        throw new Error("network returns error");
      }
      return response.json();
    })
    .then(resp => {
      let respdiv = document.createElement("pre");
      respdiv.innerHTML = JSON.stringify(resp, null, 2);
      myform.replaceWith(respdiv);
      console.log("resp from server ", resp);
    })
    .catch(error => {
      // Handle error
      console.log("error ", error);
    });
}

Step 3: Wire the click event

To handle a click event on a hyperlink using JavaScript, you can use the addEventListener() method to add an event listener to the hyperlink element. For example:

<a href="#" id="myLink">Click me</a>

<script>
  const myLink = document.getElementById('myLink');
  
  myLink.addEventListener('click', event => {
    event.preventDefault();
    // Do something when the link is clicked
  });
</script>

In this example, we’re using the getElementById() method to get a reference to the hyperlink element with the ID myLink. We’re then using the addEventListener() method to add a listener for the click event on the hyperlink.

The first thing we’re doing in the event listener function is calling event.preventDefault() to prevent the default hyperlink behavior, which is to navigate to a new page or reload the current page. This allows us to handle the click event using JavaScript instead.

After preventing the default behavior, you can then add whatever logic you want to handle the click event, such as submitting a form in our current example.

const myLink = document.getElementById('myLink');
  
myLink.addEventListener('click', submitForm);

Step 4: Test the Form Submission

Here is the full code and sandbox you can try:

See the Pen Submit form using Javascript (using fetch api) by Prasanth (@prasanthmj) on CodePen.

Now that we have a function to handle the form submission, we can test it by clicking on the link. When the link is clicked, the submitForm() function will be called, which will create an object with the form data and make a POST request to the server using the Fetch API with the POST method.

And that’s it! With these four steps, you can submit a form using a link in JavaScript using the Fetch API

See Also

Categories