无法获得文本字段的值

时间:2018-04-01 03:10:45

标签: javascript jquery html ajax jsp

我正在尝试使用JQuery在JSP中编写代码来获取信用卡信息并将其传递给servlet来处理它。以下是我的代码。

<!DOCTYPE html>
<html>
<head>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

</script>
<script>
    function dataValidation() {
        var cHolderName = $("#cardHolderName").val();
        var cCardNumber = $("#creditCardNumber").val();
        var eDate = $("#expirationDate").val();
        alert($("#cardHolderName").val());
        $.post("../CreditCard/CreditCardEvaluation", {
            cardHolderName : cHolderName,
            creditCardNumber : cCardNumber,
            expirationDate : eDate
        }, function(data, status) {

            if (data == 0) {
                alert("Invaid card data.");
            }

            if (data == 1) {

                $("result").text("Your order is placed.")
            }
        });
    }
</script>

</head>
<body>
    <form>
        Name of Card Holder:<input type="text" name="cardHolderName" value="Zahra"><br> 
        Credit Card Number:<input type="text" name="creditCardNumber" value="1-2-3-4"><br>
        Expiration Date:<input type="text" name="expirationDate" value="1/2/3">
        <input type="submit" onclick="dataValidation()"><br>
        <p id="result">
    </form>
</body>
</html>

在dataValidation函数中,我尝试显示持卡人名称,但它为空并显示“未定义”消息。有没有人知道原因是什么?

1 个答案:

答案 0 :(得分:1)

在:

var cHolderName = $("#cardHolderName").val();
var cCardNumber = $("#creditCardNumber").val();
var eDate = $("#expirationDate").val();

您正在使用ID选择器。因此,请将name属性更改为id s:

<form>
    Name of Card Holder:<input type="text" id="cardHolderName" value="Zahra"><br> 
    Credit Card Number:<input type="text" id="creditCardNumber" value="1-2-3-4"><br>
    Expiration Date:<input type="text" id="expirationDate" value="1/2/3">

    <input type="submit" onclick="dataValidation()"><br>
    <p id="result">
</form>

或者,您可以保留name属性并更改选择器:

var cHolderName = $("[name='cardHolderName']").val();
var cCardNumber = $("[name='creditCardNumber']").val();
var eDate = $("[name='expirationDate']").val();

但我建议采用第一种方法(更改为id)。