title: Magento 2 - How to pass input value in phtml file to block class?
body: <p>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.</p>
  
  <p>So far, I have created a button and an <code>onClick</code> 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 <code>document.getElementById</code>, but it is not working. </p>
  
  <p>The php function is:</p>
  
  <pre><code>public function updatePayment($paidAmount)
  {
      $currentPaid = $this-&gt;getSource()-&gt;getTotalPaid();
      $this-&gt;getOrder()-&gt;setTotalPaid($paidAmount + $currentPaid)-&gt;save();
  }
  </code></pre>
  
  <p>phtml file input HTML:</p>
  
  <pre><code>&lt;input id="update-payment-input" type="text" style="text-align:right;" value="&lt;?= $block-&gt;setDefaultAmountForPayment() ?&gt;"&gt;
  &lt;script&gt;
      require(['prototype'], function() {
          document.getElementById("update-payment-submit").addEventListener("click", updateAmount);
          function updateAmount() {
              &lt;?= $block-&gt;updatePayment() ?&gt;
              // Here I tried to use document.getElementById to get the input value
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I expect the value to be captured and passed to the function in <code>Block</code> class, but it shows an error saying that the document is undefined.</p>