2017-06-11 5 views
1

Ich versuche, die Informationen zu verwenden, die ich über ein Formular über eine Schaltfläche senden, ein wenig Verarbeitung, und drucken Sie es auf der Webseite, verhindert, dass es eingereicht wird ein Webserver durch include (return false).Ich habe Probleme mit HTML Javascript Aufnahme

Hier ist der Code auf der Seite:

<html> 
<head> 
<title>SmithSellsStuff</title> 

</head> 



<body> 
<a href="week1-1.html">I'm too cheap to buy something nice</a> 

<script> 

    var myData = { 
     price: "4.25", 
     taxRate: "0.07", 
     shipRate: "0.02" 
    }; 
    myData.calculateTotal = function() { 
     myData.name = document.getElementById("name"); 
     myData.date = document.getElementById("date"); 
     myData.numItems = document.getElementById("number of items"); 
     var itemTotal = myData.numItems * myData.price; 
     var taxTotal = (myData.numItems * myData.price) * myData.taxRate; 
     var shipTotal = (myData.numItems * myData.price) * myData.shipRate; 
     document.writeln(itemTotal); 
     document.writeln(taxTotal); 
     document.writeln(shipTotal); 

    }; 
</script> 
<form> 
    </p> 
    <label>Name: <input type="text" name="name" id="name" tabindex="1"/>    </label> 
    </p> 
    <label>Delivery Date: <input type="date" name="date" id="date" tabindex="2"/></label> 
    </p> 
    <label>Number of items: <input type="number" name="number of items" id="number of items" tabindex="3"/></label> 
    </p> 
    <input type="submit" onclick="calculateTotal(); return false;"/> 
</form> 
    </body> 
    </html> 

Auf der ersten Seite, ich habe ein einfaches Formular mit einem Feld für Namen, Datum, Stückzahl insgesamt und eine Absenden-Button. Ein Fehler, den ich erhalte, ist der Onclick-Tag. Es heißt "_kof_1" ist definiert, wird aber nie benutzt. Ich denke nicht, dass es meine calculateTotal Funktion erlaubt zu callen.

+2

'myData.calculateTotal' nicht das gleiche wie' calculateTotal' ist. – PHPglue

+1

Ich würde erwarten, dass Sie viele Fehler beim Laden dieser Seite haben. Versuchen Sie, 'myData.calculateTotal = function' durch 'var calculateTotal = function' zu ändern. – RaphaMex

+0

Okay! Großartige Neuigkeiten! Ich bekomme jetzt Feedback. Es lädt eine Seite und zeigt Nullwerte an. Jetzt muss ich herausfinden, warum meine Werte nicht bevölkert sind. –

Antwort

1

Das liegt daran, dass die Funktion nicht im globalen Gültigkeitsbereich deklariert wurde, sondern als Eigenschaft von myData.

<input type="submit" onclick="myData.calculateTotal(); return false;"/> 

Des Weiteren, da Sie den Namen, das Datum erhalten möchten, und die Anzahl der Elemente aus den Textfeldern, Sie haben das bekommen:

myData.calculateTotal = function() { 

Um dies zu lösen, einfach den Anruf ändern .value Eigenschaft den Inhalt der Eingabefelder zu erhalten, etwa so:

myData.name = document.getElementById("name").value; 
myData.date = document.getElementById("date").value; 
myData.numItems = parseInt(document.getElementById("number of items").value); 
0

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="ISO-8859-1"> 
 
<title>Insert title here</title> 
 
</head> 
 
<body> 
 
<a href="week1-1.html">I'm too cheap to buy something nice</a> 
 

 
<script> 
 

 
function calculateTotal() 
 
{ 
 
\t alert("hai"); 
 
\t var price="4.25"; 
 
\t var taxRate="0.07"; 
 
\t var shipRate="0.02"; 
 
\t var name = document.getElementById("name"); 
 
    var date = document.getElementById("date"); 
 
    var numItems = document.getElementById("number_of_items").value; 
 
    alert(numItems); 
 
    var itemTotal = numItems * price; 
 
    var taxTotal = (numItems * price) * taxRate; 
 
    var shipTotal = (numItems * price) * shipRate; 
 
    document.writeln("Total Items:"+itemTotal+"\tTax :"+taxTotal+"\tshipTotal:"+shipTotal); 
 
    
 
\t 
 
\t } 
 
    </script> 
 
<form> 
 
    <p> 
 
    <label>Name: <input type="text" name="name" id="name" tabindex="1"/>    </label> 
 
    </p> 
 
    <label>Delivery Date: <input type="date" name="date" id="date" tabindex="2"/></label> 
 
    <p> 
 
    <label>Number of items: <input type="number" name="number_of_items" id="number_of_items" tabindex="10"/></label> 
 
    </p> 
 
    <input type="submit" onclick="calculateTotal()"/> 
 
</form> 
 
    </body> 
 

 
</html>

Alarm ist nur zu wissen, Methode oder nicht anruft, Hoffe, dass dies hilft Ihnen