Accepting 2 input values in Javascript

Question

EDITED

I have a form (I'm using someone else's code base, and can't find the actual name of the form itself, which is making this harder), and right now I have 2 fields that are needed in a JavaScript call.

I have an input box (which has the JavaScript call 'getTotal' and is sending the value with onkeydown (this.value)) and I have a radio button selection. I need to know how to send the button value along with the input value to the JavaScript function.

If I try to find the value within the 'getTotal' function using:

var taxes = document.getElementById('add-event-dialog-taxes').checked.val();

I get the error "Cannot convert 'document.getElementById('add-event-dialog-taxes')' to object".

If I use:

var taxes = $("input[name='add-event-dialog-taxes']:checked").val();

I get no errors but the value isn't being passed to the AJAX page.

If exclude trying to find the button value, the function works properly.

Here are the fields:

<input type="text" id="add-event-dialog-subtotal" style="width:100px" placeholder="0.00" onkeydown="getTotal(this.value)"><input type='radio' name='add-event-dialog-taxes'  value='gstpst' checked/> GST + PST</br>
<input type='radio' name='add-event-dialog-taxes' value='gst'/> GST Only</br>
<input type='radio' name='add-event-dialog-taxes' value='pst' /> PST Only </br>
<input type='radio' name='add-event-dialog-taxes' value='none'/> No Taxes`

Here is the function:

function getTotal(value) {  
    //var taxes = document.getElementById('add-event-dialog-taxes').checked.val();
    //var taxes = $("input[name='add-event-dialog-taxes']:checked").val();

    var strURL="display/getTotal.php?value="+value+"&taxes="+taxes;
    var req = getXMLHTTP();

    if (req) {
        req.onreadystatechange = function() {

            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('getTotal').innerHTML=req.responseText;                 
                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }               
        }           
        req.open("GET", strURL, true);
        req.send(null);
    }       
}

And could someone please help me mark up this post? I can never seem to get the code blocks to format correctly. =(

Call: `getTotal(this.value, document.add-event-dialog-taxes.value)` Definition: `getTotal(value)` Call syntax has two arguments and definition accepts only one. That could cause your issue 'getTotal is not a function'. — ShaggyInjun, Jun 30 '12 at 00:06
If a particular answer is helpful in solving your problem, mark it as "accepted" by clicking the little checkmark next to it. If your questions are receiving unhelpful answers, clarify what you're looking for or leave constructive comments on the answers explaining how they fall short. — Tina CG Hoehr, Jun 30 '12 at 01:55

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

1

there is a typo in the definition of strURL, which might cause it:

var strURL="display/getTotal.php?value="+value+"&taxes="taxes;

I usually open the console window in my browser and check if there are any errors like this.

EDIT:

All your radio buttons have the same id. You need to fix that, see for example here: How can I check whether a radio button is selected with JavaScript?

edited May 23 '17 at 12:04

Community

1
1

answered Jun 30 '12 at 00:09

akonsu

28,824
33
119
194

score 1 · Answer 2 · answered Jun 30 '12 at 00:18

The reason you'll see an error claiming getTotal is not a function is because you have omitted a + when building strURL. This will result in a parse error and attempting to access getTotal should result in a ReferenceError.

A few comments:

Your radio <input> tags should not have the same id; no two elements should ever share an id
Avoid putting JavaScript in an onkeydown attribute, instead prefer to attach a handler using jQuery.
Prefer to be consistent in library use, for instance, jQuery has an ajax function which will procure an XMLHttpRequest instance and handle all of the work for you.

Here's an example that should work for you (untested):

HTML:

<input type="text" id="add-event-dialog-subtotal" style="width:100px" placeholder="0.00">
<input type='radio' name='add-event-dialog-taxes' value='gstpst' checked/> GST + PST</br>
<input type='radio' name='add-event-dialog-taxes' value='gst'/> GST Only</br>
<input type='radio' name='add-event-dialog-taxes' value='pst' /> PST Only </br>
<input type='radio' name='add-event-dialog-taxes' value='none'/> No Taxes`

JavaScript:

$('#add-event-dialog-subtotal').keypress(function () {
    var value = $(this).val(),
        taxes = $('input:radio[name=add-event-dialog-taxes]:checked').val();
    $.ajax({
        url: 'display/getTotal.php?value=' + value + '&taxes=' + taxes
    }).done(function (data) {
        $('#getTotal').html(data);
    }).fail(function () {
        alert('There was a problem executing the AJAX request.');
    });
}

Nothing happened with this code. I even made it so when you make any sort of change it would show, and nothing changed at all when I added a value to it. I also added in the '+' that I was missing before, and am still having problems. Please see the edits above. — Nicole, Jul 01 '12 at 01:35
@Nicole, if you need further help, post the problem code to put this problem in context to a jsFiddle or something. — Justin Summerlin, Jul 01 '12 at 04:04
@Nicole, all your check boxes have the same id. I have edited my answer. — akonsu, Jul 01 '12 at 16:49

Accepting 2 input values in Javascript

2 Answers2