How to get field value in URL

Dick Honing

I'm trying to get a field's parameter in a URL. In the URL Parameters for the Link it is now only possible to specify a Value, whereas I would like to pass a field's value. I was told I need some javascript to get this working. Unfortunately, I'm a simple FileMaker developer and not entirely up to speed with Javascript (yet). Thanks in advance for your help.

jbenguira

Hey Dick

Please check our video tutorials here
https://academy.appdrag.com/

Some concepts like passing parameters are explained in video + code

Daniel Mulroy

Hey Dick, really cool that you're making the jump from FileMaker to AppDrag - I can see why it appealed to you!

If I understand right... you're trying to have a user fill out a field, then later retrieve that field's value to put it in the parameters of a URL (for a GET request?)

AppDrag loads a basic version of jQuery with their pages (2.2.4) - you can check out the documentation and it's really helpful for doing things like selecting field values.

The code will be something like this:

$("#id-of-button-user-will-click").click(function () { // Select the 'search' button and assign a function to run upon clicking
    var importantParameter = $("#id-of-field-with-value").val(); // Selects the field with the user's input and gets the value of the text entered with .val()
    var apiUrl = "http://www.site.com/api/endpoint"
var settings = {
        "url": apiUrl,
        "data": {
            "nameOfParameterApiExpects" : importantParameter
        },
        "dataType": "json", // NOTE this is not included in the documentation, but I use it to avoid having to parse JSON responses from the server each time... :)
        "method": "GET",
        "async": true,
        "crossDomain": true,
        "processData": true
    };
    $.ajax(settings).done(function (response) { // ajax = request for server content, using the variables stored in settings.
        console.log(response); // Log the response to the console.
    });
}

You should note that if you click the "Doc" button on the right side of your API function's page, it will take you to a page that has sample code (pretty much exactly what I copy/pasted above, minus the selection of the variable from the field).

I highly recommend checking that out, because you can fill out parameters and it will show you the right code implementation of that. VERY useful, a hidden gem of AppDrag.

Dick Honing

@jbenguira I did go through the AppDrag overview and watched most of the video tutorials when I started evaluating AppDrag ... but when I came to the end of of Episode 5, I just copied and pasted the code to test it out and did not realise that this was actually te part I was going to need

Dick Honing

@Daniel-Mulroy Hi Daniel, this is exactly what I was looking for! Thanks for taking the time to help me out, completing the code and providing comments as well. Really appreciated and worth at least a beer if we ever meet in real life

Dick Honing

@Daniel-Mulroy Hi Daniel, one more question: am I right in assuming that I've got to put this code into a JQuery Source Code embedded element? And if so, can you see what I might have done wrong in this code:

    $("3698444").click(function() { // Select the 'search' button and assign a function to run upon clicking
        var importantParameter = $("3699898").val(); // Selects the field with the user's input and gets the value of the text entered with .val()
        var apiUrl = "https://ecxs-225c83.appdrag.site/api/Find"
        var settings = {
            "url": apiUrl,
            "data": {
                "name": importantParameter
            },
            "dataType": "json", // NOTE this is not included in the documentation, but I use it to avoid having to parse JSON responses from the server each time... :)
            "method": "GET",
            "async": true,
            "crossDomain": true,
            "processData": true
        };
        $.ajax(settings).done(function(response) { // ajax = request for server content, using the variables stored in settings.
            console.log(response); // Log the response to the console.
        });
    });

}, false);

</script>

Daniel Mulroy

Hi Dick,

Try to enclose your entire code with the triple backticks (`) for better formatting. Glad my previous answer helped.

Can you share the HTML for the search input box?

if you have something like <input id="3698444">, you need to select it with $("#3698444"). The hash at the front tells jQuery it's looking for an id, as opposed to an element or css class.

To troubleshoot, you can use the developer tools console and type in $("#id here").val() until you get the contents of the input field in the console... then you know it should work in the script!

Dick Honing

@Daniel-Mulroy Hi Daniel, thanks again and here's the url to the test page with search input box.

Dick Honing

@Daniel-Mulroy this time with the url ... https://ecxs-225c83.appdrag.site/My-Account.html

Daniel Mulroy

Hi Dick,

You need to add an id to your input field in order to be able to select it later. I don't work for AppDrag, I'm just trying to help you out, so don't take this the wrong way.... but if you're going to be doing this kind of operation/custom work again in the future, I strongly recommend you review some online introductions to jQuery and how it works!

Also, if you can post the snippets of javascript and HTML when you ask a question, that would be very helpful.

From the link on your site, I see you haven't added an identifier to your input form, so jQuery doesn't know how to select the data in that form.

To do this, click on the element, select "Identification (Advanced)" on the bottom, and add an "ID" in the top field.

So, if you were to put "ID-HERE" in that field, then you can select it in jQuery using $("#ID-HERE")

Note the "#" at the beginning - that is how you tell jQuery to look for a matching ID.

Dick Honing

@Daniel-Mulroy Hi Daniel, thanks again for taking your time to try to help me out here.

Perhaps a little background of where I'm coming from. I'm a FileMaker Developer mainly building and maintaining ERP systems for manufacturing companies. So my know-how is mainly focused around building databases, interfaces and linking to other systems via SQL and API's. Up to now, I outsourced all web portals to external (mainly PHP) programmers. The problem with this, is that it takes about just as much time to explain them what is required than to build them.

Since recent times, the (what I call) Rapid Web App Development tools have become much more evolved and now start to look like what I'm used to in FileMaker. So now I'm evaluating a few to see which appeals most to me. And so I've ended up with AppDrag. I went through the online documentation and instruction movies and got to build my own API functions and get the data in web pages. I really like the API First Design approach in AppDrag!

Then I wanted to do something which is really basic in FileMaker: enter some text in a input field, do a search in a database and display the results. And this is where I ran into (for me) a brick wall and apparently have to start (hard) coding. And since I'm not (yet) familiar with this, I'm not getting where I want to go ...

Long story short: I know have to decide whether I need to learn jquery/javascript or whether I can find somebody to outsource this to. I'm going to book some time with AppDrag's Accelerator Team and hopefully they will be able to help me out here.

Thanks again, enjoy the rest of the day and have a nice weekend!

best regards - Dick

Thomas D

@Dick-Honing I've been where you are, started with setting up and managing CMS systems and connect widgets and plugins using admin interfaces. But as soon as you need to do anything custom, which is basically a requirement by clients, then it starts to pile up. It took me several years to be proficient in JS/Node and you don't have time for that, the market is changing too quickly. If I where you, I'd hire a full-time Javascript/Node developer and make step-by-step usage descriptions that he can use to build what you need for your clients. If you can't afford one, you can hire freelancers on a project or hourly basis.

REMINDER

How to get field value in URL