Question

我无法弄清楚我希望网站用户填写表单的代码，在提交表单后，他/她会在同一个注册页面上收到欢迎消息，而不是在另一个页面上。以下是使用innerHTML的代码。

<script>
  function displayGreeting(){
    let name = document.getElementById(‘usrname’).value;
    document.getElementById(‘outputDiv’).innerHTML = “Hello” + usrname +
      “, Welcome to Livewell page <br/>” +
      “You are officially a livewell member “ + usrname + “!”;
  }
</script>

<center><input type="submit" value="Create" onclick="displayGreeting()"/></center>
<hr>
<div id="outputDiv"></div>

Answer 1

您的代码中包含一些无效字符，例如‘，’，“，”。请务必使用'或"
您的br标记输入错误，必须为<br>
您缺少用户名的输入字段
您想使用变量name输出用户名，但下面有一些行，您使用usrname

function displayGreeting() {
  let usrname = document.getElementById('usrname').value;
  document.getElementById('outputDiv').innerHTML = 'Hello ' + usrname + ', Welcome to Livewell page' + '<br> ' + 'You are officially a livewell member ' + usrname + '!';
}

<input type="input" id="usrname">
<input type="submit" value="Create" onclick="displayGreeting()" /></center>
<hr>
<div id="outputDiv"></div>

如果要在停留在同一页面时显示提交的消息，则需要阻止表单默认操作：提交。

function displayGreeting(event) {
  event.preventDefault();
  let usrname = document.getElementById('usrname').value;
  document.getElementById('outputDiv').innerHTML = 'Hello ' + usrname + ', Welcome to Livewell page' + '<br> ' + 'You are officially a livewell member ' + usrname + '!';
}

<form onsubmit="displayGreeting(event)">
  <input type="input" id="usrname">
  <input type="submit" value="Create" /></center>
  <hr>
  <div id="outputDiv"></div>
</form>

请注意，数据将无法提交。因此，如果您希望将数据发送到后端，则需要以不同的方式执行此操作。

填写表格后欢迎留言

1 个答案: