Trying to access some input tag values using Javascript / jQuery

Question

I'm trying to get the values of some input tags for doing some validation before continuing. My form is located inside of a jQuery Dialog box of which the HTML is dynamically generated based on the number of elements within a JSON array like so -

if (testDialog === null)
{
    myTestDialogContentDiv += '<div id="TestDialog" style="padding-left: 0; top: 0px; left: 0px;">';
}

myTestDialogContentDiv += '<div id="TestDialogWarning" class="ClockInner"></div>';
myTestDialogContentDiv += '<div id="TestDialogText" class="ClockInner" style="position: relative;"></div>'; 
myTestDialogContentDiv += '<div class="TestDialogTxt"></div>';
myTestDialogContentDiv += '<form>'; //Start Form 
myTestDialogContentDiv += '<p><b>Routing Out:</b></p>';

if (data.routesout.length > 1)
{   
    for(i=0;i<data.routesout.length;i++)
    {           
        myTestDialogContentDiv += '<label for="route' + i + '">' + data.routesout[i].name + '(%)</label>';
        myTestDialogContentDiv += '<input onkeypress="validateKeypress(event)" type="text" name="route' + i + '" id="route' + i + '" value="' + data.routesout[i].percent + '" maxlength="5" size="8" class="ui-widget-content ui-corner-all">';
        myTestDialogContentDiv += '</br>'   
    }

}
else
{
    myTestDialogContentDiv += '<label>' + data.routesout[0].name + '(%)</label>';
    myTestDialogContentDiv += '<input type="text" name="route0" id="route0" disabled value="' + data.routesout[0].percent + '" maxlength="5" size="8" "class="ui-widget-content ui-corner-all">';
}

And this is my code for creating a Dialog box with the form data embedded in it, along with my "on submit" validation.

TestDialog = $("#TestDialog");
TestDialog.dialog({
    title: data.name,
    resizable: true,
    closeOnEscape: true,
    zIndex: 1000,
    dialogClass: 'outerGlow hideCloseX testDialog',
    buttons: {
            "Save":function() {
                //Need to check that all the fields add up to EXACTLY 100%
                var total = 0;

                for(var i=0; i< data.routesout.length; i++)                     
                {
                    total += ("#route" + i).val();
                }

                if (total !== 100)
                {
                    alert("NOT EQUAL TO 100!!!");
                }
                else
                {
                    //TODO - Add Requests to update objects

                    $(this).dialog("close");
                }
            },
            "Cancel": function() { $(this).dialog("close"); }
            }
});

I'm getting a Jscript error saying that .val doesn't exist for that element, when I try to use Jscripts own .value I get a NaN. I think it's something to do with the form technically being a child node? But nonetheless I'm stumped, any help would be great.

Also ignore any spelling mistakes or inconsistencies in my spellings of ids etc, I quickly changed it to Test for posting.

Thanks!

Sahil Muthoo · Accepted Answer · 2011-10-27 16:51:06Z

2

total += ("#route" + i).val(); should be total += parseInt($("#route" + i).val());

edited Oct 27, 2011 at 16:51

answered Oct 27, 2011 at 16:42

Sahil Muthoo

12.6k2 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Blazemonger Over a year ago

Good catch. Hands up if you've done this yourself in the past, everyone.

sxthomson Over a year ago

Doh! I've just noticed as well that I need to specify I'm using integers as total is becoming "0100"! Thanks man!

Sahil Muthoo Over a year ago

You should parse the value to an int. I'll update my answer.

Collectives™ on Stack Overflow

Trying to access some input tag values using Javascript / jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related