CODEWITHSUNDEEP
javascripthtml
Dennis Hertzler
Dennis Hertzler

Reputation: 90

Cannot Make JavaScript event handler get Textbox text attribute

I'm trying to calculate the price when the textbox is changed. Inside the table cell I have six textboxes, and I want to recalculate the total every time the numbers change in the textboxes.

<asp:TableCell VerticalAlign="Middle">
    Price: $12 non reflective, $24 Reflective 
    <br />
    <br />
    Quantity
    <asp:TextBox ID="TextBox2" BackColor="Blue"             runat="server" Width="40" Text="1" TextMode="Number"></asp:TextBox>
    <asp:TextBox BackColor="Red" ID="TextBox3" Text="0" runat="server" Width="40" TextMode="Number"></asp:TextBox>
    <asp:TextBox Text="0" ForeColor="White" BackColor="Black" ID="TextBox4" runat="server" Width="40" TextMode="Number"></asp:TextBox>
    <asp:TextBox Text="0" ID="TextBox5" runat="server" Width="40" TextMode="Number"></asp:TextBox>
    <asp:TextBox Text="0" ForeColor="White" BackColor="Red" ID="TextBox6" runat="server" Width="40" TextMode="Number"></asp:TextBox>
    <asp:TextBox Text="0" ID="TextBox7" runat="server" Width="40" TextMode="Number"></asp:TextBox>
    <br />
    <asp:Label ID="Label178" Width="80" Font-Size="Small" Font-Bold="true" runat="server" Text=" "></asp:Label>

    <asp:Label ID="Label179" Font-Size="X-Small" Font-Bold="true" runat="server" Text="Colors"></asp:Label>
    <asp:Label ID="Label180" runat="server" Width="140" Text=" "></asp:Label>
    <asp:Label ID="Label181" runat="server" Font-Size="X-Small" Text="Reflective"></asp:Label>
    <br />
    <br />
    Total: <u>$<asp:Label runat="server" ID="tp36" Text="12" Font-Bold="false"></asp:Label></u>

</asp:TableCell>

I want to do it without going back to the server and using server-side code. I would like to do it on client-side code (JavaScript). So I made a script at the end of my .aspx page.

        <script src="Roadside.js" type="text/javascript"></script>
    </body>
</html>

Roadside.js:

var deal = document.getElementById("TextBox2");
var deal1 = document.getElementById("TextBox2");
var deal2 = document.getElementById("TextBox3");
var deal3 = document.getElementById("TextBox4");
var deal4 = document.getElementById("TextBox5");
var deal5 = document.getElementById("TextBox6");
var deal6 = document.getElementById("TextBox7");

deal.onchange = function() {
    var m1a = deal1.getAttribute("Text")
    var m2a = deal2.getAttribute("Text");
    var m3a = deal3.getAttribute("Text");
    var m4a = deal4.getAttribute("Text");
    var m5a = deal5.getAttribute("Text");
    var m6a = deal6.getAttribute("Text");

    var m1 = Number(m1a);
    var m2 = Number(m2a);
    var m3 = Number(m3a);
    var m4 = Number(m4a);
    var m5 = Number(m5a);
    var m6 = Number(m6a);

    var m1 = m1 * 12;
    var m2 = m2 * 12;
    var m3 = m3 * 12;
    var m4 = m4 * 12;
    var m5 = m5 * 24;
    var m6 = m6 * 24;

    var tt = m1 + m2 + m3 + m4 + m5 + m6; 

    document.getElementById("tp36").innerHTML = tt;

};

I'm using Visual Studio 2013 and I am new to JavaScript. I used to have it calculate on server-side in C# but it had to post back every time you changed the textbox.

Upvotes: 1

Views: 92

Answers (2)

Hank
Hank

Reputation: 1678

Don't use getAttribute("Text"), just get the value of the inputs like so:

var m1a = deal1.value;
var m2a = deal2.value;
var m3a = deal3.value;
var m4a = deal4.value;
var m5a = deal5.value;
var m6a = deal6.value;

Upvotes: 1

dmitrydwhite
dmitrydwhite

Reputation: 826

I think the on-change event doesn't fire on the text area until the element loses focus. You could try using an on-keyup event instead.

Upvotes: 1

Related Questions