Sending form with cordova-plugin-inappbrowser

ionic-v1
1

Hello, I have a html form in a web, like this one:

<form name="theform" action="https://some.page.com/" method="POST" >
   <input type="hidden" name="one" value="123">
   <input type="hidden" name="two" value="456">
   <input type="submit" value="Submit">
</form>

It works perfectly redirecting you to an url, and passing the input’s values, now I’m building the same page with ionic, and I would like to have the same behavior opening my url with “cordova-plugin-inappbrowser” and also passing the parameters, is there any way to do that?

*I doesn’t matter what happens after the url is open, I just need to send the parameters and open the page.

Thanks in advance.

2

If you have control over the page which the form is submitted to, you should setup an API for it and call it with HTTP. I think that would be the best approach, otherwise try this http://stackoverflow.com/a/41185803

3

…so, you need to open the “action” with system browser?

4

I don’t have control over the page, that is the main problem, but I solved it whit that link you posted, however the page opens using target “_blank” but not with “_system” which would be perfect for me, any idea about why it doesn’t work?

Works: window.cordova.InAppBrowser.open(pageContentUrl, “_blank”);
Doesn’t: window.cordova.InAppBrowser.open(pageContentUrl, “_system”);

5

Yes, and send the parameters

6

I open link with javascript with the command:

window.open(encodeURI(url), '_system', 'location=yes');

and it works for me…

8

Could you please post your code? I tested again and still the same problem, working whit _blank but not with _system

var pageContent = '<html><head></head><body><form id="theForm" action="https://www.google.com" method="POST">' +
    '<input type="hidden" name="one" value="' + "1" + '">' +
    '<input type="hidden" name="two" value="' + "2" + '">' +
    '</form> <script type="text/javascript">document.getElementById("theForm").submit();</script></body></html>';
var pageContentUrl = 'data:text/html;base64,' + btoa(pageContent);

window.cordova.InAppBrowser.open(pageContentUrl, "_system");
9

Hi can you please provide little details, I am trying the above code its not working.

10

Hi sunilrawat.
Did you manage to get yours working at all? I am trying to implement posting a from via InAppBrowser but no success.
Any help would be great.

11

Yes, Its working now I have successfully Implemented it after lots of struggle.

You need to pass all required parameters in InAppBrowser and then submit a form using js. then it will work.

var fields = {
key: appConfig.payUkey,
txnid: txnId,
amount: studentFeeData.total.amount,
productinfo: productInfo,
firstname: stuData.guardian,
email: stuData.emailId,
phone: stuData.contactNumber,
surl: appURL + ‘payment_response.php’,
Furl: appURL + ‘payment_response.php’
}

Then

if (appConfig.isDevice) {
console.log(‘Run in device’);
fields.surl = ‘’;
fields.Furl = ‘’;
openInAppBrowser(fields);
}

Then
var openInAppBrowser = function(fields) {
//Post all required paremeters to the payu
iabRef = window.open(‘payuBiz.html’, ‘_blank’, ‘location=no’);
iabRef.addEventListener(‘loadstart’, function() {});
iabRef.addEventListener(‘loadstop’, function(event) {//Handle response from payment gateway here
}

1 Like
12

Thanks for your reply! Really appreciate your help.

Can you please give me some more clarification with this part of your code:

var openInAppBrowser = function(fields) {
//Post all required paremeters to the payu
iabRef = window.open(‘payuBiz.html’, ‘_blank’, ‘location=no’);
iabRef.addEventListener(‘loadstart’, function() {});
iabRef.addEventListener(‘loadstop’, function(event) {//Handle response from payment gateway here
}

How do I post all the req parameters to the url which I am posting to? (i.e. how does the ‘fields’ object get utilised in this function.

Also, in iabRef = window.open(‘payuBiz.html’, ‘_blank’, ‘location=no’); is the payuBiz.html your html which holds your form to be posted or is that supposed to be the url you are wanting to open?

My original hidden form which I am wanting to post looks like this:

    <form name="vcsPaymentForm" id="vcsPaymentForm" role="form" method="POST" action="https://www.XXXXX.com">
        <input type="hidden" name="p1" value="{{vcsDetails.user_id}}">
        <input type="hidden" name="p2" value="{{vcsDetails.reference}}">
        <input type="hidden" name="p3" value="{{vcsDetails.description}}">
        <input type="hidden" name="p4" value="{{vcsDetails.amount}}">
        <input type="hidden" name="p10" value="{{vcsDetails.cancelled_url}}">
        <input type="hidden" name="Hash" value="{{vcsDetails.hash}}">
        <input type="hidden" name="UrlsProvided" value="{{vcsDetails.urls_provided}}">
        <input type="hidden" name="ApprovedUrl" value="{{vcsDetails.redirect_url}}">
        <input type="hidden" name="DeclinedUrl" value="{{vcsDetails.redirect_url}}">
    </form>
13

Yes right

Juts use ng-repeat to get all parmeters to html as hidden filed and post them using js.

I am posting html here but its does not allowed

html
html1600×900 197 KB

1 Like
14

Woooo!! It works!!
Thank you so much for your help and code.

15

Cool, glade to know its working for you…