the event listener for xmlhttprequest on load is not functioning as expected

I am facing an issue with validating a form using JavaScript and XMLHttpRequest. The onload function is supposed to display an alert, but it only works sometimes. I'm struggling to identify my mistake.

document.getElementById("button").addEventListener("click", function(){
  validateForm(document.myForm);
});


function validateForm(form) {

  if (form.FirstName.value.match(/^([A-Za-z ]+)$/) &&
    form.Surname.value.match(/^([A-Za-z ]+)$/) &&
    form.Verein.value.match(/^([A-Za-z ]+)$/) &&
    form.Headcoach.value.match(/^([A-Za-z ]+)$/) &&
    form.Assistantcoach.value.match(/^([A-Za-z ]+)$/) &&
    form.Rueckennummer.value.match(/^([0-9])$/) &&
    form.Rueckennummer.value > 3 &&
    form.Rueckennummer.value < 16 &&
    (document.getElementById("Aktiv1").checked || document.getElementById("Aktiv2").checked) &&
    (new Date(document.getElementById("idDate").value).getFullYear() <= new Date().getFullYear()) ) {

      senden(form);

  }else{
      alert("Some inputs are incorrect. Please double-check your entries.");
    }

}

function senden(form){
 var formData = new FormData(form);
 var xhr = new XMLHttpRequest();
 xhr.open('POST', 'http://188.166.165.74:13337/api/players', true);
 xhr.responseType = 'json';
 xhr.onload = function() {
  alert("Data successfully transmitted")
 };
 xhr.send(formData);
}

Answer №1

Consider using onreadystatechange in place of onload...

function senden(form){
 var formData = new FormData(form);
 var xhr = new XMLHttpRequest();
 xhr.open('POST', 'http://188.166.165.74:13337/api/players', true);
 xhr.responseType = 'json';
 xhr.onreadystatechange = function() {
  alert("Data successfully transmitted")
 };
 xhr.send(formData);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to efficiently fetch JSON data synchronously using AngularJS

Trying to fetch data from a JSON file using AngularJS results in an error due to the asynchronous nature of the call. The code moves on to the next step before receiving the data, causing issues. The $http.get method was used. $http.get('job.json&apo ...

Tips on effectively managing an XMLhttp request to a PHP controller

Encountering an internal server error and nothing is being logged in the PHP error log. This issue persists despite not using any frameworks. DEV - controllers |-> user -> check_email.php - public_html |-> routes ...

How to efficiently target and manipulate links using jQuery Mobile

I previously asked a question about loading an external page without ajax while maintaining it as an iOS web app window. In that example, I used the following code: <script> $(document).bind('pageinit', function() { $("#test").click(func ...

What's the easiest method for moving div content from side to side?

Working on a plugin for WordPress, I am faced with the task of moving content in a slider from left to right and right to left. My current attempt is as follows: var effect = 'slide'; // Set the options for the chosen effect type var opti ...

Error: Cloudant encountered a problem processing your request

Why is my attempt to upload JSON objects into a Cloudant database resulting in a "400 bad request" error? pos = { 'lat': position.coords.latitude, 'long' : position.coords.longitude }; $.ajax({ type: "POST", ...

Efficiently map nested properties of this.props within the render method

When working in the render() method, I find myself passing numerous variables around. The recommended best practices suggest setting up variables before the return <div>...etc</div statement like this: const { products: mainProducts, ...

Sending a PDF document and JSON data via an AJAX POST request

I'm attempting to send a PDF document along with some JSON data in string format using an AJAX method in jQuery to an ASP.NET WEB API (2). Below are my attempts that are not working: JAVASCRIPT: // Obtaining the authorization token works fine var hea ...

Padding for the initial element in a carousel display

I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...

The state returned by React Redux does not meet the expected results

I recently implemented a like function on the backend using Node and MongoDB. This function successfully returns the post with an updated likes counter, which I tested using Postman. The post object contains properties such as likes, _id, by, createdAt, an ...

Tips for adjusting font size automatically to fit within its parent container every time

On my blog, the post titles are displayed in a div with a video playing in the background. The length of the title varies, ranging from 2 words to over 20 words. When the title is too long, it may overflow from its parent container where the video is playi ...

Using AngularJS and Web API to generate a dropdown menu from a one-to-many relationship

I have two tables in my database: People and Payband. Let me simplify the relationship below: dbo.People PersonId : int (Primary Key) FirstName : string MiddleInitial: string LastName : string DateOfBirth: datetime PaybandId : int (Foreign Key) dbo.Payb ...

Add an input element to a form fieldset by employing vue

In my form, I have a staged approach with 3 fieldsets that only appear when the "Next" button is clicked. Now, in the third fieldset, I need to add input elements based on keys extracted from an external json object. Data: data: () => ({ c ...

Is there a way to prevent continuous repetition of JavaScript animated text?

I'm working on a code that displays letters and words one by one, but I can't figure out how to stop it from repeating. Can someone help me with this? <div id="changeText"></div> <script type="text/javascript"> var te ...

"Encountering a problem with a missing object in jQuery when referencing

I'm encountering an issue with jQuery's $(this) object that's causing me to lose track of the this element in my code: $('.star').click(function (){ var id = $(this).parent().attr('id').split('rating')[ ...

Flaw in Basic Function Logic Using HTML, JavaScript, and CSS

Need some help with the function onBall3Click1 (code is at the bottom). The ball should act like a lightbulb: ON - turn YELLOW, OFF - turn GRAY. I've been trying to figure out the logic behind it for so long and can't seem to find the issue... ...

Background loading of child application in single-spa

I'm currently working on setting up a Single-Spa micro frontend with Dynamic Module Loading in React. The user journey I have in mind is as follows: Root Application -> Authentication Application -> User Enters Details -> API Call -> Redir ...

What is causing the Jquery form submit event to not trigger?

I am attempting to use jQuery to submit a form. I need the form submit event to be triggered when jQuery submits the form. However, the submit event handler is not being called successfully after the form is submitted. Here is the code snippet: <html ...

Encountered an error in AWS Lambda (Node 14.x): SyntaxError - Unexpected token 'export'

As I work on developing a straightforward login and registration system with AWS, I encountered an issue in AWS Lambda while testing my backend using Postman. The error code is detailed below: { "errorType": "Runtime.UserCodeSyntaxError& ...

What could be causing my input box to act strangely when users attempt to input information?

I seem to be facing an unusual issue with the <input onChange={this.handleArticleId} value={this.props.articleIdValue} placeholder="article id"/> field. Whenever I try typing something, the letter only appears in the input box after clicking on the s ...

Ensure the correct file extension is chosen when selecting a file for the 'file_field' and display any error messages using Ruby on Rails

I am currently using Ruby on Rails 3 and Prototype, and I need to be able to check the file extension when a file is selected with file_field. I only want to allow files with extensions of .doc or .pdf, any other extensions should display an error. In my ...