使用选择选项将多个 javascript 表单合并为一个表单答案

【问题标题】：Combine multiple javascript forms into one single form with select options使用选择选项将多个 javascript 表单合并为一个表单
【发布时间】：2018-06-09 11:10:55
【问题描述】：

我使用 Phonegap 创建了一个基于 JavaScript 的离线安卓应用。 index.html中有四种形式用于在数据库中搜索：

<form onsubmit="s1(); return false;">
  <input id="search1" type="text" maxlength="255" placeholder="Search in Titles only" value="" />
  <input type="submit" value="Go" />
</form>

<form onsubmit="s2(); return false;">
  <input id="search2" type="text" maxlength="255" placeholder="Search in Titles + Contents" value="" />
  <input type="submit" value="Go" />
</form>

<form onsubmit="scat(); return false;">
  <input id="cat" type="text" maxlength="255" placeholder="Search in Categories" value="" />
  <input type="submit" value="Go" />
</form>

<form onsubmit="gotoid(); return false;">
  <input id="articleid" type="text" maxlength="255" placeholder="Find based on ID" value="" />
  <input type="submit" value="Go" />
</form>

以下是页内脚本：

function s1() {
  window.location.href = "search1.html?" + document.getElementById("search1").value.trim().replace(/\s+/g, "+");
}

function s2() {
  window.location.href = "search2.html?" + document.getElementById("search2").value.trim().replace(/\s+/g, "+");
}

function scat() {
  window.location.href = "cat.html?" + document.getElementById("cat").value.trim().replace(/\s+/g, "+");
}

function gotoid() {
  window.location.href = "id.html#" + document.getElementById("articleid").value.trim().replace(/\s+/g, "");
}

问题是页面很脏。我尝试将这四种形式合二为一，通过添加<select> 和<options> 来保持它们的功能，但我无法使其工作。

任何建议，无论是CSS、HTML、JavaScript，还是它们的组合（但不是 jQuery）都将不胜感激。

【问题讨论】：

标签： javascript html css

【解决方案1】：

这样做：

var btns = document.querySelectorAll( 'input[type="button"]' );

btns.forEach( function( item, index) {
    item.addEventListener( 'click', function() {
        var elm = item.previousElementSibling,
            eid = ( index !=3 ) ? elm.id + '.html?' : 'id.html#',
            val = elm.value.trim().replace( /\s+/g, '+' );

        /* window.location.href = eid + '.html?' + val */
        console.log( eid + val )
    } )
} )

<form>
  <input id="search1" type="text" maxlength="255" placeholder="Search in Titles only" value="" />
  <input type="button" value="Go" /><br />
  <input id="search2" type="text" maxlength="255" placeholder="Search in Titles + Contents" value="" />
  <input type="button" value="Go" /><br />
  <input id="cat" type="text" maxlength="255" placeholder="Search in Categories" value="" />
  <input type="button" value="Go" /><br />
  <input id="articleid" type="text" maxlength="255" placeholder="Find based on ID" value="" />
  <input type="button" value="Go" /><br />
</form>

关于您的更新代码：

这个解决方案更好。但您可以简单地执行以下操作：

function search() {
    var select = document.getElementById( 'select' ),
        value = document.getElementById( 'key' ).value.trim().replace( /\s+/g,'+' );

    /*window.location.href = select.options[ select.selectedIndex ].value + value;*/
    console.log( select.options[ select.selectedIndex ].value + value )
}

<form onsubmit="search(); return false;">
  <input id="key" type="text" maxlength="255" placeholder="" value="" />
  <select id="select">
    <option value="search1.html?" selected>Only in Titles</option>
    <option value="search2.html?">In Titles + Contents</option>
    <option value="cat.html?">In Categories</option>
    <option value="id.html#">Based on ID</option>
  </select>
  <input type="submit" value="Go" />
</form>

【讨论】：

我刚刚设法让它工作。请看一下，让我知道这是否是标准方式。谢谢
您的 HTML 比原始 HTML 更好，但考虑到四个输入和四个按钮，它可能会令人困惑。不管怎样，我投了赞成票。
@Siamak，你是对的。但我只更新了她的代码。感谢您的投票。
Kavian，更新后的代码没问题。越短越好。谢谢。

【解决方案2】：

我设法让它工作。这是新的 HTML：

<form onsubmit="search(); return false;">
<input id="key" type="text" maxlength="255" placeholder="" value="" />
<select>
<option id="s1" selected>Only in Titles</option>
<option id="s2">In Titles + Contents</option>
<option id="scat">In Categories</option>
<option id="gotoid">Based on ID</option>
</select>
<input type="submit" value="Go" />
</form>

新脚本如下：

function search(){
if(document.getElementById("s1").selected == true){
window.location.href = "search1.html?" + document.getElementById("key").value.trim().replace(/\s+/g,"+");
}

else if(document.getElementById("s2").selected == true){
window.location.href = "search2.html?" + document.getElementById("key").value.trim().replace(/\s+/g,"+");
}

else if(document.getElementById("scat").selected == true){
window.location.href = "cat.html?" + document.getElementById("key").value.trim().replace(/\s+/g,"+");
}

else if(document.getElementById("gotoid").selected == true){
window.location.href = "id.html#" + document.getElementById("key").value.trim().replace(/\s+/g,"");
}

else{
alert('Something went wrong. Please try again!');
}
}

如果这不是标准的做法，请发表评论。

【讨论】：