Multiplizieren einer HTML-Formulareingabe mit einem Auswahloptionswert

-2

Ich möchte, dass Benutzer eine bestimmte Preisoption und -menge aus Menüs auswählen und die Summe automatisch berechnen lassen. (sein Preis) * (die Menge oder Anzahl der Produkte).Multiplizieren einer HTML-Formulareingabe mit einem Auswahloptionswert

Dies ist der Code.

Bitte wählen Akademischer

<select name="ac_level" id="ac_level" required=""> 
<option id="1" value="highschool">Highschool</option> 
<option id="2"value="college">College</option> 
<option id="3" value="university">University</option> 
<option id="4" value="masters">Masters</option> 
<option id="5" value="phd">PhD</option> 
</select>

Anzahl der Seiten

<input name="pages" id="number" required="" type="number" min=1 /> 
<input name="total" id="total" type="text" readonly /> 
<!-- #total = #number * #ac_level -->

Quelle

2017-02-25 Faizan Ahmed

Es gibt wirklich keine Mühe hier demonstriert. Wo sind die Preise, wo sind die Quantitätseingaben, wo ist der erste Versuch zu einem Skript? – trincot

Es klingt wie Sie müssen versuchen, einige einfache Javascript-Einführung. Es wäre möglich, dies auf verschiedene Arten zu lösen (entweder clientseitig oder serverseitig). Ich würde versuchen zu googeln, "manipulieren HTML-Formulare mit Javascript" (es gibt bereits viele Antworten zu diesem Thema auf dieser Website.) –

@trincot Es tut mir wirklich leid. Ich habe versucht, ein Skript zu schreiben, aber es hat nicht funktioniert, also dachte ich, es wäre besser, eins ohne das Skript einzureichen (nur um Verwirrung zu vermeiden). –

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script> 
     <script> 

      $(document).ready(function(){ 

       $(document).on("change","#selectboxnumbers",function(){ 
        //user is user picks new option 
        var value1 =0,value2 = 0; 

        value1 = $("#selectboxnumbers option:selected").attr("value") * 1; 
        value2 = $("#value2").val() * 1; 

        if(value1 != "" && value2 != "" && value1 != "undefined" && value2 != "undefined"){ 
         $("#score").html("$" + Math.round(value1 * value2)); 
        } 
       }); 
       $("input").on("keyup change",function(){ 
        //user is typing so will trigger this 
        var value1 =0,value2 = 0; 

        value1 = $("#selectboxnumbers option:selected").attr("value"); 
        value2 = $("#value2").val(); 

        if(value1 != "" && value2 != "" && value1 != "undefined" && value2 != "undefined"){ 
         $("#score").html("$" + Math.round(value1 * value2)); 
        } 
       }); 
      }); 
     </script> 
    </head> 
    <body> 

     Enter Value 1: 
     <select name="ac_level" id="selectboxnumbers"> 
      <option id="1" value="32">Item 1 - $32</option> 
      <option id="2" value="55.93">Item 2 - $55.93</option> 
      <option id="3" value="88.27">Item 3 - $88.27</option> 
      <option id="4" value="2">Item 4 - $2</option> 
      <option id="5" value="1">Item 5 - $1</option> 
     </select><br> 

     Enter Value 2: <input type="number" id="value2"> 

     <p id="score"></p> 

    </body> 
</html>

Quelle

2017-02-25 15:26:29 linc

Gute Antwort, (funktioniert für mich), aber warum "value1 = value1 ="? –

@linc Ich habe diesen Code direkt auf meiner Website versucht, aber es hat nicht funktioniert. Ich habe es auch auf Dreamweaver versucht, aber es sagt, dass die folgende Zeile einen Fehler hat. Ich weiß nicht warum. '{ $ ("# Ergebnis") .html ("$" + Math.round (Wert1 * Wert2)); } ' –

@FaizanAhmed ich bin mir nicht sicher, warum es nicht funktioniert - Ich habe es auf meiner Seite direkt versucht - lassen Sie mich noch einmal überprüfen und sehen, dass alles funktioniert – linc

Multiplizieren einer HTML-Formulareingabe mit einem Auswahloptionswert

Antwort

Verwandte Themen