Question

问候，全部！我是JS的新手（我的背景是C ++，企业语言，如汇编和COBOL，以及一些轻量级.NET），所以我想知道我是否可以获得一些关于如何从两个文本框之一发送变量信息的建议一些javascript然后让JS做一些基本的检查等。这是我想要做的伪代码：

<form = webForm>
<p>
_____________
textboxPeople| searchIcon      //a text box to search an online phonebook at my company.
-------------                  //It has a little "magnifying glass" icon to search
                               //(onClick), but I would also like them to be able to 
                               //search by hitting the "enter" key on their keyboards.
</p>
<p>

_____________
texboxIntranet| searchIcon     //Same as above search textbox, but this one is used if
-------------                  //the user wishes to search my corporate intranet site.

</form>

所以结束我想要使用的前向基本形式。现在，onClick或onEnter，我希望表单传递所使用的文本框的内容以及诸如“People”或“Intranet”之类的标识符，具体取决于使用哪个框，后端的一些基本JS ：

begin JavaScript:

if(identifier = 'People')
  fire peopleSearch();

else
if(identifier = 'Intranet')
  fire intranetSearch();


function peopleSearch()
{
    http://phonebook.corporate.com/query=submittedValue    //This will take the person
                                             //that the user submitted in the form and
                                             //place it at the end of a URL, after which
                                             //it will open said complete URL in the 
                                             //same window.
}

function intranetSearch()
{
    http://intranet.corporate.com/query=submittedValue    //This will function in the
                                             //same way as the people search function.
}

end JavaScript

任何想法/建议都将不胜感激。提前谢谢大家！

Answer 1

默认 HTML表单是通过按Enter键提交的 - 因此您不必使用任何JS。您所要做的就是创建两个纯HTML表单：

<form action="http://phonebook.corporate.com/" method="Get"> <input type="text" name="query" /> </form> <form action="http://intranet.corporate.com/" method="Get"> <input type="text" name="query" /> </form>

Answer 2

<form id="search-form">
    <div><input type="text" name="query" id="query-people" /> <input type="submit" value="Search phonebook" /></div>
    <div><input type="text" name="query" id="query-intranet" /> <input type="submit" value="Search intranet" /></div>
</form>

<script>
    var search_form = document.getElementById('search-form'),
        query_people = document.getElementById('query-people'),
        query_intranet = document.getElementById('query-intranet');
    search_form.onsubmit = function() {
        if (query_people.value) {
            people_search();
        }
        else if (query_intranet.value) {
            intranet_search();
        }
        return false;
    };

    function people_search() {
        window.location = 'http://phonebook.corporate.com/?query='+ encodeURIComponent(query_people.value);
    }

    function intranet_search() {
        window.location = 'http://intranet.corporate.com/?query='+ encodeURIComponent(query_intranet.value);
    }
</script>

当然，还有其他更优雅的方法可以做到这一点......

Answer 3

首先......欢迎来到Web开发世界（它比Cobol ...... LOL更性感）。由于您对JavaScript很新，我建议您从jQuery开始。这比在传统JS中执行相同任务更简单，更清晰。这是两个搜索框的代码：

HTML：

<form id="peopleform" action="peoplesearch.aspx" method="post">
  <label for="peoplesearch">People:</label>
  <input type="text" name="peoplesearch" id="peoplesearch">
  <input type="image" id="peoplebutton" src="magnifyingglass.gif" alt="Search for people.">
</form>

<form id="intranetform" action="intranetsearch.aspx" method="post">
  <label for="intranetsearch">Intranet:</label>
  <input type="text" name="intranetsearch" id="intranetsearch">
  <input type="image" id="intranetbutton" src="magnifyingglass.gif" alt="Search the Intranet.">
</form>

JavaScript的：

<script type="text/javascript">
  $(document).ready(function(){ 
    /* People Search */
    $('#peoplesearch').keydown(function(e){ /* Detect key presses in the people search field */
      if(e.keyCode==13) { /* Detect enter */
        $('#peopleform').submit(); /* Submit people search form */
      }
    });

    $('#peoplebutton').click(function(){ /* Detect click on people search magnifying glass */
      $('#peopleform').submit(); /* Submit people search form */
    });

    /* Intranet Search */
    $('#intranetsearch').keydown(function(e){ /* Detect key presses in the Intranet search field */
      if(e.keyCode==13) { /* Detect enter */
        $('#intranetform').submit(); /* Submit Intranet search form */
      }
    });

    $('#intranetbutton').click(function(){ /* Detect click on Intranet search magnifying glass */
      $('#intranetform').submit(); /* Submit Intranet search form */
    });
  });
</script>

我将搜索框分成两种形式。这样您就可以避免传递标识符，代码变得更加明显（您在服务器上提交两个不同的页面）。你需要连接jQuery，添加你的放大镜图像并编写服务器端的东西，但我希望这能让你开始。

将可变数据从两个文本框之一发送到javascript

3 个答案: