使用javascript从表中获取正确的值

Question

Hi I'm not good at javascript and its API, this is a table that I want to get one specific row field from database with radio button, I mean it shows all information from database and when I check one of them I want it to show for example receipt value of this row but I can not get the value. In alert windows on the first time it shows "selected value is : on" and second one "undefined"

This is my code:

if ($term == "")
    echo " .enter a usernumber";
else {
    $query = mysql_query("select * from test 
        where username like '{$term}%'", $connection);
    $string = '';
    echo "<br>";
    echo "<center>";
    echo "<div>";
    echo"<form onclick='onSubmit();'>";
    echo "<div align='center' width = 900>";
    echo "<table class='styled-table' cellspacing='0' width='900' border='1'>";
    echo "<tr>";
    echo "<th width='10' scope='col'>Check</th>";
    echo "<th width='10' scope='col'>Username</th>";
    echo "<th width='10' scope='col'>Password</th>";
    echo "<th width='10' scope='col'>Name</th>";    
    echo "<th width='10' scope='col'>Last Name</th>";
    echo "<th width='10' scope='col'>Midterm</th>";
    echo "<th width='10' scope='col'>Class Mark</th>";
    echo "<th width='10' scope='col'>Final</th>";
    echo "<th width='10' scope='col'>State</th>";
    echo "<th width='10' scope='col'>Level</th>";
    echo "<th width='10' scope='col'>Teacher</th>";
    echo "<th width='10' scope='col'>Class Num</th>";
    echo "<th width='10' scope='col'>Receipt</th>";
    echo "<th width='10' scope='col'>Date</th>";
    echo "</tr>";

    if (mysql_num_rows($query)) {
        while ($row = mysql_fetch_assoc($query)) {
            echo "<tr>";
            echo "<td align='center'><input class='styled-input'  type='checkbox' name='check' id='check' value= " . $row['check'] ."  ></td>";
            echo "<td align='center'><input class='styled-input'  type='text' name='user' id='user' value= " . $row['username'] ." ></td>";
            echo "<td align='center'><input class='styled-input'  type='text' name='pass' id='pass' value= " . $row['password'] ."  ></td>"; 
            echo "<td align='center'><input class='styled-input'  type='text' name='name' id='name' value= " . $row['name'] ."  ></td>";
            echo "<td align='center'><input class='styled-input'  type='text' name='lastname' id='lastname' value= " . $row['lastname'] ."  ></td>";
            echo "<td align='center'><input class='styled-input'  type='text' name='midmark' id='midmark'  value= " . $row['midmark'] ." ></td>";
            echo "<td align='center'><input class='styled-input'  type='text' name='classmark' id='classmark'  value= " . $row['classmark'] ."  ></td>";
            echo "<td align='center'><input class='styled-input'  type='text' name='finalmark' id='finalmark'  value= " . $row['finalmark'] ." ></td>";
            echo "<td align='center'><input class='styled-input'  type='text' name='state' id='state' value= " . $row['state'] ." ></td>";
            echo "<td align='center'><input class='styled-input'  type='text' name='level' id='level' value= " . $row['level'] ." ></td>";
            echo "<td align='center'><input class='styled-input'  type='text' name='teacher' id='teacher' value= " . $row['teacher'] ." ></td>";
            echo "<td align='center'><input class='styled-input'  type='text' name='classnum' id='classnum' value= " . $row['classnum'] ." ></td>";
            echo "<td align='center'><input class='styled-input'  type='text' name='receipt' id='receipt' value= " . $row['receipt'] ." ></td>";
            echo "<td align='center'><input class='styled-input'  type='text' name='date' id='date' value= " . $row['date'] ." ></td>";     
            echo "</tr>";

            $_SESSION["suser"]=$row['username'] ;
            if (($row['check']) == true)
                {$_SESSION["sreceipt"] = $row['receipt'] ;}
        }

        echo "</table>";
        echo "</div>";
        echo"</form>";
        echo "</div>";
        echo "</center>";
    } else {
        $string = "nothing found !";
        $_SESSION["suser"]='';
        $_SESSION["sreceipt"]='';
    }

    echo $string;
}
?>

<script type="text/javascript">
    function get_radio_value() {
        var inputs = document.getElementsByName("check");
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].checked) {
                var row = $(this).closest('tr'),
                receiptValue = row.find('input[name=receipt]').val();
                alert(receiptValue);
                alert("selected input is: " +inputs[i].value);
            }
        }
    }

    function onSubmit() {
        var id = get_radio_value();
    }
