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

问题

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.

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:

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

回答1:

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

回答2:

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.

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

回答3:

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

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

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>

来源：https://stackoverflow.com/questions/3303064/pass-javascript-variables-to-form-input-fields-as-onsubmit-href-link

标签

javascript

forms

input

href

onsubmit