Cordova InAppBrowser post form to url
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");
you can do it like this
var options = { email: 'test@email.com', 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.
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)); } );}}