Cordova InAppBrowser post form to url

javascript angularjs cordova post inappbrowser

15,921

Solution 1

Here's another way of posting a HTML form via the InAppBrowser using a dataUrl:

var pageContent = '<html><head></head><body><form id="loginForm" action="YourPostURL" method="post">' +
'<input type="hidden" name="key1" value="' + YourValue1 + '">' +
'<input type="hidden" name="key" value="' + YourValue2 + '">' +
'</form> <script type="text/javascript">document.getElementById("loginForm").submit();</script></body></html>';
var pageContentUrl = 'data:text/html;base64,' + btoa(pageContent);

var browserRef = window.cordova.InAppBrowser.open(
    pageContentUrl ,
    "_blank",
    "hidden=no,location=no,clearsessioncache=yes,clearcache=yes"
);

Solution 2

you can do it like this

var options = {
        email: '[email protected]',
        item_id: 1234,
        reference: 1234,
        item_descr: 'description',
        item_quant: 1,
        item_valor: 50 * 100
    };

    var script = 'var form = document.createElement("form");';
     script += 'var url = "https://testurl.com";';
     script += 'form.method="post"';
     script += 'form.setAttribute("action",url);';
    for (var data in options) {
      script += 'var hiddenField = document.createElement("input");';
      script += 'hiddenField.setAttribute("type", "hidden");';
      script += 'hiddenField.setAttribute("name","' + data +'");';
      script += 'hiddenField.setAttribute("value","' + options[data] + '");';
      script += 'form.appendChild(hiddenField);';
    }
    script += 'document.body.appendChild(form)';
    var ref = cordova.InAppBrowser.open(url, '_blank', 'location=yes');
script += 'form.submit();';

and then execute script in the inappbrowser using on the loadstop event like this

ref.addEventListener('loadstop', onLoadStopFunction);

onLoadStopFunction(params){
   ref.executeScript({ code: script }, executeScriptCallBack);
}
function executeScriptCallBack(params) {

    if (params[0] == null) {

        //error message
    }

}

there are many other ways to do it.

Solution 3

You need to fill in the dynamic feild values on loadstop or load start event by using Execute Script.

First Bind the events , when you open the link:

{
  var url= 'yourURL';
  if( device.platform === "Android"){
         ref =cordova.InAppBrowser.open(url, "_blank",'location=no,clearcache=yes,hardwareback=no,zoom=no');
  }else{
        ref =cordova.InAppBrowser.open(url, "_blank",'location=no,clearcache=yes,closebuttoncaption=Go back to App,toolbar=yes,presentationstyle=formsheet');
  }


  ref.addEventListener('loadstart',onBrowserLoadStart);
  ref.addEventListener('loadstop',onBrowserLoadStop);
  ref.addEventListener('loaderror', onBrowserError);
  ref.addEventListener('exit', onBrowserClose);
}

Then on onBrowserLoadStop, check if its the right page to Post form:

function onBrowserLoadStop(event){


var cUrl= 'myformURL';
if(event.url===cUrl){

    var msg;
    var newHtml=YourFormHTML;
    var withoutScriptHtml = $(newHtml.bold());
    withoutScriptHtml.find('script').remove();


    msg=    " var formDiv = document.createElement('div'); formDiv.id='someFormDiv'; ";
    msg+=   " formDiv.innerHTML='" + withoutScriptHtml.html()+ "';" ;
    msg +=  " document.getElementById('outerDiv').appendChild(formDiv);"; //outerDiv should be on the html page residing at cUrl
    msg +=  " document.getElementById('yourFormName').submit();";
    //console.log("the message: "+ msg);


    ref.executeScript(
        {
            code: msg
        },
        function(values){
            console.log(JSON.stringify(values));
        }
    );


}
}

15,921

Author by

memo

Updated on June 12, 2022

Comments

memo almost 2 years

i'm trying to post values inappbrowser but no success. it does open browser twice and no data posted.

   var options = {
        email: '[email protected]',
        item_id: 1234,
        reference: 1234,
        item_descr: 'description',
        item_quant: 1,
        item_valor: 50 * 100
    };
    var form = document.createElement("form");
    var url = "https://testurl.com";
    form.setAttribute("method","post");
    form.setAttribute("action",url);
    for (var data in options) {
      var hiddenField = document.createElement("input");
      hiddenField.setAttribute("type", "hidden");
      hiddenField.setAttribute("name", data);
      hiddenField.setAttribute("value", options[data]);
      form.appendChild(hiddenField);
    }
    document.body.appendChild(form);
    var ref = cordova.InAppBrowser.open(url, '_blank', 'location=yes');
    if(ref){
      form.submit();
    }

Diluk Angelo over 6 years

what is btoa() ?
Jannis over 6 years

It's for encoding data using Base64: developer.mozilla.org/en-US/docs/Web/API/WindowBase64/…
Sunil Rawat about 6 years

I am trying above code but its not working, browser does not open in my device.
Jannis about 6 years

@SunilRawat: Did you try the examples for the InAppBrowser-plugin from it's documentation? Do they work or is it a general problem with the plugin and your device/app?
Sunil Rawat about 6 years

I tried it with InAppBrowser plugin, yes from document I am trying , I just want to pass a single paremeters from js to html using InappBrowser.
Sunil Rawat about 6 years

//Open as browser in device var openInAppBrowser = function(fields) { //alert(fields); alert('Running in Device..'); //Post all required paremeters to the payu iabRef = window.open('epayDevice.html', '_blank', 'location= no'); iabRef.addEventListener('loadstart', function() {});
Sunil Rawat about 6 years

can you please assist me in this. I have spent lots of time to find the solution but no success.
Jannis over 5 years

It might be better to formulate your question as a new question on SO and link it here
user94 over 4 years

it is not working for me. how to do this in phonegap app??
user94 over 4 years

@ram12393 can you please post the solution?
ram12393 over 4 years

@user94 can pleas tell me , r u using ionic or any other ?
user94 over 4 years

@ram12393 hi, I am using Cordova (PhoneGap) app.
ram12393 over 4 years

then it should be work perfectly. still r u facing problem
user94 over 4 years

above solution makes error for me. I need to post values to payUmoney. i am using InAppBrowser for payment gateway.
billy_comic almost 4 years

@Jannis have you validated that this works in iOS? I'm getting blank inAppBrowser page with pageContentUrl string rendered at the bottom of the screen
Jannis almost 4 years

@billy_comic: Not recently, no. inAppBrowser-plugin had some changes regarding Apple's depcrecation of UIWebview that might affect this. Anyone else running this on iOS recently?
Eann over 3 years

whats other method. ? I am not able to submit form in InappBrowser.. please advice some other methods
radkrish almost 3 years

@billy_comic I am facing a similar issue with Form Post, did you find any solution