獲得兩個字符串作爲來自用戶的輸入，而不是按鈕值

我有這樣的代碼：獲得兩個字符串作爲來自用戶的輸入，而不是按鈕值

<!DOCTYPE html> 
<html> 
<body> 

<form id="frm1" action="form_action.asp"> 
    First name: <input type="text" name="fname" value="Donald"><br> 
    Last name: <input type="text" name="lname" value="Duck"><br><br> 
    <input type="submit" value="Submit"> 
</form> 

<p>Click "Try it" to display the value of each element in the form.</p> 

<button onclick="myFunction()">Try it</button> 

<p id="demo"></p> 

<script> 
function myFunction() { 
    var x = document.getElementById("frm1"); 
    var text = ""; 
    var i; 
    for (i = 0; i < x.length ;i++) { 
     if(x.elements[i].value) 
      text += x.elements[i].value + "<br>"; 
    } 
    document.getElementById("demo").innerHTML = text; 
} 
</script> 

</body> 
</html>

這將把從提交按鈕「提交」字符串作爲輸入字符串。顯然，假設用戶不會輸入「提交」，我可以硬編碼檢查值是否爲「提交」並跳過它。

沒有其他方法嗎？

來源

2016-09-04 gsamaras

'object.onsubmit =函數（E）{};'或'object.addEventListener（ '提交'，函數（E）{}）;'然後使用電子對象來訪問表單元素。 'e.target'中不包含AFAIK'按鈕'。 – divyaSharma

正確@divyaSharma，但對於那個嬰兒的例子，它並不重要，謝謝你！ :) – gsamaras

@divyaSharma - *「使用e對象訪問表單元素」* - OP的「提交」按鈕*是一個表單元素。 – nnnnnn

我可以硬編碼檢查，如果該值是「提交」，並跳過它。

檢查值不起作用，因爲用戶實際上可能鍵入單詞「提交」。

可以測試元素類型：

if (x.elements[i].type === "text") { ... }

或者你可以選擇文本元素直接使用the querySelectorAll() method：

function myFunction() { 
 
    var x = document.querySelectorAll("#frm1 input[type='text']"); 
 
    var text = ""; 
 
    var i; 
 
    for (i = 0; i < x.length ;i++) { 
 
     text += x[i].value + "<br>"; 
 
    } 
 
    document.getElementById("demo").innerHTML = text; 
 
}

<form id="frm1" action="form_action.asp"> 
 
    First name: <input type="text" name="fname" value="Donald"><br> 
 
    Last name: <input type="text" name="lname" value="Duck"><br><br> 
 
    <input type="submit" value="Submit"> 
 
</form> 
 

 
<p>Click "Try it" to display the value of each element in the form.</p> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<p id="demo"></p>

來源

2016-09-04 03:55:22 nnnnnn

對，選擇器！謝謝n²*n³！ :) – gsamaras

顯示只是一個名稱的元素：

for (i = 0; i < x.length ;i++) { 
    if(x.elements[i].value && x.elements[i].name) 
     text += x.elements[i].value + "<br>"; 
}

不是隻選擇text輸入，因爲你不必重新編寫，如果您有其他類型的可能更有益 - 加，強化了這些物品會在表單提交過程中發送。

而且因爲我很無聊：

function myFunction() { 
 
    document.getElementById("demo").innerHTML = 
 
     Array.prototype.slice.call(document.querySelectorAll("#frm1 input[name]")) 
 
      .reduce((prev, curr) => 
 
       { return prev + curr.value + "<br />"; }, ""); 
 
} 
 

 
document.addEventListener("DOMContentLoaded", 
 
    function() { 
 
     document.getElementById("button").addEventListener("click", myFunction, false); 
 
    }, false);

<body> 
 
<form id="frm1" action="form_action.asp"> 
 
    First name: <input type="text" name="fname" value="Donald"><br> 
 
    Last name: <input type="text" name="lname" value="Duck"><br><br> 
 
    <input type="submit" value="Submit"> 
 
</form> 
 
<p>Click "Try it" to display the value of each element in the form.</p> 
 
<button id="button">Try it</button> 
 
<p id="demo"></p> 
 
</body>

來源

2016-09-04 03:53:34 Tibrogargan

作品，謝謝+1！ – gsamaras

可以檢查元素的類型（x.elements[i].type === 'text'）：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<form id="frm1" action="form_action.asp"> 
 
    First name: <input type="text" name="fname" value="Donald"><br> 
 
    Last name: <input type="text" name="lname" value="Duck"><br><br> 
 
    <input type="submit" value="Submit"> 
 
</form> 
 

 
<p>Click "Try it" to display the value of each element in the form.</p> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<p id="demo"></p> 
 

 
<script> 
 
function myFunction() { 
 
    var x = document.getElementById("frm1"); 
 
    var text = ""; 
 
    var i; 
 
    for (i = 0; i < x.length ;i++) { 
 
     if(x.elements[i].value && x.elements[i].type === 'text') 
 
      text += x.elements[i].value + "<br>"; 
 
    } 
 
    document.getElementById("demo").innerHTML = text; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

來源

2016-09-04 03:56:22 Daniel

作品，謝謝丹尼爾，+1！ – gsamaras

獲得兩個字符串作爲來自用戶的輸入，而不是按鈕值

回答

相關問題