JavaScript Creating a Dynamic Bill Checker UI Using a Radio Toggle & Auto-Submit — How to Deal With Cross-Origin Form Submission?

[sajid ullah]

Hello everyone,
I have created a neat , responsive UI for a bill checker tool that allows users to switch between entering a Reference ID (14 digits) and a Customer ID (10 digits) using radio buttons. The data placeholder and maximum length are updated in real time from the input field. After the user clicks "Check Bill," the script verifies the input, creates a URL with the entered values, and opens it in a new window. It then attempts to auto-submit the form inside the opened page.

My main challenge:
Auto-submitting a form on the opened page is not reliable and is often blocked due to cross-origin policies.

Questions for the community:

What's a trustworthy way to simulate "auto-submit" a form and pass data between tabs/windows across domains?
Do you have any best practices or workarounds that you've used in this type of situation?
Is there a better way to do UX and code optimisation for my current flow?

Summary of what I've done:

Radio toggle updates placeholder of input and max length of input
Before it does anything else, it checks to see if the number of digits is valid.
Builds URL dynamically with query string parameters.
Open another tab and script, and try to auto-submit the form.
I will be able to release the full code if there is any interest. I'd love to get the benefit of your thoughts and advice!
I appreciate any help you can provide. 🙏

#JavaScript # CrossOrigin #FormSubmission #WebDev # UI #Frontend

I can also provide a live demo or a repository link if you'd like. Just let me know!

 

[simong1993]

i think we need to see the live demo 😀 you have me interested.

 

[sajid ullah]

i think we need to see the live demo 😀 you have me interested.

<?php
/*
Plugin Name: MEPCO Bill Viewer
Description: Adds a shortcode [ mepco_bill_viewer ] to display the MEPCO bill viewer form.
Version: 1.0
Author: Sajid ullah
*/

function mepco_bill_viewer_shortcode() {
    ob_start();
    ?>

<div class="mepco-bill-viewer">
<style>
    .mepco-bill-viewer {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .mepco-bill-viewer .container {
        width: 100%;
        text-align: center;
    }

    .mepco-bill-viewer .input-container {
        margin-bottom: 10px;
        width: 100%;
    }

    .mepco-bill-viewer input[type="text"] {
        width: 100%;
        padding: 15px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        box-sizing: border-box;
        text-align: center;
    }

    .mepco-bill-viewer .divider {
        margin: 20px 0;
        font-size: 18px;
        font-weight: bold;
        color: #555;
    }

    .mepco-bill-viewer button {
        background-color: #4d9963;
        color: white;
        border: none;
        padding: 15px 20px;
        font-size: 20px;
        border-radius: 5px;
        cursor: pointer;
        width: 100%;
        transition: background-color 0.3s;
    }

    .mepco-bill-viewer button:hover {
        background-color: #3e7c50;
    }

    .mepco-bill-viewer .error {
        color: red;
        margin-top: 10px;
        display: none;
    }

    .mepco-bill-viewer #loadingSection,
    .mepco-bill-viewer #viewBillSection {
        display: none;
        margin-top: 20px;
        width: 100%;
    }

    .mepco-bill-viewer .spinner {
        border: 4px solid rgba(0, 0, 0, 0.1);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border-left-color: #4d9963;
        animation: mepco-spin 1s linear infinite;
        margin: 10px auto;
    }

    @keyframes mepco-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .mepco-bill-viewer .loading-text {
        font-size: 16px;
        margin-top: 10px;
        color: #555;
    }

    .mepco-bill-viewer #inputSection,
    .mepco-bill-viewer #loadingSection,
    .mepco-bill-viewer #viewBillSection {
        transition: opacity 0.3s ease-in-out;
    }
</style>

<div class="container">
    <div id="inputSection">
        <div class="input-container">
            <input type="text" id="referenceNumber" placeholder="Enter 14 Digit Reference No" maxlength="14" pattern="\d*">
        </div>

        <div class="divider">or</div>

        <div class="input-container">
            <input type="text" id="customerId" placeholder="10 Digit Customer ID" maxlength="10" pattern="\d*">
        </div>

        <button id="checkBill">Check Bill</button>
        
        <div id="errorMessage" class="error">Please enter either a 14-digit Reference Number or a 10-digit Customer ID.</div>
    </div>

    <div id="loadingSection">
        <div class="spinner"></div>
        <div class="loading-text">Please wait, retrieving your bill information...</div>
    </div>

    <div id="viewBillSection">
        <form id="refForm" action="" method="POST" target="_blank">
            <input type="hidden" id="refFormValue" name="refno" value="">
            <button type="submit" class="btn btn-lg btn-success">View Bill</button>
        </form>
        
        <form id="custForm" action="" method="POST" target="_blank" style="display:none;">
            <input type="hidden" id="custFormValue" name="appno" value="">
            <button type="submit" class="btn btn-lg btn-success">View Bill</button>
        </form>
    </div>
</div>

