Javascript in TWIG getting data from inputbox id

Question

This script would have to get the inputbox value, where id="{{probe.probeId}}"

In this inputbox "{{probe.probeId}}" is getting data from the DB "probeID" when the value of the table column requires it. (If there is value, it shows it; if is empty, it lets you add a value; and the third option is if the value is null)

Then it has to compare this value with the max allowed value taken from the DB list where is stored

for (param in allparamArray)
{
var maxVal = param.ValorMaximo;
}

And then, when I put a value over the max value allowed (maxVal) in the inputbox, the cell will glow in red.

The problem is that when I put the "{{probe.probeId}}" in the script function document.getElementById(), it doesn't recognize the id value taken from the DB

How I can connect the javascript values with the ones taken by the twig table?

I was wondering if the answer given in here could be useful, but I don't know how to do it.

Here is an example (with the twig's fragment) of what I am doing: http://jsfiddle.net/wbh6T/2/

And it would be this simple without TWIG: http://jsfiddle.net/jBFHn/

The TWIG fragment is this:

{% for parameter in apparamlist %}
    {% if parameter.parameterId in probe.parameterliste|keys %}
         {% if probe.parameterliste[parameter.parameterId].ulockstatus ==2 %}
            <td style='background-color:red;text-align:center;' title="{{probe.parameterliste[parameter.parameterId].comentario}}"><input class="resultfield" size='8' type='text' value="{{probe.parameterliste[parameter.parameterId].resultado}}" name={{parameter.parameterId}} id="{{probe.probeId}}"/></td>
        {% else %}
            <td style='text-align:center;'><input class="resultfield" size='8' type='text' value="{{probe.parameterliste[parameter.parameterId].resultado}}" name={{parameter.parameterId}} id="{{probe.probeId}}" /></td>
        {% endif %}
    {% else %}
        <td>&nbsp;</td>
    {% endif %}
{% endfor %}

And the Javascript:

window.onload = function () {
    var textbox = document.getElementById("{{probe.probeId}}");
    for (param in allparamArray)
    {
        var maxVal = param.ValorMaximo;
    }

    addEvent(textbox, "keyup", function () {
        var thisVal = +this.value;

        this.className = this.className.replace(" input-error ", "");
        if (isNaN(thisVal) || thisVal > maxVal) {
            this.className += " input-error ";
            // Invalid input
        }
    });
};

function addEvent(element, event, callback) {
    if (element.addEventListener) {
        element.addEventListener(event, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + event, callback);
    } else {
        element["on" + event] = callback;
    }
}

Would this be a possible solution?-> Twig master usage

Answer 1

I like to avoid including Twig variables in my JavaScript, for a couple of reasons:

1. Tracking down the source of problems in your JavaScript is all of a sudden not limited to your JavaScript files. The problem could be in your Twig syntax or even in your controller logic.
2. This entails including JavaScript inline in your templates, which introduces all kinds of problems. Execution order and maintainability probably chief among them.

You could go for the FOSJsRoutingBundle solution that your mentioned, but I think that's overkill for this problem. Instead, I would consider using the new HTML5 spec for forms, which allows you to specify a regex pattern which the browser will validate the form input against. You could get the pattern for each form input in your controller and output it in Twig alongside the rest of your form markup.

Of course using the new and shiny means you run into problems with browser support. You can see information about browser support here. If you need to target browsers that don't have reliable support, you can check out Foundation's Abide component, or check around for shims, of which there are a few.