CODEWITHSUNDEEP
javascript
Cove
Cove

Reputation: 709

Javascript radiobutton value in variable

I trying to write a small script, which checks if the verb match one of the 3 groups. So:

  1. Making new array with verbs
  2. Random selection of the verb from array.
  3. User vote for the group, selected verb removed from array.
  4. Next, etc.

Looping & ifing not a problem, but I've never worked with radio buttons. So at the moment I have the following:

window.onload = function () {
	var verb_array = new Array (1,2,3)
	var random_verb_array_num = Math.floor(Math.random() * (verb_array.length - 0+0)) + 0;
	var random_verb_array_value = verb_array[random_verb_array_num];
	var show = document.getElementById("wuza").innerHTML = random_verb_array_value;
	verb_array.splice(random_verb_array_num, 1);
}
<div id="wuza"></div>
<br /><br />
<form action="">
	<input type="radio" name="group" value="1">1 Group
	<input type="radio" name="group" value="2">2 Group
	<input type="radio" name="group" value="3">3 Group
	<br /><input type="submit" value="Check" />
</form>

I need to create a new variable in my function, e.g. radio_value, and write there user's value after checking radio and pressing submit. How can I do that?

Upvotes: 1

Views: 64

Answers (1)

OneNeptune
OneNeptune

Reputation: 913

You need to create a new function for when the submit button is clicked that takes the form information and communicates what you're looking for, like so:

<div id="wuza"></div>
<br /><br />
<form action="">
	<input type="radio" name="group" value="1" onClick="userChoice(1);">1 Group
	<input type="radio" name="group" value="2" onClick="userChoice(2);">2 Group
	<input type="radio" name="group" value="3" onClick="userChoice(3);">3 Group
	<br /><input type="button" value="Check" onClick="alert('The user submitted ' + userDecided);" />
</form>
<script>
window.onload = function () {
	var verb_array = new Array (1,2,3)
	var random_verb_array_num = Math.floor(Math.random() * (verb_array.length - 0+0)) + 0;
	var random_verb_array_value = verb_array[random_verb_array_num];
	var show = document.getElementById("wuza").innerHTML = random_verb_array_value;
	verb_array.splice(random_verb_array_num, 1);
}
function userChoice(choice) {
    switch(choice) {
      case 1:
        userDecided = 1;
        break;
      case 2:
        userDecided = 2;
        break;
      case 3:
        userDecided = 3;
        break;
      default:
        userDecided = 0;
        break;
    }
    }
</script>

You'll need some sort of asynchronous loading though. I wrote the code in such a way so that you can initialize some further instructions based on the user's selection.

For DEBUGGING purposes, upon clicking the submit button, I have an alert display which choice was made to further your understanding.

Upvotes: 2

Related Questions