<script>
    (function() {
        const referenceInput = document.querySelector('.mepco-bill-viewer #referenceNumber');
        const customerIdInput = document.querySelector('.mepco-bill-viewer #customerId');
        const checkBillButton = document.querySelector('.mepco-bill-viewer #checkBill');
        const errorMessage = document.querySelector('.mepco-bill-viewer #errorMessage');
        const inputSection = document.querySelector('.mepco-bill-viewer #inputSection');
        const loadingSection = document.querySelector('.mepco-bill-viewer #loadingSection');
        const viewBillSection = document.querySelector('.mepco-bill-viewer #viewBillSection');
        const refForm = document.querySelector('.mepco-bill-viewer #refForm');
        const custForm = document.querySelector('.mepco-bill-viewer #custForm');
        const refFormValue = document.querySelector('.mepco-bill-viewer #refFormValue');
        const custFormValue = document.querySelector('.mepco-bill-viewer #custFormValue');

        // Function to validate numeric input
        function validateNumericInput(input) {
            input.addEventListener('input', function() {
                this.value = this.value.replace(/[^0-9]/g, '');
            });
        }

        // Apply numeric validation to both inputs
        validateNumericInput(referenceInput);
        validateNumericInput(customerIdInput);

        // Clear the other input when one is being used
        referenceInput.addEventListener('input', function() {
            if (this.value) {
                customerIdInput.value = '';
            }
        });

        customerIdInput.addEventListener('input', function() {
            if (this.value) {
                referenceInput.value = '';
            }
        });

        // Handle the button click
        checkBillButton.addEventListener('click', function() {
            const refNo = referenceInput.value.trim();
            const custId = customerIdInput.value.trim();

            // Validate inputs
            if ((refNo && refNo.length === 14) || (custId && custId.length === 10)) {
                errorMessage.style.display = 'none';
                
                // Show loading screen
                inputSection.style.display = 'none';
                loadingSection.style.display = 'block';
                
                // Simulate loading delay for 2 seconds
                setTimeout(function() {
                    loadingSection.style.display = 'none';
                    viewBillSection.style.display = 'block';
                    
                    // Set up the appropriate form
                    if (refNo) {
                        refFormValue.value = refNo;
                        refForm.action = `https://bill.pitc.com.pk/gbill.aspx?refno=${refNo}`;
                        refForm.style.display = 'block';
                        custForm.style.display = 'none';
                    } else {
                        custFormValue.value = custId;
                        custForm.action = `https://bill.pitc.com.pk/mepcobill/general?appno=${custId}`;
                        refForm.style.display = 'none';
                        custForm.style.display = 'block';
                    }
                }, 2000);
            } else {
                // Show error message
                errorMessage.style.display = 'block';
            }
        });
    })();
</script>


</div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'mepco_bill_viewer', 'mepco_bill_viewer_shortcode' );

 

[sajid ullah]

i think we need to see the live demo 😀 you have me interested.

Hello everyone,
I have created a neat , responsive UI for a bill checker tool that allows users to switch between entering a Reference ID (14 digits) and a Customer ID (10 digits) using radio buttons. The data placeholder and maximum length are updated in real time from the input field. After the user clicks "Check Bill," the script verifies the input, creates a URL with the entered values, and opens it in a new window. It then attempts to auto-submit the form inside the opened page.

My main challenge:
Auto-submitting a form on the opened page is not reliable and is often blocked due to cross-origin policies.

Questions for the community:

What's a trustworthy way to simulate "auto-submit" a form and pass data between tabs/windows across domains?
Do you have any best practices or workarounds that you've used in this type of situation?
Is there a better way to do UX and code optimisation for my current flow?

Summary of what I've done:

Radio toggle updates placeholder of input and max length of input
Before it does anything else, it checks to see if the number of digits is valid.
Builds URL dynamically with query string parameters.
Open another tab and script, and try to auto-submit the form.
I will be able to release the full code if there is any interest. I'd love to get the benefit of your thoughts and advice!
I appreciate any help you can provide. 🙏

#JavaScript # CrossOrigin #FormSubmission #WebDev # UI #Frontend

I can also provide a live demo or a repository link if you'd like. Just let me know!

After doing some research and testing, I've came up with a solution that can effectively deal with cross-origin form submissions in my bill checker tool. Rather than trying to auto-submit forms on external sites (which is blocked in modern browsers for security reasons), I now create the desired target URL with query parameters, and programmatically open it in a new tab via window. open(). This technique leverages a reliable cross-browser behaviour and avoids cross-origin violations.



If you are interested in the working version, you can take a look at the tool on Online MEPCO Bill Checker — it will provide a smooth user experience for checking bills through Reference ID or Customer ID with a good user interface.



Thank you so much to everyone who contributed your thoughts!

Hello everyone,
I have created a neat , responsive UI for a bill checker tool that allows users to switch between entering a Reference ID (14 digits) and a Customer ID (10 digits) using radio buttons. The data placeholder and maximum length are updated in real time from the input field. After the user clicks "Check Bill," the script verifies the input, creates a URL with the entered values, and opens it in a new window. It then attempts to auto-submit the form inside the opened page.

My main challenge:
Auto-submitting a form on the opened page is not reliable and is often blocked due to cross-origin policies.

Questions for the community:

What's a trustworthy way to simulate "auto-submit" a form and pass data between tabs/windows across domains?
Do you have any best practices or workarounds that you've used in this type of situation?
Is there a better way to do UX and code optimisation for my current flow?

Summary of what I've done:

Radio toggle updates placeholder of input and max length of input
Before it does anything else, it checks to see if the number of digits is valid.
Builds URL dynamically with query string parameters.
Open another tab and script, and try to auto-submit the form.
I will be able to release the full code if there is any interest. I'd love to get the benefit of your thoughts and advice!
I appreciate any help you can provide. 🙏

#JavaScript # CrossOrigin #FormSubmission #WebDev # UI #Frontend

I can also provide a live demo or a repository link if you'd like. Just let me know!

After doing some research and testing, I've came up with a solution that can effectively deal with cross-origin form submissions in my bill checker tool. Rather than trying to auto-submit forms on external sites (which is blocked in modern browsers for security reasons), I now create the desired target URL with query parameters, and programmatically open it in a new tab via window. open(). This technique leverages a reliable cross-browser behaviour and avoids cross-origin violations.



If you are interested in the working version, you can take a look at the tool on Online MEPCO Bill Checker — it will provide a smooth user experience for checking bills through Reference ID or Customer ID with a good user interface.



Thank you so much to everyone who contributed your thoughts!