如何調用一個或兩個或兩個選中的框和文本輸入

Question

我知道這是一個非常基本的問題，但我對JavaScript完全陌生，所以我很絕望。我傾注瞭如何解決這個問題，但我無法弄清楚。我需要打電話給第一個標題或第二個標題或兩個名稱。我該怎麼做呢？謝謝！！

<script type="text/javascript"> 
function ack(){ 
var name = document.forms[0].elements[0]; 
var nameValue = name.value; 
var title1 = document.forms[0].elements[1]; 
var title1Value = title1.value; 
var title2 = document.forms[0].elements[2]; 
var title2Value = title2.value; 
alert("Thank you for ordering " +title1Value +title2Value +nameValue); 
} 
</script> 

<form> 
<h3>Now Available!</h3> <h4>Happy Traveling 2: More Layouts for the Travel Scrapbooker</h4><br/><br/> 
<h3>Also available:</h3> <h4>Happy Traveling: Layouts for the Travel Scrapbooker</h4><br/><br/> 
<h4>Order today!</h4><br/><br/> 
<label>Name:</label> 
<input type="text" id="name"/><br/><br/> 
<input type="checkbox" id="title1" value="Happy Traveling"/>Happy Traveling<br/> 
<input type="checkbox" id="title2" value="Happy Traveling 2"/>Happy Traveling 2<br/><br/> 
<input type="submit" value="Submit" onclick="ack();"/> 
</form> 

Answer 1

幾點建議：
1使用document.getElementById("your id")獲得頁面元素。它更高效和可讀。所以，你的代碼chould被修改爲：

var name = document.getElementById("name"); 

2 TITLE1的值總是返回「快樂旅行」，nomatter它檢查與否。你應該檢查它是否被檢查。你可以使用「checked」屬性。

var title1 = document.getElementById("title1"); 
var title1Value = ""; 
if(title1.checked){ 
    title1Value = title1.value; 
} 

3提交表單之前，您應該檢查名稱是否爲空。
4有關javascript/html的更多信息，請參閱w3schools瞭解更多詳情。
希望它有幫助。

修改後的代碼：

function ack(){ 
    var name = document.getElementById("name"); 
    var nameValue = name.value; 
    var title1 = document.getElementById("title1"); 
    var title1Value = ""; 
    if(title1.checked){ 
     title1Value = title1.value; 
    } 
    var title2 = document.getElementById("title2"); 
    var title2Value = ""; 
    if(title2.checked){ 
     title2Value = title2.value; 
    } 
    alert("Thank you for ordering " +title1Value +title2Value +nameValue); 
} 

Answer 2

一些評論：

表單控件必須是成功的一個名字，ID屬性是可選的，通常沒有必要或有益的。表單控件可以使用其名稱屬性作爲表單的命名屬性。因此，請勿使用與表單的默認屬性（如「名稱」或「提交」）衝突的控件名稱。

最後，不要在提交按鈕上放置點擊偵聽器，因爲用戶可以通過點擊按鈕以外的方式提交表單。將偵聽器提供給表單的提交處理程序，這也意味着ack函數可以通過返回false來取消提交。

考慮：

<form id="orderForm" onsubmit="return ack();"> 
    <input type="text" name="personName"><br> 
    <input type="checkbox" name="title1" value="Happy Traveling">Happy Traveling<br> 
    <input type="checkbox" name="title2" value="Happy Traveling 2">Happy Traveling 2<br> 
    <input type="submit" value="Submit"> 
</form> 

<script type="text/javascript"> 

function ack() { 
    var form = document.forms[0]; // or use getElementById 
    var name = form.personName.value; 
    var title1 = form.title1.checked? form.title1.value : ''; 
    var title2 = form.title2.checked? form.title2.value : ''; 

    alert('Thank you ' + name + ' for ordering:\n\n' + title1 + '\n' + title2); 
} 

</script>