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")获取页面元素。它更有效，更易读。因此，您的代码可以修改为：

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

2 title1的值始终返回“Happy Traveling”，无论是否检查过。你应该检查它是否被检查过。您可以使用“已检查”属性。

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属性是可选的，通常不是必需的或有用的。表单控件使用其name属性作为表单的命名属性提供。因此，请勿使用与表单的默认属性（如“name”或“submit”）冲突的控件名称。

最后，不要在提交按钮上放置单击侦听器，因为用户可以通过单击按钮以外的方式提交表单。将监听器提供给表单的提交处理程序，这也意味着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>

如何调用一个或两个或两个复选框和文本输入

2 个答案: