jQuery change value of input using fields that are updated using javascript

Question

I have a form with several input fields and a "total" box that displays the sum of those input fields. Within the form is a section that calculates mileage cost from one point to another and automatically fills out an input with the result. What I notice is that this number does not get added onto the total until I have filled out another form field.

What I need is for it to be auto filled and then straight away be added onto the total. See here for my workings http://www.samskirrow.com/projects/distr/index2.html - the distance calc is at the bottom of the page and total is at the top

My code to calculate the sum is as follows:

$(".txt, .select, .checkbox").each(function() {
        $(this).change(function(){
            calculateSum();
        });
    });

Drewness · Accepted Answer · 2013-09-09 16:43:56Z

1

It looks as though your 'start' variable in calcRoute() has a non-US postal code. If you default your starting point to a valid US postal code, then all should work. Also...add a call to calculateSum() after you enter the text into mileageCost.

function calcRoute() {
    alert("inside calcRoute()");
    var distanceInput = document.getElementById("distance");
    var MileageInput = document.getElementById("mileage");
    var start = "15219";
    var end = document.getElementById("end").value;
    alert("destination: " + end);
    var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
                };

    directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        distanceInput.value = Math.round(response.routes[0].legs[0].distance.value / 1609.344);
        var mileageCost = Math.round(((response.routes[0].legs[0].distance.value / 1609.344)-100)+150);
        if (mileageCost < 150) {
            MileageInput.value = 'FREE';
        } else
            MileageInput.value = mileageCost;
            calculateSum();
        }
    });
}

edited Sep 9, 2013 at 16:43

Drewness

5,0804 gold badges35 silver badges51 bronze badges

answered Sep 9, 2013 at 16:25

Dan Abel

1071 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dan Abel Over a year ago

if starting point is non-US; then add some validation to ensure using same postal code sets; or handle the return value from apis.google. Use this suggestion along with TGxANAHEiiMx suggestion...

Sam Skirrow Over a year ago

The above is good, however, when I click Calculate route There are 2 alerts that pop up. 1) says "inside CalcRoute() 2) Destination [Postcode entered] - is there anyway to stop these happening?

Dan Abel Over a year ago

just comment out or remove the (2) alerts that I had added...line 1 and 6 in the calcRoute() function..

Drewness · Accepted Answer · 2013-09-09 16:07:37Z

0

Per the jQuery docs, the .change() event is limited to <input> elements, <textarea> boxes and <select> elements. All other form elements (checkbox, radios, etc.) are deferred until they lose focus.

So you could add something like this:

$(".checkbox").click(function() { //Could use other methods as well
    $(this).each(function() {
        if ($(this).prop('checked', true)) {
            calculateSum();
        }
    });
});

answered Sep 9, 2013 at 16:07

Drewness

5,0804 gold badges35 silver badges51 bronze badges

Collectives™ on Stack Overflow

jQuery change value of input using fields that are updated using javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related