我正在尝试将一个选项值附加到表单操作

时间:2014-01-29 12:43:00

标签: html forms get

我正在尝试使用方法get将选项值附加到表单操作。提交发送表单请求但是没有将选择选项附加到操作?

因此,在提交表单时,应使用>

https://url.here.com?domain=用户在此搜索+所选内容?

提前致谢。

    <form action="https://url.here.com?domain=" method="get">
                <div class="just-arrived-search">
                    www.<input type="search" name="domain" placeholder="Search" />
                    <select>
                        <option value="">All</option>
                        <option value=".bike">.bike</option>
                        <option value=".clothing">.clothing</option>
                        <option value=".guru">.guru</option>
                        <option value=".holding">.holdings</option>
                        <option value=".plumbing">.plumbing</option>
                        <option value=".singles">.singles</option>
                        <option value=".venture">.ventures</option>
                    </select>
                    <button class="btn-new" type="submit">Register Domain</button>
                </div>
            </form>

1 个答案:

答案 0 :(得分:1)

更新:由于您编辑了初始帖子以更清楚地说明您尝试实现的目标,因此这是解决您问题的简单方法。

使用JavaScript在提交之前将所选值附加到域。将按钮更改为具有onclick属性,而不是使其提交表单。

将此JavaScript添加到您的头部(或任何您想要的地方,但约定通常是HEAD部分或正文的底部):

<script type="text/javascript">
    function submitForm() {
        var ext = document.getElementById('ext');
        var selected_opt = ext.options[ext.selectedIndex].value;

        // Add own code to handle "All" here

        var domain = document.getElementById('domain');
        // Append selected option
        domain.value = domain.value + selected_opt;

        // Submit form
        document.getElementById('myForm').submit();
    }
</script>

这是更新后的HTML代码:

<form action="https://url.here.com" method="get" id="myForm">
    <div class="just-arrived-search">
        www.<input type="search" id="domain" name="domain" placeholder="Search" />
        <select id="ext">
            <option>All</option>
            <option>.bike</option>
            <option>.clothing</option>
            <option>.guru</option>
            <option>.holdings</option>
            <option>.plumbing</option>
            <option>.singles</option>
            <option>.ventures</option>
        </select>
        <button class="btn-new" onclick="submitForm();">Register Domain</button>
    </div>
</form>