Hi! new here, multiple button input question?

Hi everyone,
I thought the following would be fairly simple to solve, but…no. Would appreciate pointers.
I have two sets of four radio buttons each. I want to get the values of the clicked buttons and then direct the user to a url based on which buttons they clicked.
So far, I’ve only been able to set up the two sets of buttons and get the values of the clicked buttons. (I started setting up a third function to evaluate the values returned from the first two functions, but couldn’t figure out how to get that to kick in after the first two. I’ve been working in Python, and Javascript is a little disorienting)
Thanks for any guidance!

<!DOCTYPE html>
<html>
<head><title>eventListenerLogic</title></head>
<body>

<p>One event listener for two functions.</p>
    <div id="rad">  
      <input type="radio" name="top" value="1">One<br/>
      <input type="radio" name="top" value="2">Two<br/>
      <input type="radio" name="top" value="3">Three<br/>
      <input type="radio" name="top" value="4">Four<br/>
      <br>
      <input type="radio" name="bottom" value="a">A<br/>
      <input type="radio" name="bottom" value="b">B<br/>
      <input type="radio" name="bottom" value="c">C<br/>
      <input type="radio" name="bottom" value="d">D<br/>
      <br>
    </div>
        <div id="doIt"> 
	    <button> click.</button></div><br/>
	<br>
	<div id="result1">What is your number?</div><br>
	<div id="comment1"></div><br>
	<div id="result2">What is your letter?</div><br>
	<div id="comment2"></div><br>

<script>
    function func1() {
      var topp=document.getElementsByName('top')
	for (i=0; i<topp.length; i++) {
 	  if (topp[i].checked)
	    var toppy = topp[i].value;
 	}

        if (toppy=="3"){
	  document.getElementById("comment1").innerHTML="Lucky 3!";
	  } else {
	  document.getElementById("comment1").innerHTML="That's a good choice."
	}
        return toppy;
}           
    function func2() {
      var bottomm=document.getElementsByName('bottom')
	for (i=0; i<bottomm.length; i++) {
	  if (bottomm[i].checked)
	    var bottommy = bottomm[i].value;
	}

	if (bottommy=="c") {
	  document.getElementById("comment2").innerHTML="See you!";
	} else {
	  document.getElementById("comment2").innerHTML="OK!"
	}
        return bottommy;
}

      document.getElementById("doIt").addEventListener("click", func1, true);
      document.getElementById("doIt").addEventListener("click", func2, true);   

</script>
    </body>
</html>

Well, it’s not elegant, but it works (curious in case anyone has any other thoughts):

<html>
<head><title>checking if statements</title>
</head>

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#pickForm input').on('change', function() {
   if($('input[name="soctype"]').is(':checked')) {
   var options = [];
   options.push($('input[name="soctype"]:checked', '#pickForm').val());
   options.push($('input[name="actType"]:checked', '#pickForm').val());
   document.getElementById("demo").innerHTML= options[0] +', '+ options[1];

   $('#package').show();
      $('#soctype').text($('input[name="soctype"]:checked', '#pickForm').val());
      $('#actType').text($('input[name="actType"]:checked', '#pickForm').val());

<!-- this works -->
  var link1='<a href="results4.html">env and don</a>';
  var link2='<a href="results5.html">env and vol</a>';
  var link3='<a href="results6.html">env and adv</a>';
  var link4='<a href="results7.html">civ and don</a>';
  var link5='<a href="results8.html">civ and vol</a>';
  var link6='<a href="results9.html">civ and adv</a>';
  var link7='<a href="results1.html">food and don</a>';
  var link8='<a href="results2.html">food and vol</a>';
  var link9='<a href="results3.html">food and adv</a>';
  var link10='<a href="results10.html">socio and don</a>';
  var link11='<a href="results11.html">socio and vol</a>';
  var link12='<a href="results12.html">socio and adv</a>';
  
  if ((options.indexOf("Environmental")!= -1)) {
    if (options.indexOf("Donate")!= -1) {
      document.getElementById("ifResults5").innerHTML=link1;
    } else if (options.indexOf("Volunteer")!= -1) {
      document.getElementById("ifResults5").innerHTML=link2;
    } else if (options.indexOf("Advocate")!= -1) {
      document.getElementById("ifResults5").innerHTML=link3;
    } else {
      document.getElementById("ifResults5").innerHTML="env only";
    }
  } else if (options.indexOf("Civil")!=-1) {
    if (options.indexOf("Donate")!= -1) {
      document.getElementById("ifResults5").innerHTML=link4;
    } else if (options.indexOf("Volunteer")!= -1) {
      document.getElementById("ifResults5").innerHTML=link5;
    } else if (options.indexOf("Advocate")!= -1) {
      document.getElementById("ifResults5").innerHTML=link6;
    } else {
      document.getElementById("ifResults5").innerHTML="civ only";
    }
  } else if (options.indexOf("Food")!= -1) {
    if (options.indexOf("Donate")!= -1) {
      document.getElementById("ifResults5").innerHTML=link7;
    } else if (options.indexOf("Volunteer")!= -1) {
      document.getElementById("ifResults5").innerHTML=link8;
    } else if (options.indexOf("Advocate")!= -1) {
      document.getElementById("ifResults5").innerHTML=link9;
    } else {
      document.getElementById("ifResults5").innerHTML="food only";
    }
  } else if (options.indexOf("Socio") != -1) {
    if (options.indexOf("Donate")!= -1) {
      document.getElementById("ifResults5").innerHTML=link10;
    } else if (options.indexOf("Volunteer")!= -1) {
      document.getElementById("ifResults5").innerHTML=link11;
    } else if (options.indexOf("Advocate")!= -1) {
      document.getElementById("ifResults5").innerHTML=link12;
    } else {
      document.getElementById("ifResults5").innerHTML="socio only";
    }
  } else {
    document.getElementById("ifResults5").innerHTML="Got none.";
  }

      }
  });
});
</script>