</script>

for putting $_post in $_session['sreceipt'] I want to do something like the code in below:

<script type="text/javascript">
function get_radio_value() {
    var cboxes = document.getElementsByName("check");

    for (var i = 0; i < cboxes.length; i++) {
        var cbox = cboxes[i];

        if (cbox.checked) {
            //Now you are switching to jQuery:
            var receiptValue = $(cbox).closest('tr').find('input[name=receipt]').val()
            var data = {};
            data[cbox.value] = receiptValue;
            $.post('editstudent.php', data,'text');
            alert(receiptValue);
        }
    }
}

function submit_func() {
  var id = get_radio_value();
}
</script>

<?php
    if (isset($_POST['data'])) {
        $_SESSION['sreceipt'] = $_POST['data'];
    }
?>

Answer 1

You need to work on your html too, there are several errors.

function get_radio_value() {
  var cboxes = document.getElementsByName("check");

  for (var i = 0; i < cboxes.length; i++) {
    var cbox = cboxes[i];

    if (cbox.checked) {
      //Now you are switching to jQuery:
      var receiptValue = $(cbox).closest('tr').find('input[name=receipt]').val()

      alert(receiptValue);
      alert("checked input is: " + cbox.value);
    }
  }
}

function submit_func() {
  var id = get_radio_value();
}

.

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script type='text/javascript' src='lib/jquery-1.9.1.js'></script>
  <script type='text/javascript' src='lib/jquery-ui-1.10.2.js'></script>
  <script type='text/javascript' src='js.js'></script>

  <style type='text/css'>
  </style>
</head>
<body>

<form onsubmit="submit_func();return false">

<div align='center' width="900">
<table class='styled-table' cellspacing='0' width='900' border='1'>
  <tr id="beth">
    <td align='center'>
      <input class='styled-input' type='checkbox'
      name='check' id='check1' value="hello" />
    </td>
    <td align='center'>
      <input class='styled-input' type='text' name='user'
      id='user' value="A" />
    </td>
    <td align='center'>
      <input class='styled-input' type='text' name='receipt'
      id='receipt' value="B" />
    </td>
  </tr>
</table>

<div><input type="submit" value="Submit" /></div>
</div>
</form>

</body>
</html>

You can remove the ";return false" part from the <form>'s onsubmit attribute when you are done testing.

By the way, in php you can do this:

<?php

$name = "David";
$age = 10;

$html = <<<END_OF_HTML
<div>
<form method="get" action="myphp.php">
<table>
  <tr><td>$name</td><td>$age</td></tr>
</table>
</form>
</div>
END_OF_HTML;

echo $html;

?>

.

--output:--
<div>
<form method="get" action="myphp.php">
<table>
  <tr><td>hello</td><td>goodbye</td></tr>
</table>
</form>
</div>~/php_programs$ php 1.php 
<div>
<form method="get" action="myphp.php">
<table>
  <tr><td>David</td><td>10</td></tr>
</table>
</form>
</div>

===

if (cbox.checked) {
  //Now you are switching to jQuery:
  var receiptValue = $(cbox).closest('tr').find('input[name=receipt]').val();
  var data = {};
  data[cbox.value] = receiptValue;

  $.post('1.php', 
         data,
         function(results) {alert(results)},
         'text'
  );

1.php:

<?php

foreach ($_POST as $key => $val) {
    echo "$key = $val 
";
}

//Or do something else with the values in the $_POST array.

?>