CODEWITHSUNDEEP
javascripthtmlinput
bagum setwan
bagum setwan

Reputation: 13

How to get input value (without ID) from table

I have an input tag on table : example : 

<table border="1" id="datatable">
<thead>
    <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <input type='text' name="a[]" value="a1">
        </td>
        <td>
            <input type='text' name="b[]" value="b1">
        </td>
        <td>
            <input type='text' name="b[]" value="c1">
        </td>
    </tr>
    <tr>
        <td>
            <input type='text' name="a[]" value="a2">
        </td>
        <td>
            <input type='text' name="b[]" value="b2">
        </td>
        <td>
            <input type='text' name="c[]" value="c2">
        </td>
    </tr>
</tbody>

I want to get value from input using javascript.
I have try : 

var x = document.getElementById("datatable").rows[1].cells;
alert(x[1].innerHTML);

but the result is :

<input type='text' value="a">

please help. thank you

Upvotes: 1

Views: 1034

Answers (3)

user2417483
user2417483

Reputation:

This is invalid html. Each input element should have a name attribute this is how the forms data is submitted. Then you could use value=document.querySelector("input[name='fred']").value;

Edit Since you are using brackets (and therefore sending back array value with same name) you will need to use:

// create array for values
a_s_array = [];
// get input values
a_s = document.querySelectorAll("input[name='a[]']");
// loop through elements
for( var x=0; x<a_s.length; x++ ) {
// store input value into array
   a_s_array.push( a_s[x].value );
}

Upvotes: 1

Jaydip kharvad
Jaydip kharvad

Reputation: 1100

You can try this jquery code:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

</head>
<body>
<table border="1" id="datatable">
<thead>
    <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <input type='text' name="a[]" value="a1">
        </td>
        <td>
            <input type='text' name="b[]" value="b1">
        </td>
        <td>
            <input type='text' name="b[]" value="c1">
        </td>
    </tr>
    <tr>
        <td>
            <input type='text' name="a[]" value="a2">
        </td>
        <td>
            <input type='text' name="b[]" value="b2">
        </td>
        <td>
            <input type='text' name="c[]" value="c2">
        </td>
    </tr>
</tbody>
<script>
    $(document).ready(function(){
        var td = $("#datatable").find('td');
        $.each(td, function() { 
            alert($(this).find('input[type="text"]').val()); 
        });
    });
</script>

</body>
</html>

Upvotes: 0

Ritesh Khandekar
Ritesh Khandekar

Reputation: 4005

Try this:-

var x = document.getElementById("datatable").rows[1].cells;
alert(x[0].children[0].value);

Upvotes: 0

Related Questions