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

大家好！我对JS（我的背景是C++，企业语言，如汇编和COBOL，以及一些L.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>

如有任何想法/建议，将不胜感激。提前谢谢大家

默认情况下，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>

var search_form=document.getElementById（'search-form'），
query\u people=document.getElementById（'query-people'），
query_intranet=document.getElementById（'query-intranet'）；
search_form.onsubmit=函数（）{
if（查询人员值）{
人肉搜索；
}
else if（查询值）{
内部网搜索（）；
}
返回false；
};
功能人员搜索（）{
window.location=http://phonebook.corporate.com/?query='+encodeURIComponent（query_people.value）；
}
函数intranet_search（）{
window.location=http://intranet.corporate.com/?query='+encodeURIComponent（query_intranet.value）；
}

---

当然，还有其他更优雅的方法……首先。。。欢迎来到Web开发世界（它比Cobol…LOL更性感）。由于您对JavaScript相当陌生，我建议您从。与在传统JS中执行相同的任务相比，它更简单、更干净。以下是用于两个搜索框的代码：

HTML:

人：
内部网：

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>

$（文档）.ready（函数（）{
/*人们搜索*/
$（“#peoplesearch”）.keydown（函数（e）{/*检测人员搜索字段中的按键*/
如果（e.keyCode==13）{/**/
$（“#peopleform”）.submit（）；/*提交人员搜索表单*/
}
});
$（“#peoplebutton”）。单击（函数（）{/*检测单击人员搜索放大镜*/
$（“#peopleform”）.submit（）；/*提交人员搜索表单*/
});
/*内部网搜索*/
$（“#intranetsearch”）.keydown（函数（e）{/*检测Intranet搜索字段中的按键*/
如果（e.keyCode==13）{/**/
$（“#intranetform”）.submit（）；/*提交Intranet搜索表单*/
}
});
$（“#Intranet Button”）。单击（函数（）{/*检测单击Intranet搜索放大镜*/
$（“#intranetform”）.submit（）；/*提交Intranet搜索表单*/
});
});

---

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

Javascript在后端？像在服务器上？您使用的是什么框架？这不是不可能的，但很不寻常。那么，这两个代码段应该包含在同一个文件中，还是应该包含在不同的文件中，然后我应该在前端文件中对后端文件进行某种引用？将脚本部分放在HTML文档的头部，将HTML部分放在HTML文档的主体中。您可以将脚本部分放在一个单独的文件中，并将其加载到头部的脚本子句中（例如），从而将其分离，但这不是必需的。然后您需要有两个文件（在上面的示例中为peoplesearch.aspx和intranetsearch.aspx）来处理搜索。这些文件将包含与后端系统交互的服务器端代码，然后构建结果页面。别忘了下载jQuery并在页面标题中添加对它的引用（例如，如果没有jQuery库，上面的代码将无法工作）。

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

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

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