将多字段 html 输入组合成一个参数并传递给 javascript答案

【问题标题】：combine multi-field html inputs into one argument and pass to javascript将多字段 html 输入组合成一个参数并传递给 javascript
【发布时间】：2016-04-15 02:26:27
【问题描述】：

试图解决这个问题，但我碰壁了。我试图让 html 将多个字段的输入（它们组合了一个字符串）传递给一个 javascript 函数。我开始布置它……然后意识到我不确定该去哪里。这是我目前所拥有的。

HTML

<!DOCTYPE HTML>
<html>
  <script src="http://cdn.jsdelivr.net/particle-api-js/5/particle.min.js" type=
    "text/javascript" type="text/javascript" charset="utf-8">  </script>
<body>

    <p>
    Pump No:<input type="text" id="channel" value="" size="5">
    Time ON:<input type="text" id="onTime" value="" size="8">
    Number of Doses:<input type="text" id="numberOfDoses" value="" size="5">
    Total Dose:<input type="text" id="totalDose" value="" size="5">
    <button onclick="setupChannel()">SET</button>
    </p>

Javascript

<script type="text/javascript">
      var particle = new Particle();
      var deviceID    = "35002400094734343231xxxx";
      var accessToken = "3aaacdf9121d404c1a60d5f5f853585c156axxxx";
      var fnName = setupChannel;

      function setupChannel(name, argument) {
        var newValue = document.getElementById().value;
        var fnPr = particle.callFunction({
        deviceId: deviceID, name: fnName,argument: fnArg,auth: accessToken
    });
    fnPr.then(function(data) {
        console.log('Function called succesfully:', data);
    }, function(err) {
        console.log('An error occurred:', err);
    });
}
       </script>

【问题讨论】：

为什么你的所有表单元素都包含在一个
标签中？但不在表格内？也没有任何输入具有名称属性，因此您无论如何都无法提交表单。那么验证呢？空字段？输入无效？还要小心输入 - 当您将它们放入 js 函数时 - 它们将是字符串而不是数字，因此如果您想将它们用于计算，则需要将它们转换为数字。

标签： javascript html function input

【解决方案1】：

如果您只想将所有字段值组合成一个字符串。这样做：

<form name="frm">
  <p>
    Pump No:<input type="text" id="channel" value="" size="5">
    Time ON:<input type="text" id="onTime" value="" size="8">
    Number of Doses:<input type="text" id="numberOfDoses" value="" size="5">
    Total Dose:<input type="text" id="totalDose" value="" size="5">
    <button onclick="setupChannel(combineFields())">SET</button>
  </p>
</form>
<script type="text/javascript">
  var particle = new Particle();
  var deviceID    = "35002400094734343231xxxx";
  var accessToken = "3aaacdf9121d404c1a60d5f5f853585c156axxxx";
  var fnName = setupChannel;

  function combineFields() {
    var spacer = " "; // if you want to separate the string elements set spacer to " "  otherwise set spacer to an empty string ("")
    var newValue=""; 
    var elements =document.forms["frm"].elements;
    for(i=0; i<elements.length;i++) {
      newValue+=elements[i].value+spacer;
    };
    return newValue.trim();
  }
  function setupChannel(fields) {
    alert('this is your combined fields into a string: '+fields);
    /// your setup channel code here.
  }
</script>

【讨论】：

我也会这样做，但要小心 - 此示例中没有分隔符，这意味着确定“11”是“11”的一个值还是两个值将是一个挑战“1”的。我建议使用分隔符或简单地将每个值推入数组。
他没有指定他想区分字符串中的每个字段..只是他想将它们组合起来。
ypu 我明白了——但我也会指出这种思维方式存在局限性，它可能会导致解释字符串时出现问题。抱歉 - 我发帖时心情不好
你说得对，我从没想过他以后可能想把字符串弄断……我会添加一个简单的空格分隔符。
感谢两位对此的帮助。有几件事，返回的字符串在最后一个参数 (1,10000,10,100,,) 之后显示有两个逗号，它不应该有任何逗号。最后，我做了一些调整，试图将字段传递给粒子调用函数。我做了一个小提琴，所以你可以看到 - jsfiddle.net/DustinJB/n39ecq53/#&togetherjs=qgPzuTrJGP