0

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
28
Views
2 Years
Discussion Span
Last Post by lps
0

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.

0

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

DO you need a parseFloat on total?

1

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();
Votes + Comments
Very cool. I learned something today.
0

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>
0

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()

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.