将 javascript 变量作为 onsubmit href 链接传递到表单/输入字段

Question

id 喜欢有一个输入框，用户可以在其中输入搜索词，该搜索词可能会传递给一个 javascript 函数，然后该函数将一些 url 段与搜索词组合起来，创建一个完整的 url。到目前为止，它在没有表单的情况下工作正常，但我想向其中添加一个表单，以便用户只需按 Enter 键即可，而不是单击提交按钮。

提交按钮代码：

<a href="javascript: void(0)" onClick="this.href = i1 + document.getElementById('intranet').value + i3" target="_blank">
                    <div id="submit" class="out"
                        onMouseOver="document.getElementById('submit').className = 'over';"
                        onMouseOut="document.getElementById('submit').className = 'out';">
                        <span>Submit</span>
                    </div>
                </a>

错误的表单/输入代码：

<form action="" onSubmit="this.href = i1 + document.getElementById('intranet').value + i3; return false;" method="get" target="_blank">
                <input type="text" id="intranet" size="15" value="Search Intranet.."
                    onFocus="document.getElementById('intranet').value = ''"
                    onBlur="document.getElementById('intranet').value = 'Search Intranet..'" / >    
                </form>

可能的js函数创建url：

<script language="javascript" type="text/javascript">
                    function urlGen(value)
                        {
                            var i1 = "seg1";
                            var i2 = document.getElementById('intranet').value;
                            var i3 = "seg2";

                            var fullURL = i1 + document.getElementById('intranet').value + i3;

                            return fullURL;
                        }
                </script>

Answer 1

也许是这样的：

<form action="" onSubmit="urlGen(this);" method="get" target="_blank">
    <input type="text" id="intranet" size="15" value="Search Intranet.."
                 onFocus="this.value = ''"
                 onBlur="this.value = 'Search Intranet..'" / >    
</form>

function urlGen(f){
   var i1 = 'urlSeg1';
   var i2 = f.intranet.value;
   var i3 = 'urlSef';
   f.action = i1 + i2 + i3;
   return true;
}

Answer 2

使用表单的 onSubmit 事件将适当的数据设置为 Intranet 的输入 - 不要更改 this.href （表单没有此类属性）。请记住，JavaScript 可以在客户端禁用。还可以考虑将隐藏输入放入 i1 和 i2 的表单中，并在服务器端执行所有组合逻辑。

<form action="" onSubmit="urlGen()">
...
</form>

<script language="javascript" type="text/javascript">
                    function urlGen()
                        {


                            var i1 = "urlSeg1";
                            var i2 = document.getElementById('intranet').value;
                            var i3 = "urlSef2";

                            document.getElementById('intranet').value = i1 + i2 + i3;


                        }
                </script>

Answer 3

还应该注意，这是一个侧边栏小工具，只需要与 ie 一起使用，并且服务器/客户端限制为空。尝试了这两种方法（我认为 - 仍然是初学者），但是当我按回车键时发生的所有事情都是页面重新加载（target =“_blank”打开相同的新页面）。

我喜欢完全取消提交按钮区域，但它可以在没有表单标签的情况下发挥作用。

我现在拥有的：

<div id="row2">

                <script language="javascript" type="text/javascript">
                    function urlGen(f)
                        {
                            var i1 = "seg1";
                            var i2 = f.intranet.value;
                            var i3 = "seg2";

                            var fullURL = i1 + i2 + i3;
                            f.action = i1 + i2 + i3;

                            return true;
                        }
                </script>

                <!-- Intranet Search -->
                <form action="" onSubmit="urlGen(this)" method="post" target="_blank">
                <input type="text" id="intranet" size="15" value="Search Intranet.."
                    onFocus="this.value = ''"
                    onBlur="this.value = 'Search Intranet..'" / >   
                </form>

            <br><br>

                <a href="javascript: void(0)" onClick="this.href = i1 + document.getElementById('intranet').value + i3" target="_blank">
                    <div id="submit" class="out"
                        onMouseOver="document.getElementById('submit').className = 'over';"
                        onMouseOut="document.getElementById('submit').className = 'out';">
                        <span>Submit</span>
                    </div>
                </a>
            </div>