using javascript and a table to “select” a row which passes using post method

Question

Here's a jsfiddle which is probably the easiest way to see what I'm trying to do:

In place of a regular radio form option, I am needing to use a table where the needed row could be selected and that information will be passed on using the post method. I'd also like the selected row to change background color. My attempts are not working, however.

Here is the javascript I'm using:

    function select_check(id2check) {
        var x = document.getElementById(id2check).checked;
        if(!x) {
                document.getElementById(id2check).checked = true;
        }
    }   
  function changeBackground(id2check) {
   document.getElementById(id2check).style.bgColor = "#346";
  }

Here is the html:

<form name="carry" action="" method="post">
<table>
    <tr>
        <th>First Name</th><th>Middle Name</th><th>Last Name</th>
    </tr>
    <input type="radio" style="visibility:hidden" name="person" id="jake"> 
    <tr class="table_link" onclick="select_check(jake)">
        <td>Jake</td>
        <td>Douglas</td>
        <td>Westbrook</td>
    </tr>
    <input type="radio" style="visibility:hidden" name="person" id="jonathan"> 
    <tr class="table_link  table_even" onclick="select_check(jonathan)">
        <td>Jonathan</td>
        <td>Thomas</td>
        <td>Ferrel</td>
    </tr>
    <input type="radio" style="visibility:hidden" name="person" id="nick"> 
    <tr class="table_link" onclick="select_check(nick)">
        <td>Nick</td>
        <td>Lee</td>
        <td>Hollison</td>
    </tr>
    <input type="radio" style="visibility:hidden" name="person" id="bruce"> 
    <tr class="table_link  table_even" onclick="select_check(bruce)">
        <td>Bruce</td>
        <td>Jay</td>
        <td>Merriweather</td>
    </tr>
</table>
<div id="submit_buttons">
    <input name="submit" type="submit" class="form_button" value="submit">
</div>
</form>

Answer 1

If you can consider using jQuery , the task you want would be as easy as

$(document).ready(function(){
    $("td").click(function(){
        $("tr").removeClass("clicked");
        $(this).parents("tr").addClass("clicked");
    });

    $("#submit_buttons input").click(function(){
        var fname = $("tr.clicked").children("td:nth(0)").html();
        var mname = $("tr.clicked").children("td:nth(1)").html();
        var lname = $("tr.clicked").children("td:nth(2)").html();
        //do whatever you want with these three variables            
    });
});

You can see a jFiddle here

Answer 2

Found various problems:

• jsfiddle not set up to work with inline handlers (use nowrap)
• should pass a string to your function to use as id (use quotes)
• you were changing backgroundColor of the radio input, not the TR
• you were using bgColor
• you didn't call changeBackground()

html changes:

<tr class="table_link" onclick="select_check('jake');changeBackground(this)">

js changes:

function changeBackground(elem) {
  elem.style.backgroundColor = "#346";
}

Full code: https://jsfiddle.net/o3rm1vmx/6/

The rest is up to you ;)

Answer 3

If you want to do this in pure js this is how you can do it

<form name="carry" action="" method="post">
<table>
    <tr>
        <th>First Name</th><th>Middle Name</th><th>Last Name</th>
    </tr>
    <input type="radio" style="visibility:hidden" name="person" id="jake-inp"> 
    <tr id="jake" class="table_link" onclick="select_check('jake')">
        <td>Jake</td>
        <td>Douglas</td>
        <td>Westbrook</td>
    </tr>
    <input type="radio" style="visibility:hidden" name="person" id="jonathan-inp"> 
    <tr id= "jonathan" class="table_link  table_even" onclick="select_check('jonathan')">
        <td>Jonathan</td>
        <td>Thomas</td>
        <td>Ferrel</td>
    </tr>
    <input type="radio" style="visibility:hidden" name="person" id="nick-inp"> 
    <tr id='nick' class="table_link" onclick="select_check('nick')">
        <td>Nick</td>
        <td>Lee</td>
        <td>Hollison</td>
    </tr>
    <input type="radio" style="visibility:hidden" name="person" id="bruce-inp"> 
    <tr id='bruce' class="table_link  table_even" onclick="select_check('bruce')">
        <td>Bruce</td>
        <td>Jay</td>
        <td>Merriweather</td>
    </tr>
</table>
<div id="submit_buttons">
    <input name="submit" type="submit" class="form_button" value="submit" onclick="showInput();">
</div>
</form>
 <p><span id='display'></span></p>
<script>
function select_check(id2check) {
        var x = document.getElementById(id2check+'-inp').checked;
        if(!x) {
        changeBackground(id2check);
                document.getElementById(id2check).checked = true;
        }
    }   


 function changeBackground(id2check) {
        var elems = document.querySelectorAll(".table_link");
        [].forEach.call(elems, function(el) {
              el.classList.remove("clicked");
        }); 
           document.getElementById(id2check).classList.toggle('clicked');
        }
    </script>

First of all, your parameters for onclick event should be wrapped in apostrophes.

I have added ids on tr because made the job easier for me (sorry for that but I am really asleap) - so you can use classes here.

Another thing: you never called the changeBackground() funtion. I did it, as you can see, in select_check() so after you click something, the background change funtion to be also called.

I hope you understand. Here is a link on how it works: https://jsfiddle.net/o3rm1vmx/7/