# Program Stage Custom Form Change Input Value

**URL:** <https://community.dhis2.org/t/program-stage-custom-form-change-input-value/46511>\
**Category:** Support - Assistance technique\
**Tags:** tracker\
**Created:** [14 March 2022 12:23 UTC](https://community.dhis2.org/t/program-stage-custom-form-change-input-value/46511 "2022-03-14T12:23:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![SalehAbbas](https://dhis2.b-cdn.net/user_avatar/community.dhis2.org/salehabbas/32/33343_2.png) [@SalehAbbas](https://community.dhis2.org/u/SalehAbbas)\
**Post date:** [14 March 2022 12:23 UTC](https://community.dhis2.org/t/program-stage-custom-form-change-input-value/46511/1 "2022-03-14T12:23:51Z")

</div>

Dears,

Were working on different ways to utilize integration methods with different systems and currently I have problem using the **custom form in the program stage** where we need to change the **input** value from JavaScript code to build on a simple connection call through API to get, for example a Lab result from another system and store/change input value with coming data.

As a concept, we were able to use the following code example using custom form in the **program form** but it did not work on the program stage form. I tried to change the input value using angular and it worked using this code:

```auto
<p><button ng-click="currentEvent.jm9OF9FVMYp=currentEvent.jm9OF9FVMYp+1">update White blood cells Angular</button></p>

```

**How do we get to access to this input id (currentEvent.jm9OF9FVMYp) from JavaScript code** **to get data from API then change input field value (Maybe using Angular inside JavaScript or JavaScript code access to Angular input values)**?

so I create this JavaScript code below, **but with this code we can change input value without change hidden value** as you will see in screenshot

```auto
<p><button onclick="updateLabRed()">update red cell count JavaScript</button></p>
<script>
var x = 12;
function updateLabRed() {
    x++;
    applyChangeRedCell(x);
}
function applyChangeRedCell(value) {
    let nodes = document.querySelectorAll('[id="Hx0Y0dlPELF-viVD2imM6u6-val"]');
    if(nodes && nodes.length) {
        nodes.forEach(item => {
console.log(item);
            item.value = value;
        });
    }
}
applyChangeRedCell(x);
</script>

```

**Using JavaScript**  
A1:

 ![A1](https://dhis2.b-cdn.net/uploads/default/original/3X/3/e/3e4161996ca657a2059f474618c256d2c222bb8e.png)  
A2:  
 ![A2](https://dhis2.b-cdn.net/uploads/default/original/3X/7/8/783625446b2a003e3590d97942a601acea532c1d.png)  
A3:  
 ![A3](https://dhis2.b-cdn.net/uploads/default/original/3X/a/8/a82a34e1acf2e3ca6d8f2d4b65cc6b674c91fa27.png)

**Using Angular**  
B1:

 ![B1](https://dhis2.b-cdn.net/uploads/default/original/3X/f/6/f64b16659110d3217abb5031c89bb0d03d4bc830.png)  
B2:  
 ![B2](https://dhis2.b-cdn.net/uploads/default/original/3X/b/2/b2e81c9b4058b30d4e2086ce83a519b2596a4827.png)  
B3:  
 ![B3](https://dhis2.b-cdn.net/uploads/default/original/3X/5/a/5afcf8379d25b1449490cf3b4449f72c98f4bc0f.png)  
B4:  
 ![B4](https://dhis2.b-cdn.net/uploads/default/original/3X/3/c/3c333b91525a74a9d5f81b33b2ad162df9dfcdd0.png)  
ng)

---

<div class="post-metadata">

**Author:** ![Gassim](https://dhis2.b-cdn.net/user_avatar/community.dhis2.org/gassim/32/35347_2.png) [@Gassim](https://community.dhis2.org/u/Gassim)\
**Post date:** [14 March 2022 20:46 UTC](https://community.dhis2.org/t/program-stage-custom-form-change-input-value/46511/2 "2022-03-14T20:46:16Z")

</div>

Hi

> [@SalehAbbas](#):
>
> **How do we get to access to this input id (currentEvent.jm9OF9FVMYp) from JavaScript code**  **to get data from**

I’m not sure I follow the purpose of getting access to this input id? Why don’t you get the value directly from the API where ever this input field is saving the info to? As for changing the input you can use program rules.

---

<div class="post-metadata">

**Author:** ![SalehAbbas](https://dhis2.b-cdn.net/user_avatar/community.dhis2.org/salehabbas/32/33343_2.png) [@SalehAbbas](https://community.dhis2.org/u/SalehAbbas)\
**Post date:** [15 March 2022 07:44 UTC](https://community.dhis2.org/t/program-stage-custom-form-change-input-value/46511/3 "2022-03-15T07:44:09Z")

</div>

> [@Gassim](#):
>
> I’m not sure I follow the purpose of getting access to this input id? Why don’t you get the value directly from the API where ever this input field is saving the info to? As for changing the input you can use program rules.

Thanks @Gassim can you give me an example about using API with program rule ?

---

<div class="post-metadata">

**Author:** ![Gassim](https://dhis2.b-cdn.net/user_avatar/community.dhis2.org/gassim/32/35347_2.png) [@Gassim](https://community.dhis2.org/u/Gassim)\
**Post date:** [15 March 2022 20:56 UTC](https://community.dhis2.org/t/program-stage-custom-form-change-input-value/46511/4 "2022-03-15T20:56:10Z")

</div>

So for example you want the user to input a value into the form and this value will be sent to another system? Why not assign the value to a data element and then request it using the API? Sorry @SalehAbbas, I just need to understand why are you trying to get the value from the input field rather than the metadata object?

Thank you!

---

<div class="post-metadata">

**Author:** ![SalehAbbas](https://dhis2.b-cdn.net/user_avatar/community.dhis2.org/salehabbas/32/33343_2.png) [@SalehAbbas](https://community.dhis2.org/u/SalehAbbas)\
**Post date:** [15 March 2022 21:25 UTC](https://community.dhis2.org/t/program-stage-custom-form-change-input-value/46511/5 "2022-03-15T21:25:01Z")

</div>

Thanks Again @Gassim ,

I try to get **patient personal information**  **from government system** like ( **Ministry of Interior** ) just when user fill patient id and press a button then get all patient data and fill it on form input.

another example:  
I need get all patient lab result from lab and store it on a patient stage same before using button to get all data and fill it on form input filed.

this allow to us to help users to use DHIS2 in quick way without build 3-party system, just inside custom form in DHIS2 and make DHIS2 powerful in connecting with other system.

I suggest this ticket below for DHIS2 team but still no answer

> [@New attribute type (Advanced Function) for integration with external systems](https://community.dhis2.org/t/new-attribute-type-advanced-function-for-integration-with-external-systems/45210):
>
> Proposed new Value Type: Function Hello everyone we were thinking of a missing but important “advance user” feature in DHIS2 which could use basic coding to integrate with other external system in order get data into field as values. Since we can get values from “attribute id” and change/add using this proposed function area (see attached examples). The idea is that we don’t need to use custom-form to achieve this. For example, we used this methodology while doing pilot testing on one of our…

---

<div class="post-metadata">

**Author:** ![Gassim](https://dhis2.b-cdn.net/user_avatar/community.dhis2.org/gassim/32/35347_2.png) [@Gassim](https://community.dhis2.org/u/Gassim)\
**Post date:** [23 March 2022 16:58 UTC](https://community.dhis2.org/t/program-stage-custom-form-change-input-value/46511/6 "2022-03-23T16:58:42Z")

</div>

I understand your situation @SalehAbbas!

It is possible to create a custom dhis2 app which would perform the API request when the user clicks on the button; however, I don’t understand why do you need the user to click the button to fill in data that already exists as it is possible to send API requests to create/update/delete these values?

I really advice you to build upon a custom dhis2 app instead. (: