Assign 2 Values to each radio button

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:

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

Answers:

Answer

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>
                function check(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>
            <input type="radio" name="browser" onclick="check(this.value)"     value="400mb;600mb">Internet Explorer<br>
            <input type="radio" name="browser" onclick="check(this.value)"     value="600mb;700mb">Firefox<br>
            <input type="radio" name="browser" onclick="check(this.value)"     value="500mb;500mb">Opera<br>
            <input type="radio" name="browser" onclick="check(this.value)"     value="500mb;500mb">Google Chrome<br>
            <input type="radio" name="browser" onclick="check(this.value)"     value="300mb;300mb">Safari<br>
            <br>
            PC Min Ram Requirement is: <input type="text" id="answer" size="20">
            Mac Min Ram Requirement is:  <input type="text" id="answerB" size="20">
        </form>
        
        </body>
    </html>

Answer

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>
    function check(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>
    <input type="radio" name="browser" onclick="check(this)" value="400mb" valueB="600mb">Internet Explorer<br>
    <input type="radio" name="browser" onclick="check(this)" value="600mb" valueB="700mb">Firefox<br>
    <input type="radio" name="browser" onclick="check(this)" value="500mb" valueB="500mb">Opera<br>
    <input type="radio" name="browser" onclick="check(this)" value="500mb" valueB="500mb">Google Chrome<br>
    <input type="radio" name="browser" onclick="check(this)" value="300mb" valueB="300mb">Safari<br>
    <br>
    PC Min Ram Requirement is: <input type="text" id="answer" size="20">
    Mac Min Ram Requirement is:  <input type="text" id="answerB" size="20">
    </form>
    
    </body>
    </html>

Answer

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 )

function check(browser) {
  document.getElementById("answer").value = browser.getAttribute("value");
  document.getElementById("answerB").value = browser.getAttribute("valueB");
}
<form>
  <input type="radio" name="browser" onclick="check(this)" value="400mb" valueB="600mb">Internet Explorer
  <br>
  <input type="radio" name="browser" onclick="check(this)" value="600mb" valueB="700mb">Firefox
  <br>
  <input type="radio" name="browser" onclick="check(this)" value="500mb" valueB="500mb">Opera
  <br>
  <input type="radio" name="browser" onclick="check(this)" value="500mb" valueB="500mb">Google Chrome
  <br>
  <input type="radio" name="browser" onclick="check(this)" value="300mb" valueB="300mb">Safari
  <br>
  <br>PC Min Ram Requirement is:
  <input type="text" id="answer" size="20">Mac Min Ram Requirement is:
  <input type="text" id="answerB" size="20">
</form>

Answer

You can set value by using data- property like,

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

That is,

<input type="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,

    function check(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');
}
Answer

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.

    function check(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 :))

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.