Getting input value and save it to array

Question

I want to iterate through the table and save input values to the array, but I get js error:

Object doesn't support property of method 'find'

Here is my code:

function Elem(tex, check, r, c)
{
    this.text = tex;
    this.checkbox = check;
    this.row = r;
    this.column = c;
}

var Elems = [];

function fill()
{
    var table = document.getElementById("tab");
    for(var i=table.rows.length-1;  i>=2; --i)
    {
        for(var j=table.rows[i].cells.length-1; j>=1 ; j=j-2)
        {
            var check = $(table.rows[i].cells[j-1]).find('input'); 
            check = check.is(":checked");
            var ans = $(table.rows[i].cells[j]).find('input'); 
            ans = ans.val();
            var ans = new Elem(ans, check, i, j/2);
            Elems.push(ans);
        }
    }
}

And here is how my table looks:

...
<table id="tab">
<tr>
    <td rowspan="2">
        <strong>delete row</strong>
    </td>
    <td>
        <strong>checkbox info</strong>
    </td>
    <td>
        <strong>description</strong>
    </td>
</tr>
<tr>
    <td>
        <strong>delete column</strong>
    </td>
    <td>
         <input type='checkbox' name='delColumn_1'/>
    </td>
</tr>
<tr>
    <td>
        <input type='checkbox' name="delRow_1"/>
    </td>
    <td>
        <input type='checkbox' class='check' name="ele.check"/>
    </td>
    <td>
        <input type='text' name="ele.text" required="required"/>
    </td>
</tr>
</table>
...

And I want to get text value from ele.text and checkbox value from ele.check. I will be very grateful for help.

.find() is a jQuery method, meaning that you cannot use it without including the jQuery library. It's not a native DOM method. — ndugger
– ndugger, Commented Aug 26, 2014 at 13:27

Jeremy J Starcher · Accepted Answer · 2014-08-26 13:29:03Z

2

At best guess, it appears you are mixing traditional JavaScript and jQuery without understanding the connection.

Take the line:

var check = table.rows[i].cells[j-1].find('input'); //err

If you simply break this apart, piece by piece, you will eventually find the problem.

var check = table.rows[i]

Then, if returns a non-null value, add to it:

var check = table.rows[i].cells[j-1]

Than should also be non-null, so add the last bit to it.

var check = table.rows[i].cells[j-1].find('input'); //err

And that should error out, as there is no find method on a td element.

However, find is a well-known jQuery method so it is likely that you meant to

Include a reference to jQuery in your code
Change it to jQuery syntax
var check = $(table.rows[i].cells[j-1]).find('input');

Or, you could also look at using

table.rows[i].cells[j-1].querySelector("input");

Which I haven't tested, but should do what you want.

answered Aug 26, 2014 at 13:29

Jeremy J Starcher

24k6 gold badges56 silver badges75 bronze badges

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

1 Comment

MNie Over a year ago

Yes I mess a little bit, I use in other function jquery because I don't need to have index, and forget that find is a jQuery method. Thanks for detailed explanation! Also querySelector of course works ;)

WeSt · Accepted Answer · 2014-08-26 13:35:05Z

2

Find() is a method that is provided on elements by jQuery. If you want to use it, you have to first access the jQuery object.

$("#tab tr td").each(function() {
     var ans= $(this).find("input").val();
     // do stuff here
});

Small jsFiddle. You can find more details about the find method in the jQuery docs.

edited Aug 26, 2014 at 13:35

answered Aug 26, 2014 at 13:27

WeSt

2,7085 gold badges27 silver badges43 bronze badges

Collectives™ on Stack Overflow

Getting input value and save it to array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related