Magento 2 - 如何在 phtml 文件中传递输入值以阻止 class？

Question

I am trying to overwrite a Magento module block with my customized code, both in phtml file and a php class in Block. In my phtml file, I added an input field and I would like to pass the value of the input to the Block class, so I could be able to use the value to update the database.

So far, I have created a button and an onClick php function called by the button, but I have no idea how to pass the input value to that function. I have tried to use the document.getElementById , but it is not working.

The php function is:

public function updatePayment($paidAmount)
{
    $currentPaid = $this->getSource()->getTotalPaid();
    $this->getOrder()->setTotalPaid($paidAmount + $currentPaid)->save();
}

phtml file input HTML:

<input id="update-payment-input" type="text" style="text-align:right;" value="<?= $block->setDefaultAmountForPayment() ?>">
<script>
    require(['prototype'], function() {
        document.getElementById("update-payment-submit").addEventListener("click", updateAmount);
        function updateAmount() {
            <?= $block->updatePayment() ?>
            // Here I tried to use document.getElementById to get the input value
        }
    });
</script>

I expect the value to be captured and passed to the function in Block class, but it shows an error saying that the document is undefined.

Answer 1

Add this code to your HTML file.

<input id="update-payment-input" type="text" style="text-align:right;" value="<?= $block->setDefaultAmountForPayment() ?>" onclick="updateAmount(this.value)">
<script>
    function updateAmount(value) {
        <?= $block->updatePayment(value) ?>
    }
</script>