JavaScript onclick跳转失效：点击按钮仅刷新页面无法跳转至WhatsApp

核心问题及修复点： #

• 阻止表单默认提交行为：按钮为type="submit"，点击会触发表单默认刷新动作，直接中断跳转逻辑，必须阻止。
• 修正字段校验逻辑：原代码的判断逻辑完全写反，应该检查是否有必填字段为空。
• 修正变量使用错误：email已经是输入框的value值，无需再写email.value。
• URL参数编码：拼接的文本内容需做URL编码，避免特殊字符导致链接失效。

修正后的完整代码 #

JavaScript代码

function send(event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  
  var name = document.getElementById('name').value.trim();
  var email = document.getElementById('mail').value.trim();
  var message = document.getElementById('descriptions').value.trim();

  // 校验：任意字段为空就提示
  if (!name || !email || !message) {
    window.navigator.vibrate?.(200);
    alert('请填写所有必填字段🔍');
    return;
  }

  // 拼接并编码文本内容
  const text = `Hy I Am ${name} | ${email} | ${message}`;
  const encodedText = encodeURIComponent(text);
  const waLink = `https://wa.me/919811192234/?text=${encodedText}`;
  
  // 跳转链接
  window.location.href = waLink;
}

HTML代码

<div class="contactus" id="contact">
  <p align="center">CONTACT US</p>
  <hr width="50%" size="5px" color="aqua">

  <form action="" id="demo-form">
    <input type="text" placeholder="Enter Name*" id="name">
    <input type="email" placeholder="Enter Email*" id="mail">

    <textarea placeholder="Message For Us*" id="descriptions" cols="30" rows="10"></textarea>

    <!-- 传入event参数用于阻止默认行为 -->
    <button type="submit" class="submit1" onclick="send(event)">Submit</button>
  </form>
</div>

额外说明 #

1. 用trim()去除字段首尾空格，避免用户仅输入空格就提交。
2. window.navigator.vibrate?.(200)使用可选链操作符，避免在不支持振动的设备上报错。
3. encodeURIComponent()对文本内容编码，保证链接在所有场景下都能正常解析。

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