如何修改代码实现将两个文本框值追加到URL中

我来帮你修改这段代码，不仅实现两个输入框值追加到URL的需求，还会修正原代码里的小问题（比如错误地给输入框的值设置href，这会导致报错）。

先说说原代码的小问题 #

原代码中myInput1是输入框的值（字符串类型），不是DOM元素，所以myInput1.href和myInput1.innerHTML这两行是无效的，会抛出错误，这部分需要删掉。

修改后的完整代码 #

// Append two input values to URL
function filter() {
    // 获取两个输入框的值（确保第二个输入框的id是myInput2）
    var myInput1 = document.getElementById('myInput1').value;
    var myInput2 = document.getElementById('myInput2').value;
    
    // 定义两个参数的key（可根据需求自定义名称）
    var searchType = "fileName";
    var secondParam = "fileCategory"; // 示例第二个参数名，比如改成fileSize/author等
    
    // 拼接URL：用&连接多个参数，同时对输入值编码避免特殊字符问题
    var baseUrl = "https://www.google.com/search/?";
    var fullUrl = baseUrl + 
                  searchType + "=" + encodeURIComponent(myInput1) + 
                  "&" + 
                  secondParam + "=" + encodeURIComponent(myInput2);
    
    // 打印拼接后的URL到控制台方便调试
    console.log(fullUrl);
    
    // 跳转到拼接好的目标URL
    window.location = fullUrl;
}

关键修改点说明 #

• 新增第二个输入框获取：通过document.getElementById('myInput2').value拿到第二个输入框的值，注意要和你页面上第二个输入框的id对应。
• URL参数拼接规则：多个URL参数之间必须用&分隔，这是HTTP URL的标准格式。
• 输入值编码：使用encodeURIComponent()对输入的文本进行编码，避免用户输入空格、&、=等特殊字符时破坏URL结构。
• 完整URL协议：把原代码的www.google.com补全为https://www.google.com，确保跳转是有效的完整URL，避免浏览器把它当成相对路径。
• 移除无效代码：删掉了原代码中对输入框值设置href和innerHTML的错误逻辑。

如果你需要调整参数名称（比如把fileCategory改成其他），直接修改secondParam变量的值即可。

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