AJAX reloads web page when post to another server

Question

I need to send data from a single web page running on http://localhost/index.htm to a servlet running on http://localhost:8080/contactus/saveMessage. Submitting the form, data is sent and saved on database by the server (Spring Controller using POST) and this controller returns a simple String message to show on the origin web page. But instead of receiving the text message to show below the form I get the web page reloaded with next URL: http://localhost/index.htm?fullName=Juan+Lopez&email=xxx%40yyy.com

The code is next:

<form id="messageForm">
  <p><input class="w3-input w3-padding-16" type="text" maxlength="40" placeholder="Full Name *" required name="fullName"></p>
  <p><input class="w3-input w3-padding-16" type="email" maxlength="50" placeholder="Email *" required name="email"></p>
  <button class="w3-button w3-light-grey w3-padding-large" type="submit" onclick="sendMessageForm();">Send Message</button>
  <p id="responseText"></p>
</form>

that calls next javascript code:

function sendMessageForm() {
  const formData = new FormData(document.getElementById("messageForm"));
  const xhr = new XMLHttpRequest();
  xhr.onload = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      document.getElementById("responseText").innerHTML = xhr.responseText;
      document.getElementById("messageForm").reset();
    } else {
      document.getElementById("responseText").innerHTML = "Ocurrio un error al enviar su mensaje. " + this.responseText;
    }
  };
  xhr.open("POST", "http://localhost:8080/contactus/saveMessage", true);
  xhr.send(formData);
}

The controller is running on "http://localhost:8080/contactus/saveMessage its code is next:

@Controller
@RequestMapping(path = ContactMessageWebController.ROOT)
public class ContactMessageWebController {
  public final static String ROOT = "/contactus";
  private final ContactMessageService contactMessageService;

  public ContactMessageWebController(ContactMessageService contactMessageService) {
    this.contactMessageService = contactMessageService;
  }
  
  @CrossOrigin
  @PostMapping("/saveMessage")
  @ResponseBody
  public String createContactMessage(@RequestParam(name = "fullName") String fullName,
      @RequestParam(name = "email") String email) {
    contactMessageService.create(fullName, email);
    return "ok";
  }
}

Why I didn't get the "ok" response from the controller and just update the

p tag with id="responseText"

. Why I got the page reloaded with this URL: http://localhost/index.htm?fullName=Juan+Lopez&email=xxx%40yyy.com

Thanks in advance.

Answer 1

Multiple solutions can apply all if necessary. But I believe the first one will work for you.

1. Replace button type from submit to button

<button type="button" onclick="sendMessageForm();">Send Message</button>

2. Form onsubmit return false

<form id="messageForm" onsubmit="return false;">

3. Apply prevent default on form submit event

$("#messageForm").submit(function(e) { e.preventDefault(); });