javascript - 在 Javascript 中接受 2 个输入值

Question

已编辑

我有一个表单(我正在使用其他人的代码库，并且无法找到表单本身的实际名称，这使得这变得更加困难)，现在我有 JavaScript 中需要的 2 个字段打电话。

我有一个输入框(其中有 JavaScript 调用“getTotal”并使用 onkeydown (this.value) 发送值)，并且有一个单选按钮选择。我需要知道如何将按钮值与输入值一起发送到 JavaScript 函数。

如果我尝试使用以下方法查找“getTotal”函数中的值:

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

我收到错误“无法将 'document.getElementById('add-event-dialog-taxes')' 转换为对象”。

如果我使用:

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

我没有收到任何错误，但该值没有传递到 AJAX 页面。

如果排除尝试查找按钮值，该功能可以正常工作。

以下是字段:

<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`

这是函数:

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);
    }       
}

有人可以帮我标记这篇文章吗？我似乎永远无法让代码块正确格式化。 =(

Answer 1

您会看到错误声明 getTotal 的原因不是函数是因为您省略了 +构建 strURL 时。这将导致解析错误并尝试访问 getTotal应该会导致引用错误。

一些评论:

• 您的 radio <input>标签不应具有相同的 id ;任何两个元素都不应该共享 id
• 避免将 JavaScript 放入 onkeydown 中属性，而不是更喜欢使用 jQuery 附加处理程序。
• 希望库的使用保持一致，例如，jQuery 有一个 ajax函数将获取 XMLHttpRequest实例并为您处理所有工作。

这是一个应该适合您的示例(未经测试):

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.');
    });
}