如何实现表单输入内容后自动拼接URL并跳转至对应页面？

嘿，我瞅了下你的代码，发现几个语法和逻辑上的小问题，导致点击按钮后没法正常拼接URL并跳转。咱们来一步步修复它：

原代码里的主要问题： #

• 变量定义错误：不能给变量名加引号，而且获取输入框值的方法不对（.val()是jQuery的写法，原生JS要用value属性）
• URL拼接有误："https://="这里多了个多余的=，会导致URL格式错误
• 缺少页面跳转的逻辑：拼好URL后没有告诉浏览器要加载这个页面
• 冗余代码：document.getElementById("search").innerHTML;这行完全没用，而且语法也不对
• 多余的语法符号：函数末尾的});是多余的，会导致JS报错

修正后的完整代码： #

<html> 
<body> 
<form> 
  <input type="text" id="search" placeholder="输入内容"> 
</form> 
<input type="button" value="提交" onclick="myFunction()"> 
<script> 
function myFunction() {
  // 获取输入框的值
  const searchInput = document.getElementById("search").value;
  // 拼接正确的URL
  const url = `https://${searchInput}.igniter.store/uc_admin`;
  // 跳转到拼接好的URL
  window.location.href = url;
}
</script> 
</body> 
</html>

代码说明： #

1. 获取输入值：用document.getElementById("search").value来获取输入框的内容，这是原生JavaScript的正确写法
2. URL拼接：用ES6的模板字符串（反引号`）来拼接URL，比加号拼接更清晰，也避免了语法错误
3. 页面跳转：通过window.location.href = url让浏览器加载新的URL地址
4. 变量声明：用const来声明不需要修改的变量，比var更规范

另外，如果你想让用户按回车键也能提交，可以给表单添加onsubmit事件，同时阻止表单默认提交行为，比如：

<form onsubmit="myFunction(); return false;"> 
  <input type="text" id="search" placeholder="输入内容"> 
  <input type="submit" value="提交"> 
</form> 
<script> 
function myFunction() {
  const searchInput = document.getElementById("search").value;
  const url = `https://${searchInput}.igniter.store/uc_admin`;
  window.location.href = url;
}
</script>

这样用户点击提交按钮或者按回车都能触发跳转啦！

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