<!DOCTYPE html>
<html>
<head>
<style>
nav {font-size:35vw; transform:translateX(-60px)}
</style>
</head>
<body>
<figure>
<figcaption>Click the word "Console" on the frame below.</figcaption>
<nav>↓</nav>
</figure>
<script>
/*
|| This is to simulate the iframe being dynamically inserted into the DOM.
|| This is not required for OP (Original Post) specific circumstance.
*/
document.body.insertAdjacentHTML('afterbegin', `<iframe src='test2.html'></iframe>`);
/* BEGINNING OF REQUIRED CODE */
/*
|| Register the body to the click event
|| function extractValue() is the event handler called when body is clicked.
*/
document.body.addEventListener('click', extractValue);
/* Event Handler */
/*
|| Reference the Document Object inside iframe
|| Reference the form tag inside Document Object of iframe
|| Reference all radio buttons name='gender' in the form tag
|| Reference the selected radio button
|| Log the selected radio button's value
*/
function extractValue(e) {
var xFrame = window.frames[0];
var xForm = xFrame.forms[0];
var xRads = xForm.elements['gender'];
var selected = xRads.checked;
console.log(selected.value);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="/text1.php" method="POST">
<input type="radio" name="gender" value="male"> Male
<br>
<input type="radio" name="gender" value="female"> Female
<br>
<input type="radio" name="gender" value="other"> Other
<br>
<input type="submit">
</form>
</body>
</html>