How to populate Purchase Order Number with a random rumber?

Question

Magento 2.3.x Purchase Order used as a payment method requieres a purchase order number. Some of our customers don't have that number, so we need to pre-populate this input field with a random content (such as a random number). This way, the customer will either enter its own purchase order number or place the order using the provided default value.

I have done the override already using a path like this and it is working fine:

(magento_dir)/app/design/frontend/(VendorName)/(ThemeName)/Magento_Offline-Payments/view/frontend/web/template/payment/purchaseorder-form.html

I tried different elemental KO scripts already but binding is not working. I don't get any error message but purchaseOrderNumber doesn't get any value from the script.

<div class="control">
<script type="text/javascript">
    var viewModel = {
        this.purchaseOrderNumber: "Enter your Purchase Order number"
    };
    ko.applyBindings(viewModel);
</script>
<input type="text"
       id="po_number"
       name="payment[po_number]"
       data-validate="{required:true}"
       value="Purchase Order Number"
       data-bind='
        attr: {title: $t("Purchase Order Number")},
        value: purchaseOrderNumber'
       class="input-text"/>
</div>

I am not sure if this field can be populated using a KO script or the default value should be provided where the purchaseOrderNumber variable is set.

Can someone help?

Answer 1

This KO binding didn't work for me either.

<script type="text/javascript">
    var viewModel = {
        purchaseOrderNumber: ko.observable("Enter Order Number") // Prepopulate
    };
</script>
<div class="control">
    <input type="text"
           id="po_number"
           name="payment[po_number]"
           data-validate="{required:true}"
           data-bind='
            attr: {title: $t("Purchase Order Number")},
            value: purchaseOrderNumber'
           class="input-text"/>
</div>