How do I get an HTML form to submit on an iOS 15.4 iPhone?

See more:

Javascript

HTML5

iOS

I have a little application that is running vanilla javascript, html and css. I also have a few fetch calls to a security service to get a security array "token" so that the app can be authenticated to use an API url that gets returned back to the user after a few security checks are completed by some preceding fetch api requests. However, I have ran into a problem with the form that I wrote not being able to submit when a button is clicked on an iOS 15.4 iPhone in the safari browser (iPhone 12 Pro max). I have tested it on a later device and it works fine, which is fascinating :)

What I have tried:

1.) Firstly, I did notice that I had failed to close an html tag within the project's HTML document, so that was on me. So I thought that it was die to broken HTML, but this is clearly NOT the case.

2.) I had done some reading on Stack Overflow that said that some safari browsers have a problem with storing the javascript code separate from the main html. So in order to solve this I simply moved the minified javascript code into the same file as the html document, but still, nothing positive came to pass.

3.) I also did some reading online that said to try and add some alternative configuration to your fetch calls, such as adding the mode config of "cors" to all your requests. I tried this, but again no luck.

Here is my html code for the form:

<form id="submissionForm" class="form">
                        <div class="logo">
                        </div>
                        <div class="field-group">
                        <label for="fname">Name</label>
                            <input class="text-input" type="text" id="name"/>
                            <div id="nameValidator" class="validator"></div>
                        </div>
                        <div class="field-group">
                        <label for="lname">Email Address</label>
                          <input class="text-input" type="text" id="emailAddress"/>
                          <div id="emailAddressValidator" class="validator"></div>
                        </div>
                        <div class="field-group">
                            <label for="lname">
                                Phone (format: xxx-xxx-xxxx)
                            </label>
                          <input class="text-input" type="text" id="phoneNumber"/>
                          <div id="phoneNumberValidator" class="validator"></div>
                        </div>
                        <div class="field-group button-group">
                        <button role="button" id="submitButton" type="submit" class="button" value="Submit">
                            Submit Form
                        </button>
                        </div>
                    </form>

Here is my javascript code to submit the form (non-minified with gulp, of course):

function sendData(){
  clearFormValidations();

  var loadingMessage = document.getElementById("loadingMessage");
  var loadingMessageText = document.getElementById("loadingMessageText");
  var form = document.getElementById("submissionForm");

  loadingMessage.style.display = "flex";
  loadingMessageText.innerText = "Sending Your Data";
  form.style.display = "none";

  var proxyUrl = "Psh! In your dreams ;)";
  var targetUrl = "You wish! LOL";
    
  try{
    if(new URLSearchParams(dataFieldsToSubmit).size > 0){

      fetch(proxyUrl,{
        method:"GET",
        headers:{
          "Target-URL":targetUrl,
          "Content-Type":"application/json"
        },
        mode:"cors"
      }).then(function(res){
        if(res.ok){
          return res.json();
        }else{
          console.error("NOPE! ",res.statusText);
          cancelSubmission();
        }
      }).then(function(solution){
        let item = {
          k:somethingIAmNotShowingYouLOL1,
          side:somethingIAmNotShowingYouLOL2
        }
        fetch(proxyUrl,{
          method:"POST",
          body:JSON.stringify(item),
          mode:"cors",
          headers: {
            "Content-Type": "application/json",
            "Target-URL":targetUrl
          }
        }).then(function(res){
            if(res.ok){
              return res.json();
            }else{
              console.error("NOPE! ",res.statusText);
              cancelSubmission();
            }
        }).then(function(somethingIAmNotShowingYouLOL3){
          console.log(somethingIAmNotShowingYouLOL3);
          fetch(somethingIAmNotShowingYouLOL3.someUrl,{
            redirect: "follow",
            method: "POST",
            mode:"no-cors",
            body:JSON.stringify(dataFieldsToSubmit),
            headers: {
              "Content-Type": "application/json",
            },
          }).then(function() {
            handleFormSumission();
          }).catch(function(){
            cancelSubmission();
            throw new Error("Could not submit");
          }) 
        }).catch(function(){
          throw new Error("Could not submit");
        });
      }).catch(function(){
        throw new Error("Could not submit");
      });
    }else{
      throw new Error("Could not submit");
    }
  }catch(err){
    console.log("Oops! "+err);
    cancelSubmission();
  }
}

Any help on how to solve this issue would be much appreciated! :)