JavaScript函数填写两个输入字段时失效问题求助

Hey there! This sounds like a classic case of not preventing the default form submission behavior—let me break this down for you.

When you click a submit button that's inside a <form> element, browsers automatically trigger a default action: they send the form data to the server (or reload the page if no action is specified) and refresh the entire page. That's why your userText flashes and then disappears—right after your code renders it, the page refreshes and wipes everything away.

Chances are, in your current code, you're only stopping this default behavior when one or both fields are empty (maybe with a return false or similar), but when both fields are filled out, you're not blocking it. Here's how to fix it:

1. If you're using event listeners (modern approach) #

Make sure to call event.preventDefault() at the start of your submit handler function (or at least before the function finishes, regardless of validation results). This stops the browser from reloading the page no matter what:

const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  // Stop the default form submission first!
  e.preventDefault();
  
  const town = document.getElementById('town').value;
  const email = document.getElementById('email').value;
  
  if (!town || !email) {
    userText.textContent = "Please fill out both fields!";
    return;
  }
  
  // If both fields are filled, run your success logic
  userText.textContent = "Success! Your info was submitted.";
});

2. If you're using inline onclick or onsubmit (older approach) #

If you've got something like <form onsubmit="handleSubmit()">, make sure your function returns false every time—even when validation passes. The return false tells the browser to skip the default submission:

<form onsubmit="return handleSubmit()">
  <input type="text" id="town" placeholder="Town">
  <input type="email" id="email" placeholder="Email">
  <button type="submit">Submit</button>
</form>

<script>
function handleSubmit() {
  const town = document.getElementById('town').value;
  const email = document.getElementById('email').value;
  const userText = document.getElementById('userText');
  
  if (!town || !email) {
    userText.textContent = "Please fill out both fields!";
    return false;
  }
  
  userText.textContent = "Success!";
  // Don't forget to return false here too!
  return false;
}
</script>

The key mistake here is probably that you only returned false (or prevented the default) when validation failed, but not when it succeeded. Without that, the browser does its default page refresh, and your success message gets erased instantly.

If this doesn't fix it, double-check that your submit button is wrapped in a <form> tag—if it is, the default submission behavior is almost certainly the culprit.

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