JavaScript表单处理后吐出的内容在页面上

JavaScript after Form Handling spit content on page

本文关键字：处理 表单 JavaScript      更新时间：2023-09-26

你好，我想做一个网站，你输入你的名字，它被吐在页面上。我想用JavaScript来实现。

HTML: 

    <div id='errormsg'></div>
    <form action='' method='post' onsubmit="formSubmit();">
        <input id='name' type='text' placeholder='Slogan here...'>
        <input id='submit' type='submit' value='Generate'>
    </form>
    <div id="nameContent"></div>

JS: 

function formSubmit() {
var formName, formError, nameSentence;
formError = document.getElementById("errormsg");
formName = document.getElementById("name");
nameSentence = document.getElementById("nameContent");
if (formName == "") {
    formError.innerHTML = "Put your name in!";
} else if (formName > 20) {
    formName.innerHTML = "Max. 20 characters";
} else {
    nameSentence.innerHTML = formName ;
    }
}

第一个问题是它没有给我任何结果。我在学习JavaScript的过程中，所以请告诉我什么是错误的。div errormsg和nameContent在页面中。所以这不是问题所在。不需要jQuery，只需要JavaScript

我注意到一些变量是不需要的。
widget的值可以通过Id访问，因此删除了formName。

function formSubmit() {
  var formError = document.getElementById("errormsg");
  var nameContent = document.getElementById("nameContent");
  var formSlogan = document.getElementById("name").value;
  if (formSlogan == "") {
    formError.innerHTML = "Put your name in!";
  }
  else if (formSlogan.length > 20) {
    formError.innerHTML = "Max. 20 characters";
  }
  else {
    formError.innerHTML = "";
    nameContent.innerHTML = formSlogan;
    return true;
  }
  return false;
}
<div id='errormsg'></div>
<form action='' method='post' onsubmit="formSubmit();">
  <input id='name' type='text' placeholder='Slogan here...'>
  <input id='submit' type='submit' value='Generate'>
</form>
<div id="nameContent"></div>

你的代码在基本层面上是错误的。您以错误的方式使用赋值(=)操作符-您试图将变量分配给值，而不是值分配给变量。请反转作业:

function formSubmit() {
  var formName, formError, nameSentence;
  formError = document.getElementById("errormsg");
  formName = document.getElementById("name");
  nameSentence = document.getElementById("nameContent");
  if(formName) {
    if (formName.value === "") {
      formError.innerHTML = "Put your name in!";
    } else if (formName.value.length > 20) {
      errormsg.innerHTML = "Max. 20 characters";
    } else {
      nameSentence.innerHTML = formName.value ;
    }
  }
}

对于HTML，如果你不想刷新页面，你不必使用表单标签，你可以使用onclick()事件:

  <input id="name" type="text" placeholder="Slogan here...">
  <input id="submit" type="submit" value="Generate" onclick="formSubmit()">
  <div id="nameContent"></div>
  <div id="errormsg"></div>

请注意，formName本身是Node/DOM元素。为了检查它的值，你必须访问它的value属性，它是文本输入字段的字符串对象。

JSBin here: http://jsbin.com/xubibigope/2/

This

 formName = document.getElementById("name");

将获取输入元素。访问它的值如下所示:

 if (formName.value == "") {

因此，formName是一个对象，而if ( formName == "" ) ...将在else部分结束。因为formName是一个html元素，所以nameSentence.innerHTML = formName ;不会做任何事情。

<div id='errormsg'></div>
<form action='' method='post' onsubmit="formSubmit();return false;">
    <input id='name' type='text' placeholder='Slogan here...'>
    <input id='submit' type='submit' value='Generate'>
</form>
<div id="nameContent"></div>
function formSubmit() {
    var formName, formError, nameSentence;
    formError = document.getElementById("errormsg");
    formName = document.getElementById("name");
    nameSentence = document.getElementById("nameContent");
    if (formName.value == "") {
        formError.innerHTML = "Put your name in!";
    } else if (formName.value.length > 20) {
        formError.innerHTML = "Max. 20 characters";
    } else {
        nameSentence.innerHTML = formName.value;
    }
    return false;
}

正在修改这里的内容

相关文章：