JSFiddle - React, Tailwind, and code Playground

by williamtdavies

HTML

<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
    <p>Choose Your Service</p>
    <select name="service" id="service" title="Choose Your Service" onChange="changeFormAction(this);">
        <option value="Electricity" data-url="[[base_url]]alberta/electricity-plans">Electricity</option>
        <option value="Gas" data-url="[[base_url]]alberta/natural-gas-plans">Natural Gas</option>
        <option value="Dual" data-url="[[base_url]]alberta/dual-fuel-plans">Dual Fuel</option>
    </select>
    <p>Enter Your ZIP Code</p>
    <input name="service_zip_5" type="text" id="zipcode"/>
    <button type="submit" id="submit">Get Started</button>
</form>

<script>
    function changeFormAction(elem){
    document.forms[0].action = elem.options[elem.selectedIndex].getAttribute("data-url"); 
    }
    
    document.forms[0].onsubmit = function(e){
        // Stop form submission
        e.preventDefault();
        // Alert the current form action 
        alert(this.action);
    }
</script>