javascript - 在提交事件中更新值后未提交隐藏输入

Question

使用 Laravel 框架。

我不明白。我在顶部附近有一个带有 id = prime 的隐藏输入。

<form name="paymentForm" action="/parking_302/upload_payment" method="POST" role="form" class="form-horizontal">
    {{ csrf_field() }}
    <input type="hidden" id="parking_lot_id" name="parking_lot_id" value="{{ $parking_lot_id }}">
    <input type="hidden" id="booking_id" name="booking_id" value="{{ $booking_id }}">
    <input type="hidden" id="Price" name="Price" value="{{ $Price }}">
    <input type="hidden" id="prime" name="prime">   {{-- To be obtained --}}

    <legend>電子發票 & TapPay 付款</legend>
    <div class="form-group">
        <label for="CustomerEmail" class="col-lg-3 col-md-3 col-xs-4">電子信箱</label>
        <div class="col-lg-9 col-md-9 col-xs-8">
            <input type="email" class="form-control" id="CustomerEmail" name="CustomerEmail" value="{{ old('CustomerEmail') }}">
        </div>
    </div>
    <div class="form-group">
        <label for="CustomerPhone" class="col-md-3 col-xs-4">手機號碼</label>
        <div class="col-md-9 col-xs-8">
            <input type="number" class="form-control" id="CustomerPhone" name="CustomerPhone" value="{{ old('CustomerPhone') }}">
        </div>
    </div>
    <hr>
    <div class="form-group">
        <div class="col-md-offset-3 col-xs-offset-4 col-md-9 col-xs-8">
            <select class="form-control" id="giveTongBian" name="giveTongBian">
                <option value="no" @if(old('giveTongBian') === "no") selected @endif>不需統編</option>
                <option value="yes" @if(old('giveTongBian') === "yes") selected @endif>輸入統編</option>
            </select>
        </div>
    </div>
    <div class="form-group" id="customerIdentGroup">
        <label for="CustomerIdentifier" class="col-md-3 col-xs-4">統一編號</label>
        <div class="col-md-9 col-xs-8">
            <input type="text" class="form-control" id="CustomerIdentifier" name="CustomerIdentifier" value="{{ old('CustomerIdentifier') }}">
        </div>
    </div>
    <div class="form-group" id="customerNameGroup">
        <label for="CustomerName" class="col-md-3 col-xs-4">買受人</label>
        <div class="col-md-9 col-xs-8">
            <input type="text" class="form-control" id="CustomerName" name="CustomerName" value="{{ old('CustomerName') }}">
        </div>
    </div>
    <div class="form-group" id="customerAddrGroup">
        <label for="CustomerAddr" class="col-md-3 col-xs-4">地址</label>
        <div class="col-md-9 col-xs-8">
            <input type="text" class="form-control" id="CustomerAddr" name="CustomerAddr" value="{{ old('CustomerAddr') }}">
        </div>
    </div>
    <div class="tappay-form col-xs-offset-1 col-xs-10">
        <h4 style="color: darkkhaki;">信用卡</h4>
        <div class="form-group card-number-group">
            <label for="card-number" class="control-label"><span id="cardtype"></span>卡號</label>
            <div class="form-control card-number"></div>
        </div>
        <div class="form-group expiration-date-group">
            <label for="expiration-date" class="control-label">卡片到期日</label>
            <div class="form-control expiration-date" id="tappay-expiration-date"></div>
        </div>
        <div class="form-group cvc-group">
            <label for="cvc" class="control-label">卡片後三碼</label>
            <div class="form-control cvc"></div>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-default">Pay</button>
        </div>
    </div>
</form>

然后我有一个提交事件，它做了一些事情。在底部是我用 id = prime 更新隐藏的输入。

$('form').on('submit', function (event) {
    //Code for first part of form begin
    var boolFlag = true;    //Default is submit
    var errorMsg = "";  //Initial message

    //Begin validation
    var numOfNonEmptyFields = 0;

    if(document.forms["paymentForm"]["CustomerEmail"].value != "") {
        numOfNonEmptyFields++;
    }

    if(document.forms["paymentForm"]["CustomerPhone"].value != "") {
        numOfNonEmptyFields++;
    }

    if(numOfNonEmptyFields == 0) {
        errorMsg += "請輸入至少一個電子信箱或手機號碼.\n";
        boolFlag = false;
    }
    //End validation

    //Final steps: overall error message + success or fail case
    if(boolFlag == false) {
        alert("錯誤:\n" + errorMsg);
        return false;
    }
    //Code for first part of form end

    // fix keyboard issue in iOS device
    forceBlurIos()

    const tappayStatus = TPDirect.card.getTappayFieldsStatus()
    console.log(tappayStatus)
    // Check TPDirect.card.getTappayFieldsStatus().canGetPrime before TPDirect.card.getPrime
    if (tappayStatus.canGetPrime === false) {
        bootbox.alert({
            title: "錯誤訊息",
            message: "取得不了Prime.",
            buttons: {
                ok: {
                    label: "OK",
                    className: "btn btn-primary"
                }
            }
        });
        return false
    }
    // Get prime
    TPDirect.card.getPrime(function (result) {
        if (result.status !== 0) {
            bootbox.alert({
                title: "錯誤訊息",
                message: result.msg,
                buttons: {
                    ok: {
                        label: "OK",
                        className: "btn btn-primary"
                    }
                }
            });
            return false
        }

        $("#prime").val(result.card.prime);
    })
})

我在之后直接用 alert($("#prime").val()) 测试了隐藏输入，它似乎更新了，但是在提交之后，我的 Controller 接收到值为 null，而其他隐藏输入值是正确的.所以我怀疑这与提交事件有关。

Answer 1

向表单元素添加了 id 属性:

<form id="paymentForm" name="paymentForm" action="/parking_302/upload_payment" method="POST" role="form" class="form-horizontal">

从按钮中删除了类型并添加了 id:

<button id="submit-btn" class="btn btn-default">Pay</button>

引入了一个新的点击监听器:

$(document).on("click","#submit-btn", function(event){
    event.preventDefault(); 
    validateAndSendForm();
});

为最终表单提交引入了一个新功能:

function submitForm(){
    //do other stuff here with the finalized form and data
    //.....

    $( "#paymentForm" ).submit();
}

并将所有旧东西也放入一个新函数中:

function validateForm(){
    //Code for first part of form begin
    var boolFlag = true;    //Default is submit
    var errorMsg = "";  //Initial message

    ...
    ...
    ...

    }
    // Get prime
    TPDirect.card.getPrime(function (result) {
        if (result.status !== 0) {
            bootbox.alert({
                title: "錯誤訊息",
                message: result.msg,
                buttons: {
                    ok: {
                        label: "OK",
                        className: "btn btn-primary"
                    }
                }
            });
            return false;
        }

        $("#prime").val(result.card.prime);

        //use when you are ready to submit
        submitForm();
    })
}

因此，基本上您将拥有一个“submitForm”功能，您可以在准备好提交表单时随时使用该功能。