CODEWITHSUNDEEP
javascriptjquery
sxthomson
sxthomson

Reputation: 563

Trying to access some input tag values using Javascript / jQuery

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!

Upvotes: 0

Views: 363

Answers (1)

Sahil Muthoo
Sahil Muthoo

Reputation: 12496

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

Upvotes: 2

Related Questions