Assign 2 Values To Each Radio Button

July 31, 2024 Post a Comment

I'm trying to assign 2 values to each radio button, to output in 2 fields. But it doesn't work. Here the code im using:

Solution 1:

You have a few different issues here. First, the answerB text field needs to have its value set, not valueB set. Second, you are setting both to the same value. So, instead of passing this.value into the check function, just pass this. Then you can use .getAttribute('valueB') to access your custom property.

Also, don't put commas in html tags. I removed those from your <input> tags.

See below:

<!DOCTYPE html><html><head><script>functioncheck(browser) {
        document.getElementById("answer").value=browser.value;
        document.getElementById("answerB").value=browser.getAttribute('valueB');
    }
    </script></head><body><p>What's your favorite browser?</p><form><inputtype="radio"name="browser"onclick="check(this)"value="400mb"valueB="600mb">Internet Explorer<br><inputtype="radio"name="browser"onclick="check(this)"value="600mb"valueB="700mb">Firefox<br><inputtype="radio"name="browser"onclick="check(this)"value="500mb"valueB="500mb">Opera<br><inputtype="radio"name="browser"onclick="check(this)"value="500mb"valueB="500mb">Google Chrome<br><inputtype="radio"name="browser"onclick="check(this)"value="300mb"valueB="300mb">Safari<br><br>
    PC Min Ram Requirement is: <inputtype="text"id="answer"size="20">
    Mac Min Ram Requirement is:  <inputtype="text"id="answerB"size="20"></form></body></html>

Solution 2:

a pure js solution:

some notes: if you pass this.value to the function then you cant access valueB anymore, pass just the entire element. To set the value use just theTargetElement.value not value and valueB ( thats just wrong ). Dont know why you ve a comma after value ( thats wrong too )

functioncheck(browser) {
  document.getElementById("answer").value = browser.getAttribute("value");
  document.getElementById("answerB").value = browser.getAttribute("valueB");
}

<form><inputtype="radio"name="browser"onclick="check(this)"value="400mb"valueB="600mb">Internet Explorer
  <br><inputtype="radio"name="browser"onclick="check(this)"value="600mb"valueB="700mb">Firefox
  <br><inputtype="radio"name="browser"onclick="check(this)"value="500mb"valueB="500mb">Opera
  <br><inputtype="radio"name="browser"onclick="check(this)"value="500mb"valueB="500mb">Google Chrome
  <br><inputtype="radio"name="browser"onclick="check(this)"value="300mb"valueB="300mb">Safari
  <br><br>PC Min Ram Requirement is:
  <inputtype="text"id="answer"size="20">Mac Min Ram Requirement is:
  <inputtype="text"id="answerB"size="20"></form>

Solution 3:

You can set value by using data- property like,

data-value="400mb" data-valueB="600mb"

That is,

<inputtype="radio"class = "radiobutton" onclick="check(this)" name="browser" data-value="400mb" data-valueB="600mb" />

Then you can access in the check function using jQuery like,

functioncheck(rb) {
       document.getElementById("answer").value = $(rb).data('value');
       document.getElementById("answerB").value = $(rb).data('valueB');
    }

or,

$('.radiobutton').click(function () {
            document.getElementById("answer").value = $(this).data('value');
            document.getElementById("answerB").value = $(this).data('valueB');
}

Solution 4:

I fixed your code by using string.split, and without any external libraries. You also had a reference error trying to access valueB on the target input.

<!DOCTYPE html><html><head><script>functioncheck(browser) {
                    var splitValues = browser.split(';');
                    document.getElementById("answer").value=splitValues[0];
                    document.getElementById("answerB").value=splitValues[1];
                }
            </script></head><body><p>What's your favorite browser?</p><form><inputtype="radio"name="browser"onclick="check(this.value)"value="400mb;600mb">Internet Explorer<br><inputtype="radio"name="browser"onclick="check(this.value)"value="600mb;700mb">Firefox<br><inputtype="radio"name="browser"onclick="check(this.value)"value="500mb;500mb">Opera<br><inputtype="radio"name="browser"onclick="check(this.value)"value="500mb;500mb">Google Chrome<br><inputtype="radio"name="browser"onclick="check(this.value)"value="300mb;300mb">Safari<br><br>
            PC Min Ram Requirement is: <inputtype="text"id="answer"size="20">
            Mac Min Ram Requirement is:  <inputtype="text"id="answerB"size="20"></form></body></html>

Solution 5:

this code have some problems.

1) you need to pass two values (or the element itself) to the function

onclick="check(this)"

this is because you're just passing the "value" attribute to the function.

2) you need to retrieve "valueB" as a normal attribute. the property "valueB" doesn't exists and so is currently undefined.

functioncheck(element) {
        document.getElementById("answer").value=element.value;
        document.getElementById("answerB").value=element.getAttribute("valueB");
    }

in the function check you're also trying to set "valueB" property of the element "answerB", which doesn't make sense (you need to set the normal value to the textbox :))

javascript magazin