Search code examples
jqueryhtmlradio-buttonhtml-tableappendchild

jQuery and html Table

I have problem with jQuery.

I want to add in my table to last "td" text "yes" if radio selected "first", and "no" if selected "second".

Now is selected radio first. After click on button I can see in table my form with right text "yes" of radio first, but then I change radio on second, and now I can see again right new text "no" of radio second, but text of radio first "yes" change to text "no".

How to fix it?

And here is my code of HTML and JS.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>

</head>
<body>
  <form method="" action="">
    <input type="text" id="ime" placeholder="Vnesi ime izdelka" /><br />
    <input type="text" id="cena" placeholder="Vnesi ceno" /><br/>
    <input type="radio" name="zaloga" value="true">first<br />
    <input type="radio" name="zaloga" value="false">second<br />
    <input type="submit" value="send">
  </form>

  <div id="napake"></div>

  <br />
  <table border="1">
    <tr>
      <th>Ime izdelka</th>
      <th>Cena izdelka</th>
      <th>Zaloga</th>
    </tr>    
  </table>
  <div id="sumaZaloga">Znesek artiklov na zalogi</div>
  <div id="sumaNiZaloge">Znesek artiklov, ki niso na zalogi</div>
  <input type="button" id="ponastavi" value="Ponastavi vse" /><br />
</body>
</html>

JS (jQuery)

$(document).ready(function () {

$("form").submit(function() {
  if ($("#ime").val() != "" && $("#cena").val() != "" && $('input[name=zaloga]:checked').val() == "false") {  
    var ime = $("#ime").val();
    var cena = $("#cena").val();
    var izpisni = "No";
    $("table").append("<tr>");
    $("tr:last-child").append("<td>");
    $("table td:last-child")
    .text(ime);
    $("tr:last-child").append("<td>");
    $("table td:last-child")
    .text(cena);
    $("tr:last-child").append("<td>");
    $("table td:last-child")
    .text(izpisni);

    return false;
  }
    var ime = $("#ime").val();
    var cena = $("#cena").val();
    var izpisje = "Yes";
    $("table").append("<tr>");
    $("tr:last-child").append("<td>");
    $("table td:last-child")
    .text(ime);
    $("tr:last-child").append("<td>");
    $("table td:last-child")
    .text(cena);
    $("tr:last-child").append("<td>");
    $("table td:last-child")
    .text(izpisje);

    return false;
  });    
});
Solution

  • Your submit function is wrong.. does this work?

    $("form").submit(function() {
if ($("#ime").val() != "" && $("#cena").val() != ""){
    var ime = $("#ime").val();
    var cena = $("#cena").val();
    var izpisni = ($('input[name="zaloga"]:checked').val() == "false") ? "No" : "Yes";

    $('table').append('<tr>\
        <td>'+ime+'</td>\
        <td>'+cena+'</td>\
        <td>'+izpisni+'</td>\
    </tr>');
}
return false;
});