Question

我创建了一个JavaScript函数，我希望存储两个表单值（电子邮件和名称）。目前，我已经让它工作了，所以当按下按钮时，只有一个用户输入值被推送到该功能。我正在努力研究如何获得两个价值观。

当前代码显示消息：

未捕获的TypeError：无法读取属性＆＃39;值＆＃39;为null

HTML：

<form>
<!-- email -->
    <div class="form-group">
        <input class="form-control" id="signupEmail" type="email" placeholder="Your E-mail" required > 
    </div>
<!-- name -->
    <div class="form-group">
    <div>           
        <input type="text" class="form-control" id="name" placeholder="Your Name" maxlength="20" required>
    </div>
    <div>

<!-- Button -->
    <div class="form-group">
        <button type="submit" class="btn btn-block btn-info" onclick="_itq.push(document.getElementById('name'+'signupEmail').value)">Sign Up</button>
    </div>
</form>

使用Javascript：

<script>
    var _itq = {
        push: function() {
            console.log.apply(console, arguments);
        }
    };

    _itq.push("_itq", "initialised", "ok");
</script>

Answer 1

您已将选择器分开并将按钮类型从type =“submit”更改为type =“button”，就像这样---

<button type="button" class="btn btn-block btn-info" onclick="_itq.push(document.getElementById('name').value, document.getElementById('signupEmail').value)">Sign Up

Answer 2

我会从你的HTML中分离出你的JS：

在新的JS文件中，向表单添加一个事件监听器......

var form = document.querySelector('form');
form.addEventListener('submit', submitForm, false);

...然后是一个抓取表单元素的函数，然后循环遍历它们，并使用值参数调用_itq。

function submitForm(e) {
  e.preventDefault();
  var selectors = this.querySelectorAll('#signupEmail, #name');
  [].slice.call(selectors).forEach(function (el) {
    _itq.push(el.value);
  });
}

DEMO

Answer 3

您无法将document.getElementById中的选择器组合在一起。您正在创建一个名为“namesignupEmail”的新ID。相反，推两次电话

<button type="submit" class="btn btn-block btn-info" onclick="_itq.push(document.getElementById('name').value, document.getElementById('signupEmail').value)">Sign Up</button>

将多个用户输入推送到JavaScript函数

3 个答案: