---
title: "Adding Javascript (Advanced)"
slug: "adding-javascript"
updated: 2022-12-02T10:40:54Z
published: 2022-12-02T10:40:54Z
canonical: "help.infoodle.com/adding-javascript"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.infoodle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Adding Javascript (Advanced)

PLEASE NOTE

          

This is an advanced feature which infoodle does not provide support for directly. There are too many different things that could be done with Javascript for us to provide support, and every website is different. Please only use this feature if you have experience with Javascript.

For those who have experience of using Javascript, then you are able to add javascript to a form. This enables you to make the interactions with the infoodle form more flexible and create a more customised experience for your users.

The **[CSS Entry Box](/v1/docs/css-code-advanced)** in the form build area is where you are able to add the javascript. Because infoodle places the contents of this box in the header area, within `<style>` tags, then you can use this to your advantage by closing and reopening the style tags - and adding your Javascript in between. e.g.

```
</style>
<script>
//place your javascript code here
function userPageLoaded() {
  //called by infoodle once the page has been fully loaded.
}
</script>
<style>
```

---

Note that we have jquery available once the form is loaded. The final call after the form has been loaded and infoodle has setup everything it needs is to call the function **userPageLoaded()**, so put your code in this function to start any features you need.

This example shows you how to execute the code once all the associated files are loaded and will change the label that ends with `_town` to `State / Region`, and switch the state field to be after the city. Note: In general this isnt necessary because infoodle presents the address format according to the country of the site.

```
</style>
<script>
function userPageLoaded() {
    window.addEventListener( 'load', function(){
        $('.primary_address label[name*="_town"]').html('State / Region');
        $('.primary_address label[name*="_city"]').html('City / Town');
        var state = $('.primary_address label[name*="_town"]').parents('.entry_holder').detach();
        $('.primary_address label[name*="_city"]').parents('.entry_holder').after(state);
    });
}
</script>
<style>
```

---

Each part of the form is identified with classes, IDs and names in order for you to identify the specific area you want to work on. By inspecting the published form you will be able to find the ones you want.