Question

我在着陆页上有一个下拉表单，需要在表单提交时更改“提交”按钮URL。见下面的屏幕截图：

以下是表单的代码：

<form action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&amp;variant=a" method="POST">
    <input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">
    <input type="hidden" name="pageVariant" value="a">
    <fieldset class="clearfix" style="width: 483px; height: -21px;">
    <div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
    <select id="which_best_describes_your_company" name="which_best_describes_your_company" class="text form_elem_which_best_describes_your_company">
        <option value="">Select One</option>
        <option value="Tire Dealer">Tire Dealer</option>
        <option value="Auto Service Dealer">Auto Service Dealer</option>
        <option value="Tire Wholesaler">Tire Wholesaler</option>
        <option value="Auto Parts Shop">Auto Parts Shop</option>
        <option value="Warehouse Distributor">Warehouse Distributor</option>
        <option value="Jobber">Jobber</option>
        <option value="Other">Other</option>
     </select>
     </div>
    </fieldset>
</form>

我发现了一些似乎可行的代码，但我没有经验足以a）更改下拉菜单的代码和b）添加一个或两个以上的URL（有六个左右）选项）。有人可以帮忙吗？

非常感谢提前：）

ETA：我实际上无法编辑表单代码，因为它在我的编辑器中是拖放的。

Answer 1

使用select元素上的侦听器捕获所选值并追加或使用它来修改表单操作。以下示例将所选值附加到表单操作：

HTML：

<form id="form" action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&amp;variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32"><input type="hidden" name="pageVariant" value="a">
    <fieldset class="clearfix" style="width: 483px; height: -21px;">
    <div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
    <select onchange="updateFormAction()" id="which_best_describes_your_company" name="which_best_describes_your_company" class="text form_elem_which_best_describes_your_company"><option value="">Select One</option><option value="Tire Dealer">Tire Dealer</option><option value="Auto Service Dealer">Auto Service Dealer</option><option value="Tire Wholesaler">Tire Wholesaler</option><option value="Auto Parts Shop">Auto Parts Shop</option><option value="Warehouse Distributor">Warehouse Distributor</option><option value="Jobber">Jobber</option><option value="Other">Other</option></select>
    </div>
    </fieldset>
    </form>

使用Javascript：

function updateFormAction() {
 var selectedVal = document.getElementById('which_best_describes_your_company').value
 var form = document.getElementById('form')
 form.setAttribute('action', form.action + '&company='+selectedVal)
}

以下是测试它的小提琴：https://jsfiddle.net/h23g6o3x/

Answer 2

据我了解您的代码，pageId是重要信息。所以我会把它作为你的下拉列表的值（下面只是虚拟数据，需要用实际的pageIds替换）并在onchange方法中设置值。

<form action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&amp;variant=a" method="POST">

    <input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">

    <input type="hidden" name="pageVariant" value="a">

    <fieldset class="clearfix" style="width: 483px; height: -21px;">

        <div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">

            <select id="which_best_describes_your_company" name="which_best_describes_your_company"
                    class="text form_elem_which_best_describes_your_company" onchange="selectionChanged(this.value)">
                <option value="">Select One</option>
                <option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">Tire Dealer</option>
                <option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef33">Auto Service Dealer</option>
                <option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef34">Tire Wholesaler</option>
                <option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef35>Auto Parts Shop</option>
                <option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef36">Warehouse Distributor</option>
                <option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef37">Jobber</option>
                <option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef38">Other</option>
            </select>

        </div>
    </fieldset>
</form>

<script>
    function(selectedPageId){
         document.getElementById('pageId).value = selectedPageId
     }
</script>

动态表单提交URL

2 个答案: