Javascript - 如何从文本和表单组中获取值答案

【问题标题】：Javascript - how to get values from Text and form-groupJavascript - 如何从文本和表单组中获取值
【发布时间】：2018-07-06 17:03:09
【问题描述】：

我是 Javascript 新手。我想做的是从文本字段和表单组、选项中获取值。

这是我的代码示例

var phoneNumber = document.getElementById("phoneNumber");
var email = document.getElementById("email");
var type = document.getElementById("typeNotification");

function addButton(){
  var typeNote = alert(email);
  console.log(email);
  console.log(phoneNumber);
}

<div class="form-group">
  <select id="typeNotification" class="form-control">
      <option>Shock Sensor</option>
      <option>GPS Jamming</option>
      <option>Ingition off</option>
      <option>Temperture</option>
  </select>
</div>
<input type="text" id="phoneNumber" class="form-control" id="exampleInputSMS" aria-describedby="emailHelp" placeholder="Enter phone number">

<input type="email" id="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

<button type="button" onclick="javascript: addButton()" id="addNotification" class="btn btn-primary" >Add Notification</button>

我看过几部视频，他们添加了这一行 document.getElementById("typeNotification") - 由于某种原因它不允许我添加它。知道我该怎么做吗？

【问题讨论】：

使用.value 获取输入的值。
HTML 中的phoneNumber 和email 在哪里？
我试过了。但由于某种原因它不起作用。我没有那个选项。
它给了我 nodeValue

标签： javascript twitter-bootstrap bootstrap-4

【解决方案1】：

JavaScript 语句 document.getElementById("ElementID") 用于从表单元素中获取值。请说明你想做什么。

【讨论】：

【解决方案2】：

使用

var index = document.getElementById("typeNotification").selectedIndex获取所选条目的索引

并使用

var x = document.getElementById("typeNotification").options 获取所有选项

然后通过x 就像x[index].text 说出所选条目的文本。

Here is a good Example

【讨论】：

【解决方案3】：

.value 是您要查找的属性

/** @type {HTMLElement} */
var phoneNumber = document.getElementById("phoneNumber");

/** @type {HTMLElement} */
var email = document.getElementById("email");

/** @type {HTMLElement} */
var type = document.getElementById("typeNotification");

function addButton(){
  // var typeNote = alert(email);
  console.log( type.value )
}

<div class="form-group">
  <select id="typeNotification" class="form-control">
      <option>Shock Sensor</option>
      <option>GPS Jamming</option>
      <option>Ingition off</option>
      <option>Temperture</option>
  </select>
</div>

<button type="button" onclick="javascript: addButton()" id="addNotification" class="btn btn-primary" >Add Notification</button>

编辑：添加了文档块

【讨论】：

我不知道为什么，但我不能 .value，我没有那个选项。它只给了我NodeValue。知道为什么吗？
@E.Bolandian 谁或什么阻止您在手指上输入.value？ :D
哈哈不，我没有那个选项。我输入“。”但它没有找到 value 选项
Visual Studio 代码
@E.Bolandian 我编辑了答案，在您的变量上方添加 /** @type {HTMLElement} */ 以告诉 VSCode 它是哪种类型。就能找到.value

【解决方案4】：

最简单的方法

如果您只想在单击按钮时获取所有表单元素的值，请使用value 在单击按钮时获取该元素的值

或对于选择框，您也可以获得这样的值：

var myIndex = document.getElementById("typeNotification").selectedIndex;
var myOptions = document.getElementById("typeNotification").options;

这是您的代码正在运行的 sn-p

var phoneNumber = document.getElementById("phoneNumber");
var email = document.getElementById("email");
var type = document.getElementById("typeNotification");

   
function addButton(){
  console.log(phoneNumber.value);
  console.log(email.value);
  
  //Use this
  console.log(type.value);
  //Or this
  var myIndex = document.getElementById("typeNotification").selectedIndex;
  var myOptions = document.getElementById("typeNotification").options;
  console.log(myOptions[myIndex].text);

}

<div class="form-group">
  <select id="typeNotification" class="form-control">
      <option>Shock Sensor</option>
      <option>GPS Jamming</option>
      <option>Ingition off</option>
      <option>Temperture</option>
  </select>
</div>
<input type="text" id="phoneNumber" class="form-control"  aria-describedby="emailHelp" placeholder="Enter phone number">

<input type="email" id="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">

<button type="button" onclick="javascript: addButton()" id="addNotification" class="btn btn-primary" >Add Notification</button>

另外，我做了以下更正

删除var typeNote = alert(email);
从 phoneNumber 字段中删除了重复的 ID id="exampleInputSMS"
从电子邮件字段中删除了重复的 ID id="exampleInputEmail1"

【讨论】：