JavaScript function having an undefined value caused by a radio button

Question

JavaScript function having an undefined value caused by a radio button

I am having trouble passing the value of a radio button to a JavaScript function. I have been testing my code but keep running into an issue where the returned value is always undefined. Here is the snippet of my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<SCRIPT TYPE="text/javascript">
 <!--
 function jobWindow(){
  var target;
  for( i = 0; i < document.jobView.sales.length; i++ ){
   if(document.jobView.sales[i].checked == true) {
    target = document.jobView.sales[i].value;
    break;
   }
  }
  alert("val = " + target);
  //var load = window.open('target','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,location=no,status=no');  
 }
 // -->
</script>

</head>

<body>

<form name="jobView">
<input name ="sales" value="all" type="radio" />All&nbsp;&nbsp;&nbsp;&nbsp;
<input name="sales" value="darell"  type="radio" />Darell&nbsp;&nbsp;&nbsp;&nbsp;
<input name="sales" value="kevin" type="radio" />Kevin&nbsp;&nbsp;&nbsp;&nbsp;
<input name="sales" value="brad" type="radio" />Brad&nbsp;&nbsp;&nbsp;&nbsp;
<input name="sales" value="chongo" type="radio" />Chongo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="View Records" onclick="jobWindow()"/>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="View Calendar" />
</form>

</body>

</html>

javascript function radio-button

Answer 1

Answer №1

The correct way to access the desired path is as follows:

let element = document.forms["jobView"].elements["sales"];

Using the dot chaining method (document.jobView.sales) implicitly calls the "all" collection, which is only functional in IE. Although Firefox may display a similar string in its error console, it cannot be used in your code. Using methods like getElementsByTagName() and getElementsByName() will work properly, but you must verify that the elements retrieved are the ones you intend to use. It's important to anticipate scenarios where multiple forms exist on a page with overlapping field names. While this may not currently be an issue, failing to consider this possibility initially could lead to another developer adding a second form and causing conflicts later on.

Answer 2

The correct way to access the desired path is as follows:

let element = document.forms["jobView"].elements["sales"];

Using the dot chaining method (document.jobView.sales) implicitly calls the "all" collection, which is only functional in IE. Although Firefox may display a similar string in its error console, it cannot be used in your code. Using methods like getElementsByTagName() and getElementsByName() will work properly, but you must verify that the elements retrieved are the ones you intend to use. It's important to anticipate scenarios where multiple forms exist on a page with overlapping field names. While this may not currently be an issue, failing to consider this possibility initially could lead to another developer adding a second form and causing conflicts later on.

Answer 3

Answer №2

Give this code snippet a try using document.getElementsByTagName:

 function getRadioInputValue(){
  var value;
  var elements = document.getElementsByTagName('input');

  for( let i = 0; i < elements.length; i++ ){
   if (document.forms['jobView'].elements[i].type === 'radio' && document.forms['jobView'].elements[i].name === 'sales')
   {
     if(document.forms['jobView'].elements[i].checked == true )
     {
       value = document.forms['jobView'].elements[i].value;
       break;
     }
   }
  }
  alert( "Value = " + value );
 }

Also, please note that the break line in your code was never executed due to missing curly brackets:

if( document.jobView.sales[i].checked == true )
{
   target = document.jobView.sales[i].value;
   break;
}

Answer 4

Give this code snippet a try using document.getElementsByTagName:

 function getRadioInputValue(){
  var value;
  var elements = document.getElementsByTagName('input');

  for( let i = 0; i < elements.length; i++ ){
   if (document.forms['jobView'].elements[i].type === 'radio' && document.forms['jobView'].elements[i].name === 'sales')
   {
     if(document.forms['jobView'].elements[i].checked == true )
     {
       value = document.forms['jobView'].elements[i].value;
       break;
     }
   }
  }
  alert( "Value = " + value );
 }

Also, please note that the break line in your code was never executed due to missing curly brackets:

if( document.jobView.sales[i].checked == true )
{
   target = document.jobView.sales[i].value;
   break;
}

Answer 5

Answer №3

Replace document.jobView.sales with

document.getElementsByName('sales')

Answer 6

Replace document.jobView.sales with

document.getElementsByName('sales')

Answer 7

Answer №4

Introduce some debugging into the code. For instance, insert an alert() within the for() loop to confirm that document.jobView.sales.length is being defined.

If the alert does not display, it is likely that document.jobView.sales.length is undefined.

You can then use

try { var length = document.jobView.sales.length; } catch(e) { alert(e); }

to double-check this.

If you determine that document.jobView.sales.length is not defined, you may need to utilize document.getElementsByTagName and iterate through them instead of using document.jobView

Answer 8

Introduce some debugging into the code. For instance, insert an alert() within the for() loop to confirm that document.jobView.sales.length is being defined.

If the alert does not display, it is likely that document.jobView.sales.length is undefined.

You can then use

try { var length = document.jobView.sales.length; } catch(e) { alert(e); }

to double-check this.

If you determine that document.jobView.sales.length is not defined, you may need to utilize document.getElementsByTagName and iterate through them instead of using document.jobView

JavaScript function having an undefined value caused by a radio button

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Object contents shift upon my first gaze

I am having trouble updating a record in my database table

Embedding JSON data in a GSP page

Guide to importing a Kotlin/JS generated module into a separate npm-dependent project

Ensuring the corner link remains at the top when expanding or in mobile mode with mdBootstrap's navbar

What is the best method for submitting an array of objects using Axios, Formik, and React.js?

Ways to add stylistic elements to variables using JavaScript

What is the best way to split an array into smaller chunks?

What discrepancies exist between running npm install on Windows versus Linux operating systems?

Isolating objects within a JSON array based on a single key

Choosing the entire contents of a webpage using jQuery

Exploring the capabilities of the Contentful JavaScript SDK in conjunction with Native

Formulate a Generic Type using an Enum

HTML content that is produced through JSONP retrieval

Receiving a reply but failing to give a response

Product sketching libraries in JavaScript

Using JavaScript to implement responsive design through media queries

Is it possible to test an Angular application using Protractor within an iframe that is hosted by a non-Angular

Discovering information from a URL through JSON

Tips for displaying specific HTML elements in AngularJS using ng-repeat and ng-if