How can I detect my submit button is clicked on with javascript-CodePudding

Hi everyone
So basically I have to code a website that calculates a certain amount using javascript, here is the exemple of the website : Check here.
So basically the client fills the form with the quantity and I have to display the total of his command, he doesn't need to submit the form

The uncomplete code is this one :

<h1>Vente de Pizza</h1>
<form method="post" action="#">
    Nom du client<input type="text" name="nom" /> <br> <BR></BR>
    adresse<input type="text" name="adresse" /><br>
    <h1>Produits à acheter</h1>
    <table border = "1">
        <tr><th>Nom du produit</th>
            <th>Prix unitaire</th>
            <th>Quantité</th>
        </tr>
        <tr>
            <td>Pizza 4 fromages</td>
            <td>80</td>
            <td><input type="text" name="QTE1" id = "x1" /></td>
        </tr>
        <tr>
            <td>Pizza Herbo</td>
            <td>75</td>
            <td><input type="text" name="QTE2" id = "x2"/></td>
        </tr>
        <tr>
            <td>Pizza viande hachée</td>
            <td>100</td>
            <td><input type="text" name="QTE3" id = "x3"/></td>
        </tr>
        <tr>
            <td>Pizza Fruit de mer</td>
            <td>120</td>
            <td><input type="text" name="QTE4" id = "x4"/></td>
        </tr>
    </table>
     <p font = "bold" style="font-weight: BOLD;"> Paiment par: </p><br>
     <input type="radio" name="banque" id="">Carte bancaire
     <input type="radio" name="banque" id="">Chèque <BR></BR>
        Numéro de la carte bancaire<input type="text" name="numCB" id = "x5" style="width: 400px;"/> <br><BR>
    <button  type="submit"  onkeydown = "mySubmit()" id ="bouton">Envoyer</button> <BR></BR>
     <script>
        function TotalCalculate(){
            var x1 = document.getElementById("x1").value;
            var x2 = document.getElementById("x2").value;
            var x3 = document.getElementById("x3").value;
            var x4 = document.getElementById("x4").value;
            var tot = x1*80;
            document.getElementById("Total").addEventListener("click", writeTotal);
            function writeTotal(){
                document.getElementById("Total").write(tot);
            }
        }
    </script>
    Merci de votre visite le montant total de votre commande est : 
    <input type="text" name="Total" onclick="TotalCalculate()" id = "Total"/> 
    </form>

So as you can see I get the value from the user and calculates the total to pay, but it doesn't show anything. laybe i need to add a listner but i can't find how to add a listner that writes something. Please help

CodePudding user response：

you want to use the onclick event and have that execute your TotalCalculate method. (Note that it's spelt wrong in the html. You also need to preventDefault() on the event. Lastly, don't use write but rather update the innerHTML. forgot to mention you need to add a tag with id = "Total"

function TotalCalculate(event){
           
            event.preventDefault();
            
            var x1 = document.getElementById("x1").value; 
            var x2 = document.getElementById("x2").value;
            var x3 = document.getElementById("x3").value;
            var x4 = document.getElementById("x4").value;
            var tot1 = x1*80;
            var tot2 = x1*75;
            var tot3 = x1*100;
            var tot4 = x1*120;
            var tot = tot1   tot2   tot3   tot4; 
            
            document.getElementById("Total").innerHTML = tot;
            
        }

<h1>Vente de Pizza</h1>
<form >
    Nom du client<input type="text" name="nom" /> <br> <BR></BR>
    adresse<input type="text" name="adresse" /><br>
    <h1>Produits à acheter</h1>
    <table border = "1">
        <tr><th>Nom du produit</th>
            <th>Prix unitaire</th>
            <th>Quantité</th>
        </tr>
        <tr>
            <td>Pizza 4 fromages</td>
            <td>80</td>
            <td><input type="text" name="QTE1" id = "x1" /></td>
        </tr>
        <tr>
            <td>Pizza Herbo</td>
            <td>75</td>
            <td><input type="text" name="QTE2" id = "x2"/></td>
        </tr>
        <tr>
            <td>Pizza viande hachée</td>
            <td>100</td>
            <td><input type="text" name="QTE3" id = "x3"/></td>
        </tr>
        <tr>
            <td>Pizza Fruit de mer</td>
            <td>120</td>
            <td><input type="text" name="QTE4" id = "x4"/></td>
        </tr>
    </table>
     <p font = "bold" style="font-weight: BOLD;"> Paiment par: </p><br>
     <h1 id='Total'>&nbsp;</h1>
     <input type="radio" name="banque" id="">Carte bancaire
     <input type="radio" name="banque" id="">Chèque <BR></BR>
        Numéro de la carte bancaire<input type="text" name="numCB" id = "x5" style="width: 400px;"/> <br><BR>
    <button  type="text"  onclick = "TotalCalculate(event)" id ="bouton">Envoyer</button> <BR></BR>

CodePudding user response：

The event you want is change or input. For example

document.querySelectorAll("input, select, textarea").forEach(function(input) {
  input.addEventListener('input', TotalCalculate)
})

function TotalCalculate() {
  
  var x1 = document.getElementById("x1").value;
  var x2 = document.getElementById("x2").value;
  var x3 = document.getElementById("x3").value;
  var x4 = document.getElementById("x4").value;
  var tot1 = x1 * 80;
  var tot2 = x2 * 75;   // <-- fixed these
  var tot3 = x3 * 100;   // <-- fixed these
  var tot4 = x4 * 120;   // <-- fixed these
  var tot = tot1   tot2   tot3   tot4;
  // document.write("tot");
  document.getElementById("Total").value = tot;

}

<form method="post" action="#" onsubmit="TotalCalculate(); return false">
  <input type="text" id="x1"><br>
  <input type="text" id="x2"><br>
  <input type="text" id="x3"><br>
  <input type="text" id="x4"><br>
  <input type="submit">
</form>

<br>
total: <input id="Total">

CodePudding user response：

Coucou,

You can use this if you have jQuery loaded

$('#bouton').on('click', function(e){ 
e.preventDefault();
alert('clicked');
});

or this if its only pure JS :

var button = document.getElementById('button')

button.onclick = function () {
  console.log('Click just happened')
}