Question

我有这样的代码：

<script type="text/javascript">
function validate(form1) 
{
  if (document.getElementById('agent').checked)
  {
    alert("agent") // works
    var agent1=document.getElementById('agent').value;
    alert(agent1)  // does not work
  }
  if (document.getElementById('holding').checked)
  {
    var holding=document.getElementById('holding').value;
  }
  if(agent1=="agent" && holding=="holding")
  {
    alert("hiii") // does not work
  }
}

我的表格是这样的：

<form id="form-validation" method="post" name="form1" onSubmit="return validate(this);">
<div class="input-group">
  <input type="radio" name="booking_type" id="direct" value="direct" onclick="document.getElementById('hidethis').style.display='none';return true;" ><span>Direct</span>
  <input type="radio" name="booking_type" id="agent" value="agent" onclick="document.getElementById('hidethis').style.display='';return true;" onfocus="document.getElementById('agent').clicked"><span>Agent</span> 
</div>

<div class="form-group">
<label class="col-md-4 control-label" for="val_username">Reservation Status<span class="text-danger">*</span></label>
  <div class="col-md-6">
    <div class="input-group">
      <input type="radio" name="reservation_status" value="H" onClick="holdingRadionButtonClicked()" id="holding" checked> Holding 
      <input type="radio" name="reservation_status" value="C" onClick="confirmRadionButtonClicked()" id="confirm"> Confirm
    </div>
  </div>
</div>
<input type="submit" class="btn btn-info btn-primary " value="Submit" name="submit">
</form>

我想要的是当我点击提交按钮时，单选按钮的值必须存储在变量中。

当我试图获得控件时，这有效但当我尝试获取值时，却没有。

Answer 1

您的代码的问题主要是范围。您在范围{ scope }内声明变量，然后尝试在此范围之外访问它们。这不起作用。

if (1 == 1) {
    var x = true;
}
document.write(x);

上述代码不打印true，而是打印undefined，因为x仅存在于if (1 == 1) { }内。

所以，声明你的变量是这样的：

var x;
if (1 == 1) {
    x = true;
}
document.write(x);

这将起作用，因为为整个外部范围或函数声明了x。

以下是您的代码示例，只是修复变量声明：

// this will check the checked radio in a group, and return the value
function getCheckedValue(el) {
  for (var i = 0, length = el.length; i < length; i++) {
    if (el[i].checked) {
      return el[i].value;
      break;
    }
  }
  return '';
}

function validate(form1) {
  var checkedbooking = getCheckedValue(document.getElementsByName('booking_type'));
  var checkedreservation = getCheckedValue(document.getElementsByName('reservation_status'));
  if (agent1 == "agent" && holding == "H") {
    alert('everything works');
  }
}

function validate(form1) {
  var agent1 = '';
  var holding = '';
  if (document.getElementById('agent').checked) {
    agent1 = document.getElementById('agent').value;
    alert(agent1)
  }
  if (document.getElementById('holding').checked) {
    holding = document.getElementById('holding').value;
  }
  if (agent1 == "agent" && holding == "H") {
    alert('everything works');
  }
  return false;
}

<form id="form-validation" method="post" name="form1" onSubmit="return validate(this);">
  <div class="input-group">
    <input type="radio" name="booking_type" id="direct" value="direct" onclick="document.getElementById('hidethis').style.display='none';return true;"><span>Direct</span>
    <input type="radio" name="booking_type" id="agent" value="agent" onclick="document.getElementById('hidethis').style.display='';return true;" onfocus="document.getElementById('agent').clicked"><span>Agent</span> 
  </div>

  <div class="form-group">
    <label class="col-md-4 control-label" for="val_username">Reservation Status<span class="text-danger">*</span>
    </label>
    <div class="col-md-6">
      <div class="input-group">
        <input type="radio" name="reservation_status" value="H" onClick="holdingRadionButtonClicked()" id="holding" checked>Holding
        <input type="radio" name="reservation_status" value="C" onClick="confirmRadionButtonClicked()" id="confirm">Confirm
      </div>
    </div>
  </div>
  <input type="submit" class="btn btn-info btn-primary " value="Submit" name="submit">
</form>

我建议改进代码，如下所示。这将使用无线电的组名称，而不是按预期方式，并通过循环遍历集合来检查所选值（通过使用自定义函数; getcheckedValue()）。从长远来看，这将使您的代码更紧凑，更不容易出错。

// this will check the checked radio in a group, and return the value
function getCheckedValue(el) {
  for (var i = 0, length = el.length; i < length; i++) {
    if (el[i].checked) {
      return el[i].value;
      break;
    }
  }
}

function validate(form1) {
  var checkedbooking = getCheckedValue(document.getElementsByName('booking_type'));
  var checkedreservation = getCheckedValue(document.getElementsByName('reservation_status'));
  if (checkedbooking && checkedreservation) {
    alert('I selected "' + checkedbooking + '" and "' + checkedreservation + '"');
  } else {
    alert('Oops, you forgot to select something');
  }
}

<form id="form-validation" method="post" name="form1" onSubmit="return validate(this);">
  <div class="input-group">
    <input type="radio" name="booking_type" id="direct" value="direct" onclick="document.getElementById('hidethis').style.display='none';return true;"><span>Direct</span>
    <input type="radio" name="booking_type" id="agent" value="agent" onclick="document.getElementById('hidethis').style.display='';return true;" onfocus="document.getElementById('agent').clicked"><span>Agent</span> 
  </div>

  <div class="form-group">
    <label class="col-md-4 control-label" for="val_username">Reservation Status<span class="text-danger">*</span>
    </label>
    <div class="col-md-6">
      <div class="input-group">
        <input type="radio" name="reservation_status" value="H" onClick="holdingRadionButtonClicked()" id="holding" checked>Holding
        <input type="radio" name="reservation_status" value="C" onClick="confirmRadionButtonClicked()" id="confirm">Confirm
      </div>
    </div>
  </div>
  <input type="submit" class="btn btn-info btn-primary " value="Submit" name="submit">
</form>

如何在javascript变量中存储单选按钮值？

1 个答案: