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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3303064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 00:47:24  来源:igfitidea点击:

pass javascript variables to form/input fields as onsubmit href link

javascriptformsinputhrefonsubmit

提问by jake

id like to have an input box that a user can enter a search term into that gets passed to maybe a javascript function that then combines some url segments with the search term creating a full url. up until now its been working fine without a form around it, but i would like to add a form to it so users can just hit enter rather than clicking a submit button.

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

submit button code:

提交按钮代码:

<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>

faulty form/input code:

错误的表格/输入代码:

<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>

possible js function to create url:

可能的 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>

采纳答案by Satyajit

Maybe something like:

也许是这样的:

<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;
}

回答by dmitko

Use form's onSubmit event where set the appropriate data to the intranet's input - don't change this.href (form does not have such attribute). Remember though that JavaScript can be disabled at the client's side. Consider also placing hidden inputs into the form for i1 and i2 and do all combination logics at the server side.

使用表单的 onSubmit 事件,将适当的数据设置为内部网的输入 - 不要更改 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>

回答by jake

should also note that this is for a sidebar gadget and just needs to work with ie and server/client limitations is null. tried both of those methods (i think - still a beginner), but all that happens when i hit enter is the page reloads (target="_blank" opens new page of the same).

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

id like to do away with the submit button area entirely, but it is functional with that and without the form tags.

id 喜欢完全取消提交按钮区域,但它可以在没有表单标签的情况下使用。

what i have right now:

我现在拥有的:

<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>