How to make "val()" work in html form?

How to make "val()" work in html form?

I have an online order form which works great! the only thing thats wrong is that i cant seem to find a way to send the input data from the text fields with Naam:, Adres: etc. (which is at the bottom of the code) i found out that i could use this code : $("#txt_name").val(); but it does not work properly. And i don't really know in which function i have to pace de code. Can someone help me? i'm not very experienced with jquery.


<html>
<head>
<script src=" http://code.jquery.com/jquery-1.11.1.js"></script>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src=" http://malsup.github.com/jquery.form.js"></script>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!-- Original:  Mike McGrath   ( mike_mcgrath@lineone.net) -->
<!-- Web Site:  http://website.lineone.net/~mike_mcgrath/ -->
<!--



function count(f,n,u)
{
  f.line_sum[n].value = f.line[n].value * u;
  f.line_sum[n].value = Math.ceil(f.line_sum[n].value * 1000) /1000;
  f.line_sum[n].value = Math.floor(f.line_sum[n].value * 1000) /1000;
  f.line_sum[n].value = Math.round(f.line_sum[n].value * 100)/100;
  if(f.line_sum[n].value == "NaN")
  {
    alert("Error:\nYou may only enter numbers...\nPlease retry");
    f.line[n].value = f.line[n].value.substring(0, f.line[n].value.length-1);
    f.line_sum[n].value = f.line[n].value * u;
    if(f.line_sum[n].value == "0") f.line_sum[n].value = "";
  }
  else
  {
    var gt = 0;
    for(i=0; i < f.line_sum.length; i++)
    {
      gt += Math.ceil(f.line_sum[i].value * 1000) /1000;
    }
    gt = Math.round(gt * 1000)/1000;
    f.grand_total.value = "€ " + gt;
    decimal(f);
   }
}


function get_data(f)
{
  var order_data = "Bestelling High Tea, Morning Coffee en (zaken) Lunch\n";
  var naam = $("#txt_name").val()
  var postcode = $("#txt_postcode").val()
 
 
for(i=0; i < f.line.length; i++)
{
    if(f.line[i].value == "") f.line[i].value = "0";
    order_data += $(".mainTable tr").eq(i).children().eq(0).text() + " = "+f.line[i].value +" Stuks\n";
  
  }
  if(f.grand_total.value == "") f.grand_total.value = "Nil";
  order_data += "Totaal Prijs Bestelling = " + f.grand_total.value;
  document.g.order.value = order_data;
 
}

function getFirstCol(){
    var lst = "";
    $(".mainTable tr").each(function () {
        lst += $(this).children().eq(0).text() + "  ";
    });
    return lst;
}
function decimal(f)
{
  for(i=0; i<f.line_sum.length; i++)
  {
    var d = f.line_sum[i].value.indexOf(".");
    if(d == -1 && f.line[i].value != 0) f.line_sum[i].value += ".00";
    if(d == (f.line_sum[i].value.length-2)) f.line_sum[i].value += "0";
    if(f.line_sum[i].value == "00") f.line_sum[i].value="";
  }
  d = f.grand_total.value.indexOf(".");
  if(d == -1) f.grand_total.value += ".00";
  if(d == (f.grand_total.value.length-2)) f.grand_total.value += "0";
}

function send_data(g)
{
  get_data(document.f);
  if(document.f.grand_total.value == "Nil")
  {
    var conf = confirm("No items are entered - \nDo you want to submit a blank order?");
    if(conf)g.submit(); else init();
  }
  else g.submit();
 
}

function init()
{
  document.f.reset();
  document.f.line[0].select();
  document.f.line[0].focus(); 
  document.g.order.value="";
 
}

window.onload=init;



// -->
</SCRIPT>





<style type="text/css">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<body>

   

<form Name="f">
  <table class="myForm"><tbody>
    <tr>
    <td align="left" class="style3">Gegevens invullen:</td>
 <tr>
 <td class="style1">Naam:
   <input type="text" id="txt_name" name="naam" class="style1" size="20"></td>
  
   <td class="style1" align="right">Postcode:</td>
   <td colspan="2"><input type="text" id="txt_postcode" class="style1" size="20"></td>
  </tr>
   <tr>
 <td class="style1"> Adres:
   <input type="text" class="style1" size="20"></td>
    <td class="style1" align="right">Plaats:</td>
    <td colspan="2"><input type="text" class="style1" size="20"></td>
  </tr>
    <td class="style1">E-mail:
          <input type="text" class="style1" size="20">
    </td>
      <td class="style1" align="right">Telefoon nr.:</td>
    <td colspan="2"><input type="text" class="style1" size="20"></td>
  </tr>
  <td></td>
  </tr>
  
  <td class="style1">Aflevertijd:
    <input type="text" class="style1" size="20">
  </td>
  <td class="style1" align="right">Afleverdatum:</td>
  <td colspan="2"><input type="text" class="style1" size="20"></td>
  </tr>
  <td>&nbsp;</td>
  </tr>
              <td colspan="5" class="style1">Bij een bestelling ga je automatisch akkoord met de <a href="algemenevoorwaarden.pdf" target="_blank">algemene voorwaarden</a> van Zuiver Catering &amp; Cooking. </td>
  </tr>
  <td>&nbsp;</td>
  </tr>
 
  <tr>
    <td colspan="5" align="center"><input type="button" id="controle" onClick="get_data(this.form)" value="Klik voor controle bestelling"></td>
  </tr>
  </tbody>
  </table>
</FORM>

<FORM NAME="g" METHOD="POST" ACTION=" http://www.zuiver-catering.com/fmail/fmail.php">

    <input type="hidden" name="recipient" value=" zuiver-bestellijsten@zuiver-catering.com">
    <input type="hidden" name="subject" value="Bestellijst High Tea, Morning Coffee en (Zaken) Lunch">
    <input type="hidden" name="thankurl" value="/bedankt-ht.html">

<TABLE WIDTH="784" height="317" SUMMARY="">
<TBODY>
<TR>
<TD align="center"><TEXTAREA NAME="order" ROWS="20" COLS="90"></TEXTAREA></TD></TR>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td ALIGN="center"><input type="submit" value="Bestelling versturen"></td></tr>

</TBODY></TABLE></FORM>

</div>





<div id="witvlak"></div>
<div id="zuiverlogo"><img src="images/htbslijst-logo.png" width="322" height="213"></div>
<div class="style2" id="titel">Bestellijst High Tea,<br>
Morning Coffee &amp; (Zaken) Lunch</div>

</body>
</html>