How to access content of input fields?

<div id='div1'> <input type='text' name='one'> </div>

<div id='div2'> <input type='text' name='two'> </div>


Is there a way to access what a user has input into the fields before the form is submitted to the server?

To display

alert(document.getElementById(one).innerHTML);
alert(document.getElementById(two).innerHTML);

If a person has input Cat and a Dog.  Or to display nothing if nothing entered.

I have tried the above and I keep getting nulls.
goodkAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
You get null because your elements don't have an id specified.
Also input elements don't have innerHTML, they have value.
Also, getElementById receives a string.

Change it to this:
<div id='div1'> <input type='text' id="one" name="one"> </div>
<div id='div2'> <input type='text' id="two" name="two"> </div>

Open in new window

And the javascript should go like:
alert(document.getElementById('one').value);
alert(document.getElementById('two').value);

Open in new window

1
Alexandre SimõesManager / Technology SpecialistCommented:
As a side note,
your issue here shows that you're lacking some core JavaScript knowledge.

I would advise you to sharpen your JavaScript before going any further.
Here are some very good online courses you can take:
http://www.pluralsight.com/courses/javascript-from-scratch
http://www.pluralsight.com/courses/javascript-good-parts

After these you can safely jump to the most complex ones and even read the "bible":
http://www.manning.com/resig/

JavaScript looks dumb and simple but it's a very complex language to master. It requires a lot of time an effort to fully understand it. Face it as such.

Cheers!
0
goodkAuthor Commented:
alert(" cell =  " + document.getElementById(xTable).rows[1].cells[1].value);
        alert(" cel2 =  " + document.getElementById(xTable).rows[1].cells[2].value);

Is this possible? Or how to see the values of the cell?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Alexandre SimõesManager / Technology SpecialistCommented:
My friend, HTML is no MS Excel :)
Tables are defined (simply put) by <tr> and <td> and it's based on these elements that you have to figure out how to reach them.

Also these "cell" elements don't have a value, they have an innerHTML.
They are not input controls, they are html containers.

If you assign an id to a specific td, you'll be able to access its contents like:
document.getElementById('myTdId').innerHTML

Open in new window

Otherwise you'll have to parse the DOM in a more complex way, probably using jQuery to ease the pain.
0
goodkAuthor Commented:
So if in a cell I have a DIV and inside a DIV I have a INPUT then can I not access what a user type in various table cells?
0
Alexandre SimõesManager / Technology SpecialistCommented:
Sure you can.
Can you give me a concrete example of what you want to do?

Because you can simple get all the values on a column, or get them by row, ... whatever.
The way to achieve it is different.
0
goodkAuthor Commented:
I thought i did,

I have several input text fields inside divs and the user is entering data in each of them on a form.

I want to check all or few field values before submitting the form

thanks
0
Alexandre SimõesManager / Technology SpecialistCommented:
This is a very simple example that uses jQuery to query the DOM and get all the textboxes inside a table a perform a validation on each one of them.
I tried to mimic the HTML so that you can somehow relate.
http://jsfiddle.net/AlexCode/9j829cpf/

HTML
<table>
    <tr>
        <td>Row 1</td>
        <td><div id="div1"> <input type="text" name="one"/> </div></td>
    </tr>
    <tr>
        <td>Row 1</td>
        <td><div id="div2"> <input type="text" name="two" /> </div></td>
    </tr>
</table>

<input type="submit" onclick="validateInput()" value="submit" />

Open in new window

JavaScript
function validateInput(){
    var isValid = true;
    
    $('table input[type=text]').each(
        function(idx,item){
            if(!isValid) return;
            
            var $item = $(item),
                val = $item.val();
            
            // do your validation here
            isValid = (val >= 100);
            console.log(isValid);
        }
    );
    
    if(isValid){
        // do something or do nothing, form will be submitted
        alert('All good, for will be submitted');
    } else {
        // show some kind of error to the user
        alert('Some values are lower than 100');
    }
    
    return isValid;
}

Open in new window

1
goodkAuthor Commented:
I am not using jquery!!
0
Alexandre SimõesManager / Technology SpecialistCommented:
Here's the demo code without jquery

I only changed the JavaScript
function validateInput(){
    var isValid = true;
    
    var tblElement = document.getElementById('mytable'),
        txtElements = tblElement.getElementsByTagName('input');
    
    for(var i=0; i<txtElements.length; i++){
        if(!isValid) break;
        
        var item = txtElements[i],
            val = item.value;
        console.log(item);
        // do your validation here
        isValid = (val >= 100);
    }
    
    if(isValid){
        // do something or do nothing, form will be submitted
        alert('All good, form will be submitted');
    } else {
        // show some kind of error to the user
        alert('Some values are lower than 100');
    }
    
    return isValid;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
goodkAuthor Commented:
Thank you so much
0
goodkAuthor Commented:
 wanted to look up inputs only inside a certain TR and TD ids.  How can I do that?  thanks

function validateInput(xTable) {
    var isValid = true;

    var tblElement = document.getElementById(xTable),
         tblTrElement = tblElement.getElementById("TRNewRecord"),
            txtElements = tblTrElement.getElementsByTagName('input');

    for (var i = 0; i < txtElements.length; i++) {
        if (!isValid) break;

        var item = txtElements[i],
            val = item.value;
        // alert(item);
        alert(val);
        // do your validation here
        //   isValid = (val >= 100);
        isValid = isNumber(val);
        alert(" isvalid= " + isValid)
    }

    if (isValid) {
        // do something or do nothing, form will be submitted
        alert('All good, form will be submitted');
    } else {
        // show some kind of error to the user
        alert('Some values are lower than 100');
    }

    return isValid;
}


 <table id="mytable">
            <tr id ="TRNewRecord">
                <td>
                    Row 1
                </td>
                <td>
                    <div id="div1">
                        <input type="text" name="one" />
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    Row 1
                </td>
                <td>
                    <div id="div2">
                        <input type="text" name="two" />
                    </div>
                </td>
            </tr>
        </table>

Open in new window

/
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.