Radio Buttons and Checkbox list in TCPDF

pe

pedrorodrigues123 24 Oct, 2023

Hello Chronoforms,

In tcpdf i am using {data:fieldname} for the text boxes.
How can i use the data from the radiobuttons and from the checkboxes list?
Thank you.

pe

pedrorodrigues123 24 Oct, 2023

Also, if i wanted to add to my form a gps location map where people could define their cordinates, does the chronoform has some feature for it? Or do i have to program it?

pe

pedrorodrigues123 24 Oct, 2023

if i have to program it, how can i use typescript?

Max_admin 24 Oct, 2023

Data from any field is same to get:

{data:field_name}

Do you mean a Google Map location ?

Typescript needs to be converted to Javascript before you use them on a web page

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

pe

pedrorodrigues123 25 Oct, 2023

Yes! Like a feature of google maps. How can i do it?

Max_admin 25 Oct, 2023

1. Go to Google maps. In the Search Google Maps text box, type in the address of the location you want to display on your web page.

2. When the map appears, click on the Share icon.

3. Select the Embed tab on the Share window.

4. Click on Copy HTML.

5. Paste the HTML (<iframe code) in an HTML view in your Chronoforms v8 form

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

pe

pedrorodrigues123 25 Oct, 2023

Thats amazing! But i still cant make the user to "mark" the location he wants. Thats was the idea, is that possible?
And if yes, how do i get the value of the cordinates he will provide for tcpdf?

pe

pedrorodrigues123 26 Oct, 2023

Hello max, i figured out. I am using the openstreetmap API.
Now i need to fill a field automatically with the Address when the user marks a place in the map. I already have the map showing coordinates and the address as a text under the map. I wanted to print that information inside the field of the address.. How can i do it?

pe

pedrorodrigues123 26 Oct, 2023

Answer

Solved.

Max_admin 26 Oct, 2023

1 Likes

Great, could you please post how you solved it ?

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

rb

rbock 27 Oct, 2023

pedrorodrigues123, please tell us how you solved this.

pe

pedrorodrigues123 30 Oct, 2023

Basicly I created a new field box with the data inside, with html code. I couldnt print it to my chrono fields

rb

rbock 30 Oct, 2023

But how did you create the connection with openstreetmap? I would like to display data from CF7/8 on an openstreetmap.

pe

pedrorodrigues123 30 Oct, 2023

<!DOCTYPE html>
<html>
<head>
    <title>Escolher Localização e Exibir Morada</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <style>
        #map {
            height: 450px;
            width: 600px;
        }
    </style>
</head>
<body>
    <h2>Diga-nos o local da recolha:</h2>
    <div id="map"></div>
    <h4>Local da recolha</h4>
    <input type="text" id="recolha_input" name="recolha_input" value="N/A" /> <!-- Campo de entrada de texto editável -->

    <script>
        var map = L.map('map').setView([32.687740250326726, -16.79425047982721], 12);
        var marker;

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        map.on('click', function(e) {
            var latlng = e.latlng;
            if (marker) {
                marker.setLatLng(latlng);
            } else {
                marker = L.marker(latlng).addTo(map);
            }

            // Atualize o campo "Local da Fogueira"
            fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latlng.lat}&lon=${latlng.lng}&zoom=18&addressdetails=1`)
                .then(response => response.json())
                .then(data => {
                    if (data.display_name) {
                        var address = data.display_name;
                        var coordinates = `(${latlng.lat}, ${latlng.lng})`;
                        document.getElementById('recolha_input').value = `${address}, ${coordinates}`;
                    } else {
                        document.getElementById('recolha_input').value = 'N/A';
                    }
                })
                .catch(error => {
                    console.error('Erro ao obter o endereço:', error);
                });
        });
    </script>
</body>
</html>

Forums

Radio Buttons and Checkbox list in TCPDF