form表单回车提交时URL截断在问号后提交异常排查

问题出在表单提交事件的拦截逻辑失效，按回车触发原生表单提交时，手动写的提交逻辑和浏览器默认提交逻辑冲突：

• 点击search.png图标时，不会触发表单原生的提交流程，只会单纯执行绑定的srch()函数，函数内修改action、触发提交的流程没有干扰，所以运行正常。
• 输入框聚焦按回车时，会触发浏览器原生的表单提交行为，现有代码有两个核心缺陷：
  • 表单的onSubmit绑定写的是onSubmit="srch();"，没有接收srch函数的返回值，函数内写的return false根本无法阻止浏览器的默认提交动作。
  • 在onSubmit触发的srch函数内部手动调用submit()方法时，浏览器的原生提交流程已经在执行队列中，等srch逻辑执行完毕，浏览器会接管提交流程：默认GET方式提交会从action的?位置截断，将后面的内容识别为待拼接的表单参数位，又因为输入框没有设置name属性、无有效可提交的表单字段，最终提交的URL就停在?之前，出现截断问题。

按以下步骤修改即可解决问题：

1. 修改form标签的onSubmit绑定，让事件接收srch函数的返回值，同时显式声明提交方法为get，避免默认行为不可预期：
   把原有form标签的开头：

   <form action ="" class="form" onSubmit="srch();" id="dvcsearch">
   

   改成：

   <form action ="" class="form" onSubmit="return srch();" method="get" id="dvcsearch">
   

2. 调整srch函数逻辑，删掉多余的手动submit调用，增加参数转义避免特殊字符导致URL异常：

   function srch() {
     var p = document.getElementById('dvclist').value.trim();
     if (p == "") {
       alert("Please enter the device you're seeking");
       document.getElementById('dvclist').focus();  
       return false;
     } else {   
       document.getElementById('dvcsearch').action = 'cgi-bin/mdvl.cgi?prcdrs~device~srch~'+encodeURIComponent(p); 
       return true;
     }
   }
   

3. 给图片的click事件增加返回值，避免事件冒泡产生意外行为：
   把原有img标签：

   <img class="search-png" src="/images/graphics/search.png" onClick="srch();">
   

   改成：

   <img class="search-png" src="/images/graphics/search.png" onClick="srch();return false;">
   

更稳定的简化方案 #

如果想完全绕开表单原生提交的逻辑冲突，可以直接用页面跳转实现搜索，不用依赖表单的action和submit方法，稳定性更高：
把srch函数改成如下逻辑即可，其他绑定逻辑不变：

function srch() {
  var p = document.getElementById('dvclist').value.trim();
  if (p == "") {
    alert("Please enter the device you're seeking");
    document.getElementById('dvclist').focus();  
    return false;
  }
  window.location.href = 'cgi-bin/mdvl.cgi?prcdrs~device~srch~'+encodeURIComponent(p);
  return false;
}

内容的提问来源于stack exchange，提问作者JAC