Member Avatar for chrisschristou

hello friends i have just a short question.
i want to make i calculator in avascript to change the value a html field in real time i have my script before the html body tag close

function calculTarif()
    {
        var prix = parseFloat($("#prix").val());
        var poid = parseFloat($("#poid").val());
        var total;
        if (poid<3){
        total = (prix * poid);
        }
        else { 
        total = 35;
        }
        $("#tarif").val(parseFloat(total).toFixed(2));
    }
    $("#poid").change(function() {
        calculTarif();
    });
    calculTarif();
</script>

and here is the form

<form name="tarif" method="post" action="">
              <label for="poid">Poid</label>
              <input type="text" name="poid" id="poid">
              <input type="hidden" name="prix" id="prix">
              <label for="tarif">tarif</label>
              <input type="text" name="tarif2" id="tarif">
            </form>
          </section>

i have done all the job but it is not working i don't what is wrong i'm not expert in javascript

  • 3 Contributors
  • 6 Replies
  • 243 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by lps
Member Avatar for lps

Wrap your .change event in $(document).ready();. As you code your script before the body, the script loaded before the DOM is ready and causing the issue.
Another way is moving the javascript to end of the file before closing the body.

Member Avatar for chrisschristou

yea man my scripy is before closing body

Member Avatar for diafol

Can you show your whole page? It may be something else thaat's halting execution.

DO you need a parseFloat on total?

Member Avatar for lps

In your $("#poid").change() event, try to debug if the event is triggered by console.log() or alert(). If it is triggered, then you will have to debug into calculTarif(), make sure the prix,poid,total and parseFloat(total).toFixed(2) is having values.
Instead of calling

 $("#poid").change(function() {
        calculTarif();
    });
    calculTarif();

Normally I will just calling

 $("#poid").change(function() {
        calculTarif();
    }).change();
commented: Very cool. I learned something today. +15
Member Avatar for chrisschristou

yea i need parseFloat on total

<!doctype html>
<html><!-- InstanceBegin template="/Templates/template.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Document sans titre</title>
<!-- InstanceEndEditable -->
<link href="../style/styleprincip.css" rel="stylesheet" type="text/css">
<link href="../style/header.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
    <div class="container">
        <header>
    <a href="#"><img src="" alt="Mad-Trabsit logo" width="180" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" /></a>
    <div class="menu-nav" id="menu-nav">
    <nav class="menu" id="menu">
                <!-- Notre menu -->
                <a href="expedition.php">Expedier</a>
                <a href="reception.php">Recevoire</a>
                <a href="Calcul-tarif.php">Trif</a>
                <a href="#">Suivie</a>
                <a href="#">Contacter</a>
            </nav>
            </div>
        </header>
        <!-- InstanceBeginEditable name="Editable-article" -->
        <article class="content">
          <h1>slieder</h1>
          <section> </section>
          <section>
            <h2>starter pages</h2>
            <p>Calcul du tarif </p>
            <form name="tarif" method="post" action="">
              <label for="poid">Poid</label>
              <input type="text" name="poid" id="poid">
              <input type="hidden" name="prix" id="prix">
              <label for="tarif">tarif</label>
              <input type="text" name="tarif2" id="tarif">
            </form>
          </section>
          <section> </section>
          <!-- end .content -->
        </article>
        <!-- InstanceEndEditable -->
        <footer>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut erat ex, hendrerit eu odio at, tincidunt aliquet massa. Nam et lobortis eros, eu suscipit dui. Vestibulum imperdiet at augue in mollis. Vestibulum arcu quam, elementum vel sem sed, feugiat consectetur lorem. Nam auctor at mi sit amet scelerisque. Donec leo ante, fringilla vitae placerat sit amet, malesuada eget arcu. Vivamus massa libero, blandit non nunc laoreet, blandit bibendum mauris.</p>
    <address>
      Contenu d'adresse
    </address>
  </footer>
  <!-- end .container --></div>
  <script type="text/javascript">
 function calculTarif()
    {
        var prix = parseFloat($("#prix").val());
        var poid = parseFloat($("#poid").val());
        var total;
        if (poid<3){
        total = (prix * poid);
        }
        else { 
        total = 35;
        }
        $("#tarif").val(parseFloat(total).toFixed(2));
    }
     $("#poid").change(function() {
        calculTarif();
    }).change();
</script>
</body>
<!-- InstanceEnd --></html>
Member Avatar for lps

From your code, I found that your code did not having its reference to jquery library. Try adding <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>. Then it shall work.
But be warn that .change() event will only be triggered when the field is unfocus. So, if you wish the tarif field to be updated as soon as user typing a value, then you should try .keydown()

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.