CODEWITHSUNDEEP
javascript
user12688
user12688

Reputation: 71

how to store radio button value in javascript variable?

I have a code like this:

<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
  }
}

My form is like this:

<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>

What I want is that when I click the submit button the value of the radio button has to be stored in the variable.

When I tried to get the control, that worked but when I tried to get the value, it does not.

Upvotes: 2

Views: 7380

Answers (1)

Mackan
Mackan

Reputation: 6271

The problem with your code is mainly scoping. You declare variables inside a scope, { scope }, and then try to access them outside of this scope. This will not work.

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

The above code would not print out true, but rather undefined since the x only lives within if (1 == 1) { }.

So, declare your variables like this:

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

This will work since x is declared for the entire outer scope or function.

Below is an example with your code, just fixing the variable declarations:

// 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>

I have a suggested improvement to the code though, as can be seen below. This will use the group name of the radios instead, as it was intended, and check for a selected value by looping through the collection (by using a custom function; getcheckedValue()). In the long run this will make your code much more compact and less error-prone.

// 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>

Upvotes: 2

Related Questions