javascript - 将 HTML 表单输入传递给 JavaScript 到 BaaS

标签 javascript jquery html

我正在尝试将用户 HTML 输入字段值存储在 BaaS(无后端)中。在 .js 脚本中使用固定值并在页面加载时执行它,我能够成功存储字段(apiEndpoint apiSecretkey, emailAddress) 到 Request 表:

function Request(args) {
    args = args || {};
    this.apiEndpoint = args.apiEndpoint || "";
    this.apiSecretkey = args.apiSecretkey || "";
    this.emailAddress = args.emailAddress || "";
}

var requestObject = new Request( {
apiEndpoint: "https://api.foo.com/",
apiSecretkey: "foo",
emailAddress: "foo@foo.com",
});

var savedRequest = Backendless.Persistence.of( Request ).save( requestObject );

我想做的是存储变量(并且在按钮单击而不是页面加载时)。这是我的非常基本的 HTML 表单:

<head>
    <script src="libs/backendless.js"></script>
    <script src="js/app.js"></script>
</head>

<body>
    <form>
        <input type="text" name="endpoint"><br>
        <input type="text" name="secretkey"><br>
        <input type="text" name="email"><br>
        <input type="button" onclick="________" value="Submit">
    </form>
</body>

app.js 以及变量:

function Request(args) {
    args = args || {};
    this.apiEndpoint = args.apiEndpoint || "";
    this.apiSecretkey = args.apiSecretkey || "";
    this.emailAddress = args.emailAddress || "";
}

var endpoint = document.getElementsByName("endpoint").value,
    secretkey = document.getElementsByName("secretkey").value,
    email = document.getElementsByName("email").value;

var requestObject = new Request( {
apiEndpoint: endpoint,
apiSecretkey: secretkey,
emailAddress: email,
});

var savedRequest = Backendless.Persistence.of( Request ).save( requestObject );

当我单击“提交”按钮时没有任何反应。对于我表单中的 onclick="",我尝试过 Request()JavaScript: Request()Backendless.Persistence。 of(Request).save(requestObject);.

我做错了什么?感谢您的帮助。

最佳答案

如果您粘贴的 JavaScript 是页面上唯一的 JavaScript,那么它很可能全部在页面加载时执行(这就是硬编码值起作用的原因,它们在加载时存在)。您想要的是在单击提交按钮时执行代码。您可以通过为 onsubmit 属性分配一个值来实现此目的,然后在 JavaScript 中创建一个名为 sendData 的函数。

编辑

看起来我因为忘记包含对 BaaS 的实际调用而搞乱了该函数。下面是一个片段,展示了它应该如何工作。您绝对不希望将 onclick 处理程序分配给您的提交按钮。

此外,getElementsByName 返回一个 NodeList 而不是 Element,因此 value 属性未定义,您必须遍历列表或访问第一个元素。如果您不介意使用 ids,则 getElementById 会更好。

function Request(args) {
    args = args || {};
    this.apiEndpoint = args.apiEndpoint || "";
    this.apiSecretkey = args.apiSecretkey || "";
    this.emailAddress = args.emailAddress || "";
}


function sendData () {
  var endpoint = document.getElementById("endpoint").value,
    secretkey = document.getElementById("secretkey").value,
    email = document.getElementById("email").value;

  var requestObject = new Request( {
    apiEndpoint: endpoint,
    apiSecretkey: secretkey,
    emailAddress: email,
  });
  alert('apiEndpoint = ' + requestObject.apiEndpoint + '\n' +'apiSecretkey = ' + requestObject.apiSecretkey + '\n' + 'emailAddress = ' + requestObject.emailAddress);
  //var savedRequest = Backendless.Persistence.of( Request ).save( requestObject );
}
<body>
    <form onsubmit="sendData()">
        <input type="text" id="endpoint"><br>
        <input type="text" id="secretkey"><br>
        <input type="text" id="email"><br>
        <input type="submit" value="Submit">
    </form>
</body>

关于javascript - 将 HTML 表单输入传递给 JavaScript 到 BaaS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30631936/

相关文章:

javascript - pageMod 多次附加 worker

javascript - 锁定 contenteditable ="true"div 中的元素

javascript - 如何使用 Backbone.js 处理嵌套 View ?

javascript - 当文本字段不为空时,Ajax 自动完成 jquery 不起作用

html - MS IE 8 Xpages 问题 - 从 Outlook 收到的邮件

javascript - 将 window.getSelection().extentOffset 引用到某个 HTML 元素

html - slider 动画

javascript - 尝试使用传单映射坐标时获取无效的 LatLng 对象

javascript - 在页面加载时折叠导航栏

jquery - 如何在cakePHP中使用jquery