表格提交html输出更新

这应该是一个非常简单的，但我似乎无法明确地找到解决方案。我期待做一个JavaScript计算（从一堆表单中的输入），为此我得到两个数字。这些数字将更新同一表单中两个html输出元素的值。下面是我想要做的（如果有这样做的更好的办法，我所有的耳朵）的最小工作示例：我怎么能得到outarr的第一个元素来填充OUT1表格提交html输出更新

<!DOCTYPE HTML PUBLIC "~//IETF//DTD HTML//EN"> 
<html> 
<head> 
<script> 
function somecalc() { 
    var a = parseFloat(document.forms["form1"]["id1"].value); 
    var b = parseFloat(document.forms["form1"]["id2"].value); 
    var c = parseFloat(document.forms["form1"]["id3"].value); 
    var d = parseFloat(document.forms["form1"]["id4"].value); 
    var out1 = a-b-c-d; 
    var out2 = a+b+c+d; 
    var outarr = []; 
    outarr.push(out1); 
    outarr.push(out2); 
    return outarr; 
} 
</script> 
</head> 

<body> 

    <form name="form1"> 
    <table> 
     <tr> 
     <td> 
      Head1 
     </td> 
     <td> 
      Head2 
     </td> 
     <td> 
      Head3 
     </td> 
     <td> 
      Head4 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <input type="text" name="1" placeholder="Enter 1" id="id1" size="10" maxlength="10" /> 
     </td> 
     <td> 
      <input type="text" name="2" placeholder="Enter 2" id="id2" size="10" maxlength="10" /> 
     </td> 
     <td> 
      <input type="text" name="3" placeholder="Enter 3" id="id3" size="10" maxlength="10" /> 
     </td> 
     <td> 
      <input type="text" name="4" placeholder="Enter 4" id="id4" size="10" maxlength="10"/> 
     </td> 
     </tr> 
    </table> 
    <p><input type="submit" value="Run" onclick="somecalc();"></p> 
    <table border="1"> 
     <tr> 
     <td> 
      Out1 = <output name="out1" for=""></output> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      Out2 =<output name="out2" for=""></output> 
     </td> 
     </tr> 
    </table> 
    </form> 

</body> 
</html>

，同样，outarr的第二个元素在按下运行按钮时更新out2？

来源

2014-12-08 astromax

您可以通过value属性设置值out1和out2。

function somecalc() { 
 
    var a = parseFloat(document.forms["form1"]["id1"].value); 
 
    var b = parseFloat(document.forms["form1"]["id2"].value); 
 
    var c = parseFloat(document.forms["form1"]["id3"].value); 
 
    var d = parseFloat(document.forms["form1"]["id4"].value); 
 
    var out1 = a-b-c-d; 
 
    var out2 = a+b+c+d; 
 
    document.forms["form1"]["out1"].value = out1; 
 
    document.forms["form1"]["out2"].value = out2; 
 
    return [out1, out2]; 
 
}

<!DOCTYPE HTML PUBLIC "~//IETF//DTD HTML//EN"> 
 
<html> 
 
<body> 
 
    <form name="form1"> 
 
    <table> 
 
     <tr> 
 
     <td>Head1</td><td>Head2</td><td>Head3</td><td>Head4</td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <input type="text" name="1" placeholder="Enter 1" id="id1" size="10" maxlength="10" /> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="2" placeholder="Enter 2" id="id2" size="10" maxlength="10" /> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="3" placeholder="Enter 3" id="id3" size="10" maxlength="10" /> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="4" placeholder="Enter 4" id="id4" size="10" maxlength="10"/> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    <p><input type="submit" value="Run" onclick="somecalc();"></p> 
 
    <table border="1"> 
 
     <tr> 
 
     <td> 
 
      Out1 = <output name="out1" for=""></output> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      Out2 =<output name="out2" for=""></output> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </form> 
 
</body> 
 
</html>

来源

2014-12-08 04:52:56 robbmj

优秀伟大的资源 - 这工作。我已经接受了这个答案，因为它是第一个，我必须修改我的代码至少:) – astromax 2014-12-08 14:00:39

function somecalc() { 
    var a, b, c, d, out1, out2; 
    a= parseFloat(document.forms["form1"]["id1"].value); 
    b = parseFloat(document.forms["form1"]["id2"].value); 
    c = parseFloat(document.forms["form1"]["id3"].value); 
    d = parseFloat(document.forms["form1"]["id4"].value); 
    out1 = a-b-c-d; 
    out2 = a+b+c+d; 
    document.querySelector("output[name=out1]").innerHTML = out1 
    document.querySelector("output[name=out2]").innerHTML = out2 
}

在你的HTML试试这个，或者你可以 '身份证' 就像

<output id="out1" .. > 和document.getElementById("out1").innerHTML = out1

来源

2014-12-08 04:55:28 argentum47

感谢您的回应 - innterHTML的作品。 – astromax 2014-12-08 14:01:28

你可以做这样的事也。您可以使用document.querySelector或您使用的方法代替document.getElementById我只是为了简单起见而尝试通过代码进行操作。

通常JavaScript文件链接到外部文件，而不是在脚本标记中声明，但我想你可以做这样的作业或将所有内容放在HTML中使它更简单一些。如果你把它分开了，你将不得不做一个点击处理程序，例如在我的代码中，这是btnRun.addEventListener('click', runClick);e.preventDefault()也可以阻止提交按钮的默认动作，该按钮通过声明的任何动作提交表单（GET，POST等） ..）

而且Mozilla开发者网络拥有JavaScript语法和例子，如果你不知道它https://developer.mozilla.org/en-US/docs/Web/JavaScript

var btnRun = document.getElementById('run'); 

var out2 = document.getElementById('out2'); 
var out1 = document.getElementById('out1'); 

function runClick(e){ 
    e.preventDefault(); 

    var output1, output2; 
    var a = parseFloat(document.getElementById('id1').value); 
    var b = parseFloat(document.getElementById('id2').value); 
    var c = parseFloat(document.getElementById('id3').value); 
    var d = parseFloat(document.getElementById('id4').value); 


    output1 = a + b + c + d; 
    output2= a - b - c - d; 
    out1.innerText= output1; 
    out2.innerHTML = output2; 
} 

btnRun.addEventListener('click', runClick);

来源

2014-12-08 05:21:34 mikeLspohn

忘记提及使用innerText和innerHTML来更改输出框，以便根据您的需要以不同方式进行参考。 – mikeLspohn 2014-12-08 05:27:47

好的，这似乎是我可能想要实际做的事情。最小的工作示例实际上是我的完整代码的缩写版本，为此我在外部加载了我的函数。现在，上面的解决方案正在工作，但当我尝试在更大的站点中实现这一点时（我怀疑是由于我使用的模板的css/javascript），它实际上运行不正常。我的意思是点击运行后，执行计算，然后它快速删除我刚刚填写的表单中的所有输入/输出，并跳转到页面的顶部;这真是太糟了。 – astromax 2014-12-08 16:06:37

你愿意检查一下，也许可以评论什么可能会出错吗？我试过你的解决方案，但我认为它不能解决我的问题。例如，请参阅此页底部的表单：http://www.physics.drexel.edu/~groenera/massconvert/index.html – astromax 2014-12-08 16:09:00

表格提交html输出更新

回答

相关问题