表格提交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輸出更新

回答

相關問題