Injected form in the DOM doesn't submit

When using the following code on ionic 2 framework, everything works great on Android but when I converted it into iOS only the following bit of code doesn’t work. I have been trying for past 2 days.

I have added the following in the config.xml
<allow-navigation href="https://*/*" />

Please if someone can have a look and advise what’s going on.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {

      constructor(public navCtrl: NavController) {}

      proceedToPayment(){

        var mapForm = document.createElement("form");
        mapForm.target = "_blank";    
        mapForm.method = "POST";
        mapForm.action = "http://www.example.com/api/checkout.php";

        // Create an input
        var firstname = document.createElement("input");
        var lastname = document.createElement("input");

        firstname.type = "text"; firstname.name = "firstname"; firstname.value = "John";
        lastname.type = "text"; lastname.name = "lastname"; lastname.value = "Doe";

        // Add the input to the form
        mapForm.appendChild( firstname );
        mapForm.appendChild( lastname );

        document.body.appendChild(mapForm);
        mapForm.submit();

      }

    }

Why can’t you just POST to the checkout.php endpoint directly using Angular’s Http client? That seems much cleaner than futzing with the DOM like this.

@rapropos If I do use Angular Http Client, how will I open the checkout.php page in the system browser. Please advise thanks.

Sorry, but I don’t understand what this means. As I understand it, checkout.php isn’t a page, it’s a backend endpoint that is expecting to receive some parameters in multipart/form-data format. Since it doesn’t look like there is any user interaction with the form you are creating, and all you are doing is submitting it immediately, then that means that you have all the data that you want to include in the POST. Something like this:

let formData = new FormData();
formData.append('firstname', 'John');
formData.append('lastname', 'Doe');
this.http.post('http://www.example.com/api/checkout.php', formData);

Sorry let me explain in more details. When I will POST firstname and lastname to checkout.php, checkout.php should open in system browser and checkout.php will show me a preview html page where firstname and lastname will be filled from the POST data.

This is the preview html page which is checkout.php page.
image

checkout.php lives on a server somewhere. I don’t see how the app can be opening it anywhere. Maybe somebody else can understand what is going on, but I’m pretty much baffled by what you’re saying. Maybe InAppBrowser is relevant?

Thank you. I am going to try something else and see if I can work it out. It’s strange that it works on Android and doesn’t work on ios. Client got really wild on me when I told him that something in ios that is preventing it to work. He wants solution, I can’t find none. Cheers!

One thing you might look at is making sure to only use https:// urls. iOS mandates that now.

Awesome, this was the issue. I was using http. Changed it to https and it worked. Thanks man!