link js variable to hidden input in form?

Hello everyone,

I have a web app, and useing Outsys11.

I need to ge the value of a javaScript variable. The documentation for the function states:
"

<script type="text/javascript">
  var deviceSessionId = OpenPay.deviceData.setup("formId", "deviceIdHiddenFieldName");
</script>

The formId parameter receives the id from the form that contains the charge information that will be send to your server. It indicates to the library that this form is where you will add a hidden field with the device_session_id.

ThedeviceIdHiddenFieldName parameter, gets the hidden field name where device_session_id be will be stored. This is important if you plan to get the value of the hidden field and send it through a submit.  "


So my script looks like this:


"OpenPay.setSandboxMode(true);
var deviceDataId = OpenPay.deviceData.setup(""DoctorForm.Id"", ""Device_session_id"");"


Now, I load that script using the RunJavaScript action from the httpHandler inside the flow of my form. And I think I have a hidden value in the form (see image). But how can I make it so that the calue of that JS var goes into the hidden var of the form? The hidden var is linked to a request var of a web service. I need to send the WS several things, including this device_session_id.....

Thanks!

Hi Ulises,

If all you need to do is set the value of that input, you can use something like this:

document.getElementById('" + device_session_id.Id + "').value = deviceDataId;

This is assuming that deviceDataId is just a simple text value.

Hi Ulises,


I don't know if I understand what you need.

1. Do you want to get the input id inside your js?

You get through the runtime property
like this:

"OpenPay.setSandboxMode(true);
var deviceDataId = OpenPay.deviceData.setup('"+DoctorForm.Id+"', '"+Device_session_id.id+"');"


2. If you need get the input value, you can try this

"var inputVal = document.getElementById('"+Device_session_id.id+"').value;"

and

"OpenPay.setSandboxMode(true);
var deviceDataId = OpenPay.deviceData.setup('"+DoctorForm.Id+"', inputVal);"


3. Do you want send deviceDataId to server action ? 

You can use FakeNotifyWidget from RichWidgets. 


Regards

Thank you both for your answers, so my writting of the JS was a bit off, it's now corrected, however, I'm still unable to catch the value of the var in the form to later set it to the response of a WS.

So, here's what I have:

A preparationFlow for a CardForm, in such preparation, I have the corrected JS which loads the libraries:

SyntaxEditor Code Snippet

"<script type=""text/javascript"" src=""https://resources.openpay.mx/lib/openpay-data.v1.min.js""></script>

<script type=""text/javascript"" src=""https://openpay.s3.amazonaws.com/openpay.v1.min.js""></script>"


A CardForm with inputs of a credit card (name, CardNumber, expiration....etc). One of the inputs is a hidden text input called Device_session_id and its associated variable is CardForm.Record.Device_session_id,with properties visible: true and style: "display: none".


A submit button at the end of the form with the JS:

SyntaxEditor Code Snippet

"OpenPay.setSandboxMode(true);
var deviceSessionId = OpenPay.deviceData.setup('"+DoctorForm.Id+"', '"+Device_session_id.Id+"');
"

According to the documentation "The --Device_session_id.Id-- parameter, gets the hidden field name where device_session_id be will be stored. This is important if you plan to get the value of the hidden field and send it through a submit."

Then in the actionFlow of that screen, I have an assign like this:

CardRequest.Card_number
= CardForm.Record.CardNumber
.
... same for all the CardForm inputs including
.
CardRequest.Device_session_id
= CardForm.Record.Device_session_id


Because I have a WS to create the card in an external payment system which has the request like this:

{
   "card_number":"4111111111111111",
   "holder_name":"Juan Perez Ramirez",
   "expiration_year":"20",
   "expiration_month":"12",
   "cvv2":"110",
   "device_session_id" : "kR1MiQhz2otdIuUlQkbEyitIqVMiI16f"
 }


Everything is set, except the device_session_id which is supponsed to be generated in the call to OpenPay.deviceData.setup('"+DoctorForm.Id+"', '"+Device_session_id.Id+"');

Where am I missing the assignment of that variable??

Thanks!

So, just to make sure the flow is clear:

 - the user opens the page with the form;

 - a webservice is called and you get a variable from it that is set to a hidden input;

 - the user submits the form, and you need that variable in your screen action;

Have you managed to debug and see where the value is being lost? Can you see it in the input in the HTML before you submit the page to the server?

Hello Alfonso,


The Webservice is called after the variable value is obtained, it is needed in the REST call. So the flow is:

1) A JS library is loaded in the preparation of the screen which contains the form to be filled by the user

2) The page opens with the form and the user fills it with all the data that will be needed to call the POST REST W.S. except for 1 item, which is the device_session_id. 

That item is supposed to be obtained calling the function:

"OpenPay.setSandboxMode(true);
var deviceSessionId = OpenPay.deviceData.setup('"+DoctorForm.Id+"', '"+Device_session_id.Id+"');
"

I don't know how to get that value and then place it in the Post Call:

{
   "card_number":"4111111111111111",
   "holder_name":"Juan Perez Ramirez",
   "expiration_year":"20",
   "expiration_month":"12",
   "cvv2":"110",
   "device_session_id" : "kR1MiQhz2otdIuUlQkbEyitIqVMiI16f"
 }


Where do I put that JS call for deviceSessionID? in the submit button? in a hidden field? what do I need to do to get that value in a local var which then I'll use to create the POST call?

Solution

So the user fills out a form, then you need to call an OpenPay JS method to get a variable, and then you need to go to the server to make your REST call.

I would do something like this:

1. Have the form submit button call a Javascript function (not go to the server) that does something like this:

OpenPay.setSandboxMode(true);
var deviceSessionId = OpenPay.deviceData.setup('"+DoctorForm.Id+"', '"+Device_session_id.Id+"');document.getElementById('" + device_session_id.Id + "').value = deviceSessionId;

So the function fetches your deviceSessionId, and then puts it in a hidden input.

Then make it click on a hidden button that submits the form to the server, and inside that server action you'll have access to the entire form, both the user data and the hidden field that you just filled out. Something like

document.getElementById('" + Your_Hidden_Button.Id + "').click();

Let me know if I misunderstood or if you have problems implementing this.

Solution

Yes!, thank you Alfonso, it worked.

Glad to hear it Ulises! Let us know if you have any other issues.