Dynamically change html content using javascript not working

Question

I'm working on developing a web application that connects to a database for a class that I'm taking. The particular page that I'm working on displays a type of internet service available for a zip code. The services are displayed as radio buttons, and I want the price to show/change based on the radio button that is already checked (when the page loads) or is manually checked. Below is the script to change the text/innerHTML of #servicePriceString.

For some reason, not only does the price not show up, but I've tested the "showPrice()" function with something simple like an alert(), but that doesn't seem to work either. Any help/suggestions would be greatly appreciated. Side note, I'm really new at this, so take it easy on poorly-formatted/bad code ;)

EDIT: I know that the input is outside the form and have since corrected that. It's still not working. Also, I know that I'm not using "var checkedvalue". I was using that previously and haven't removed it yet.

<script type="text/javascript">
    function showPrice(i) {
        var myRadio = document.getElementById("availableService");
        var checkedValue = myRadio.filter(':checked').valueOf();
        price = rs[0][i].monthly_price;
        document.getElementById("servicePriceString").innerHTML = price;
    }


</script>

<form action="/placeorder">
        <% for ( var i=0; i < rs[0].length; i++) { %>

            <div id="serviceAvailableArea">
                <input onclick="showPrice(<%= i %>)" type="radio" id="availableService" name="availableService"
                 value="<%= i %>">
                <%= rs[0][i].service_name %> at <%= rs[0][i].speed %>Mbps
            </div>
            <br/>

        <% }%>
        </form>
    <input type="submit" value="Place Order" id="placeOrderButton">
    <div id="servicePrice">
        <p id="servicePriceString">test</p>

Well for one thing your submit input should be inside your form, not sure if that is causing your issue though. — nhouser9, Apr 09 '16 at 00:54
Thank you, I did actually notice that after I posted it. BUT it still doesn't work :( — Chad Lewis, Apr 09 '16 at 01:01
I see, like I said, pretty new to this. Thank you, I'll try that now. — Chad Lewis, Apr 09 '16 at 01:06

score 0 · Answer 1 · edited May 23 '17 at 12:15

You're likely to be getting an undefined from your var checkedValue = myRadio.filter(':checked').valueOf();. Use console.log(checkedValue) to see the result in the console.

Another way is getting your value like this:

Add a name to your form: <form action="/placeorder" name="servicesForm">

Remove the duplicated ids from your radio buttons (you don't need them, just their names)

Then, in your function:

 function showPrice(i) {
        var checkedValue = servicesForm.availableService.value;
        price = rs[0][i].monthly_price;
        document.getElementById("servicePriceString").innerHTML = price;
    }

Explanation: when you have a form, browsers will generate an object of that form for you automagically. There's no need to get it with document.getElementById;

Also, check if rs[0][i].monthly_price is giving you the correct price.

[EDIT2]

Ok, so, showPrice() is never really being called. I believe you should refactor to this:

(function() {
    servicesForm.availableService.onclick = function() {
                var checkedValue = servicesForm.availableService.value;
                var price = rs[0][checkedValue].monthly_price;
                document.getElementById("servicePriceString").innerHTML = price;
            }
})();

I've wrapped your call inside a closure. More information about this technique here: JavaScript closures vs. anonymous functions

Wow, ok. That totally makes sense. Thank you! But, unfortunately it still does not work. I don't think that showPrice() is even getting called. console.log(checkedValue) is not printing anything to the console, and neither is console.log("test"). — Chad Lewis, Apr 09 '16 at 01:24
I've edited my answer. Now its likely your function will be called and you'll be able to debug — Vitor Rigoni, Apr 09 '16 at 01:34
I appreciate your continued efforts, good sir. But still no luck. Tried testing with `console.log("test")` using your edited function as well, but nothing is printing out. By the way, I know that `.monthly_price` is returning the correct value(s) as I have `console.log()` statements when I get that data returned from the database. — Chad Lewis, Apr 09 '16 at 01:48

Dynamically change html content using javascript not working

1 Answers1