<form id="pickForm">
        <div>
            <h3> Choices</h3>
            <div>
                <input type="radio" name="soctype" value="Environmental"> Environment <br>
                <input type="radio" name="soctype" value="Civil"> Civil rights <br>
                <input type="radio" name="soctype" value="Food"> Food security <br>
                <input type="radio" name="soctype" value="Socio"> Socioeconomic <br>
            </div>&nbsp;
            <div>
                <input type="radio" name="actType" value="Donate"> Donate <br>
                <input type="radio" name="actType" value="Volunteer">  Volunteer <br>
                <input type="radio" name="actType" value="Advocate"> Advocate <br>
            </div>

        </div>

    </form>
    
    <div id="package">
      <div>
        <label>What you would like to do:</label>
        <span>Your choices</span>
      </div>
      <div>
        <label>Type of organization:</label>
        <span id="soctype"></span>
      </div>
      <div>
        <label>Type of action:</label>
        <span id="actType"></span>
      </div>
      <div>
        <p id="demo">What goes here?</p>
      </div>
      <div>
	<p id="ifResults5">Try nested again.</p>
      </div>
    </div>
     
    
</body>
</html>

Hi @spamaloid. Sorry for the delay in responding. Bad timing with the American Thanksgiving holiday and all. I appreciate you sticking with it and replying with your solution! And welcome to the forums :wink: .

For your problem, while your solution mostly works, there is a lot of manual if-checking that you’re doing which is leading to a lot of code and a lot of repetition. There are easier ways to approach this, but how complicated it all gets also depends on exactly what you’re after. Specifically, what do you really need to show the user in the end?

I’ll start with the simplest possible solution, one where what you’re after is just the link. Changes will be made to the original simplify this further, such as using the radio values in the link text and changing the URLs for the link to something reflective of those values rather than using the “results#” format.

For this, the idea is to use the values of the radio buttons to construct both the text seen on the screen in the link as well as the link itself. This means no if checks (other than making sure the radio values exist), but it does mean the link text and actual link must use the values in the radios. But in doing this, its pretty simple.

$('#pickForm input').on('change', function() {
  var socType = $('input[name="soctype"]:checked').val();
  var actType = $('input[name="actType"]:checked').val();
  
  if (socType && actType) {
  	var link = socType + actType + '.html'; // EnvironmentalDonate.html, etc.
  	var linkText = socType + ' and ' + actType;
  	$('#ifResults5').html('<a href="' + link + '">' + linkText + '</a>');
  }
});

Now from here, we can use the same principle, but if the links or link text can’t be derived from the radio button values, we need to do some mapping. For example right now the link text is using abbreviated versions of the values. We can create an object that allows us to get those abbreviations from the more verbose values. Then, when creating the link, we can remap the values to those abbreviations.

var valueToAbbrev = {
  Environmental: 'env',
  Civil: 'civ',
  Food: 'food',
  Socio: 'socio',
  Donate: 'don',
  Volunteer: 'vol',
  Advocate: 'adv',
};

$('#pickForm input').on('change', function() {
  var socType = $('input[name="soctype"]:checked').val();
  var actType = $('input[name="actType"]:checked').val();
  
  if (socType && actType) {
  	var link = socType + actType + '.html'; // EnvironmentalDonate.html, etc.
  	var linkText = valueToAbbrev[socType] + ' and ' + valueToAbbrev[actType];
  	$('#ifResults5').html('<a href="' + link + '">' + linkText + '</a>');
  }
});

To keep the original “results#” format for the links, it becomes a little more complicated because you’d have to have a map for each combination of socType and actType. The mapping can be done the same way, it just means having more of them (note: this code block may require scrolling to see all the code).

var valueToAbbrev = {
  Environmental: 'env',
  Civil: 'civ',
  Food: 'food',
  Socio: 'socio',
  Donate: 'don',
  Volunteer: 'vol',
  Advocate: 'adv',
};

var inputsToLinks = {
  FoodDonate: 'results1.html',
  FoodVolunteer: 'results2.html',
  FoodAdvocate: 'results3.html',
  EnvironmentalDonate: 'results4.html',
  EnvironmentalVolunteer: 'results5.html',
  EnvironmentalAdvocate: 'results6.html',
  CivilDonate: 'results7.html',
  CivilVolunteer: 'results8.html',
  CivilAdvocate: 'results9.html',
  SocioDonate: 'results10.html',
  SocioVolunteer: 'results11.html',
  SocioAdvocate: 'results12.html',
};

$('#pickForm input').on('change', function() {
  var socType = $('input[name="soctype"]:checked').val();
  var actType = $('input[name="actType"]:checked').val();
  
  if (socType && actType) {
  	var link = inputsToLinks[socType + actType];
  	var linkText = valueToAbbrev[socType] + ' and ' + valueToAbbrev[actType];
  	$('#ifResults5').html('<a href="' + link + '">' + linkText + '</a>');
  }
});

At this point we’re starting to get more code, but most of it is just data mapping. When you get to the actual logic - what’s doing all the work - that really hasn’t changed. There’s getting some values, making sure they’re set with an if check, then building the url and text to show on the screen. It stays simple and easy to follow with limited repetition.

1 Like