JavaScript问题：输入文本框始终返回空字符串值

你的问题根源有两个：

1. 表单的onchange事件会监听所有表单控件的变化（包括文本框），当你在文本框输入完成后点击提交按钮，文本框失焦会触发form的onchange，调用smsORemail()函数，而该函数里的textbox.value = ""会清空文本框内容，导致提交时值为空。
2. 原代码中仅给第一个radio按钮绑定了change事件，且绑定方式错误（未调用函数），导致切换第二个radio时可能无法正确触发文本框切换逻辑。

步骤1：移除表单的全局onchange事件 #

修改HTML，删掉form标签上的onchange="smsORemail()"，避免文本框变化触发清空逻辑：

<form name="myform" class="form">
  <!-- 其余内容不变 -->
</form>

步骤2：正确绑定radio的change事件 #

修改JS代码，给所有.send类的radio按钮绑定change事件，确保切换任意radio都能触发文本框切换：

// 替换原input.onchange的绑定代码
const radios = document.querySelectorAll(".send");
radios.forEach(radio => {
  radio.addEventListener('change', smsORemail);
});

步骤3：优化smsORemail函数（可选） #

如果不需要每次切换radio都清空文本框，可以去掉textbox.value = ""，保留也不影响，但避免不必要的清空：

function smsORemail() {
  let choice = form.notif.value;
  if (!choice) {
    return;
  }
  const textbox = document.getElementById("textbox");
  const submitBtn = document.getElementById("submit");
  
  if (choice === 'email') {
    change.innerHTML = 'Email: ';
    textbox.style.display = "block";
    // textbox.value = ""; // 可选：去掉此行为，保留用户之前输入的内容
    textbox.placeholder = "john.smith@gmail.com";
  } else if (choice === 'sms') {
    change.innerHTML = 'Phone: ';
    textbox.style.display = "block";
    // textbox.value = ""; // 可选：去掉此行为
    textbox.placeholder = "555-555-5555";
  }
  submitBtn.style.display = "block";
}

修正后的完整代码 #

HTML

<form name="myform" class="form">
  <p>Would you like notifications for new dogs and/or new cats?</p>
  <input type="checkbox" id="dog_checkbox" name="chk_dog" value="dogs"> Dogs<br>
  <input type="checkbox" id="cat_checkbox" name="chk_cat" value="cats"> Cats
  <br><br>

  <p>Would you like email or sms notifications?</p>
  <input type="radio" class="send" id="email_id" name="notif" value="email">
  <label for="email_id">E-mail</label>

  <input type="radio" class="send" id="sms_id" name="notif" value="sms">
  <label for="sms_id">SMS</label>
  <br><br>

  <label for="textbox" id="change" style="text-align: left; float: left;padding-right: 5px;"></label>
  <input type="text" name="comm_textbox" id="textbox" style="display: none;" placeholder="" value="">
  <br>
  <button type="submit" id="submit" style="display: none;">Submit</button>
</form>

JavaScript

let form = document.querySelector('.form');
let change = document.getElementById('change');
const radios = document.querySelectorAll(".send");

// 给所有radio绑定change事件
radios.forEach(radio => {
  radio.addEventListener('change', smsORemail);
});

function smsORemail() {
  let choice = form.notif.value;
  if (!choice) {
    return;
  }
  const textbox = document.getElementById("textbox");
  const submitBtn = document.getElementById("submit");
  
  if (choice === 'email') {
    change.innerHTML = 'Email: ';
    textbox.style.display = "block";
    textbox.placeholder = "john.smith@gmail.com";
  } else if (choice === 'sms') {
    change.innerHTML = 'Phone: ';
    textbox.style.display = "block";
    textbox.placeholder = "555-555-5555";
  }
  submitBtn.style.display = "block";
}

document.getElementById("textbox").oninput = textbox_update;

function textbox_update() {
  let textbox_value = document.querySelector('input[name="comm_textbox"]').value;
  console.log(textbox_value)
  return textbox_value;
}

form.addEventListener('submit', event => {
  event.preventDefault();
  let textbox_value = textbox_update();
  const formData = new FormData(form);

  console.log(formData.get('notif'));
  console.log(formData.get('chk_dog'));
  console.log(formData.get('chk_cat'));
  console.log(formData.get('comm_textbox'));
  console.log(textbox_value);
})

修改后，文本框输入内容后点击提交，formData.get('comm_textbox')和textbox_value都会正确返回输入的值，不会再被清空。

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