Fire javascript onchange event programmatically

Recently I was working on a project where I needed to tally a bunch of textbox values using javascript. The textboxes were in a table with 3 columns and about 14 rows. The far column and the bottom row were readonly textboxes used to total the various rows and columns. I wrote some javascript that fired on each textbox’s onblur event so that whenever a textbox value was changed, both the column and row totals would update.

My problem was totalling the far column. Because the textboxes in the far column were readonly, the text was being changed programmatically rather than by a user. Thus, the onchange event was not firing, and the javascript written to total the column was not running.

I turned to Google, and found a little blog entry that showed me how to fix my problem. It was refreshingly simple – test to see if an onchange event exists for the readonly textbox, and then fire the event. So I could total my row, and then fire the total textbox’s onchange event to total the far column. See below for an example.

//sum row values
function addRow(sField, iField, totField)
{

//get row values from textboxes on page
var s = document.getElementById(sField).value;
var i =
document.getElementById(iField).value;

//convert values to numbers
s = Number(s);
i = Number(i);

//add values together
var total = s + i;

//load total textbox in variable
var TotField = document.getElementById(totField);

//set total textbox value to sum of values (format as currency)
TotField.value = '$' + addCommas(total);

//fire onchange event on total textbox (make sure it exists first)
if (TotField.onchange) {TotField.onchange()};

}

Notice the addCommas function call above. This is a nifty little function to format numbers with commas in all the right places — lifted wholesale from another blog entry I found. Thank God for bloggers!!

16 thoughts on “Fire javascript onchange event programmatically

  1. Hey, this is what I’ve been looking for, but I can’t get it to work!

    Please see: http://www.hpf1855.co.za/test/p_order.php

    There are two sets of js: the first calls numbers into the subtotal column according to the quantity (that works fine)

    Then those numbers are supposed to automatically be added to the ‘total’ field at the bottom using autosum.js.

    It works onBlur, but as you said, thats not going to be feasible.

    Is there any way you could assist?

    Thanks Alistair

    Like

  2. Hi Alistair

    I’m not sure without seeing your code, but lets say your Javascript that enters the value in the subtotal column looks something like this:

    //set subtotal textbox value
    txtSubTotal.value = total;

    You want to make sure that you’ve got some javascript set to run on the subtotal textbox’s
    onchange event. Then, after you load the subtotal textbox’s value (above), you call the subtotal textbox’s onchange event (below) so that the onchange event fires and your onchange javascript runs.

    //fire onchange event on subtotal textbox (make sure it exists first)
    if (txtSubTotal.onchange) txtSubTotal.onchange();

    If I’ve misunderstood you completely, or this still doesn’t work, maybe you could post some of your code.

    MaryD

    Like

  3. Thanks Mary

    ok, I made a pretty simple example. If you select a number from the drop down list, it adds a number into the right column.

    However, it only does the Autosum when you click on the next box (or onBlur), I need the Autosum to happen automatically.

    I am a designer, not so much a coder, so please bear with me 🙂 the code:

    ———————————–

    // to set item 01 subtotal amount from drop down selection

    function item01subtotal()
    {
    var num = new Array();
    num[1] = “299”;
    num[2] = “399”;
    num[3] = “499”;
    num[4] = “599”;
    num[5] = “699”;

    if (document.forms[0].item01.selectedIndex)
    {
    document.forms[0].item01total.value = num[document.forms[0].item01.selectedIndex];
    }
    else
    {
    document.forms[0].item01total.value = “”;
    }
    }

    // to set item 02 subtotal amount from drop down selection

    function item02subtotal()
    {
    var num = new Array();
    num[1] = “255”;
    num[2] = “355”;
    num[3] = “455”;
    num[4] = “555”;
    num[5] = “655”;

    if (document.forms[0].item02.selectedIndex)
    {
    document.forms[0].item02total.value = num[document.forms[0].item02.selectedIndex];
    }
    else
    {
    document.forms[0].item02total.value = “”;
    }
    }

    //the AUTO-SUM script … WHICH CURRENTLY ONLY WORKS onBLur

    // note form name is ‘order’

    function startCalc(){
    interval = setInterval(“calc()”,1);
    }

    function calc(){
    item01 = document.order.item01total.value;
    item02 = document.order.item02total.value;

    document.order.total.value = (item01 * 1) + (item02 * 1);
    }

    function stopCalc(){
    clearInterval(interval);
    }

    Like

  4. Try this:

    1) in your item01subtotal function, after “document.forms[0].item01total.value = “”;”, add “if (document.forms[0].item01total.onchange) document.forms[0].item01total.onchange();”

    The finished function section will look like this:
    if (document.forms[0].item01.selectedIndex)
    {
    document.forms[0].item01total.value = num[document.forms[0].item01.selectedIndex];
    }
    else
    {
    document.forms[0].item01total.value = “”;
    }

    if (document.forms[0].item01total.onchange) document.forms[0].item01total.onchange();
    }

    Do the same for your item02subtotal function.

    2)Make your AUTOSUM script run onchange, instead of onblur or onfocus.

    Mary D

    Like

  5. Hi,
    I have a similar problem and can’t seem to find any real help regarding this.

    i have a page that uses and iframe to “lookup” values and then post it to the parent form/page using java script.
    sample code:
    function postParent()
    {
    // parent objects (Mariner page)
    var parName = parent.document.getElementById(‘ctl1128702598561’);

    var parIframe = parent.document.getElementById(‘ctl1195551523954’);

    // iframe objects
    var oName = document.getElementById(‘txtName’);

    // import the select values
    parName.value = oName.value;

    // hide the iframe
    parIframe.style.height = 0;
    parIframe.style.visibility = “hidden”;

    }

    My issue is that when I post the page to store the data, the value on the textbox i populated using code is blank. however, if i type in the textbox any additional text then is posts the data correctly.
    i tried onblur, this.value=this.value etc. but all with no success.
    Can you see something that i don’t or can this not be done.

    Regards

    Danny

    Like

  6. Hi Danny –

    I’m not sure I’m going to be able to help you with this. I’m mostly a programmer, rather than a web designer. This means that I work mainly with ASP.NET and SQL Server, and have learned enough Javascript to get by, but am by no means a Javascript expert.

    I would probably be able to help you figure out some Javascript code that I had posted, but I’m not sure I’m going to be able to troubleshoot someone else’s code (in this case yours).

    I’m willing to give it a shot, but I wanted to make sure you understand I may not have anything useful to say. At this point, I don’t quite understand what you say your code is doing. Is there any way you could post a demo somewhere?

    Mary D

    Like

  7. I want to do something like.
    When we select option from one listbox I need to set index of second selectbox with first selectedindex.
    I did write some code that works with IE but dont work wih firefox pls help me..

    code…

    onchange=”document.getElementById(’emailProtocol’).selectedIndex=this.selectedIndex;”

    Its not working in firefox. pls help me..

    Like

  8. I am using gridview. A textbox is placed inside the grid view.
    I have JavaScript for calculating the sum but i want to make it autosum. how can i make it

    Like

  9. Hi Pankaj –

    I’m sorry to take so long to answer your questions – I didn’t get the notification emails that WordPress usually sends when a comment is posted. Do you still need help?

    Mary D

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s