CODEWITHSUNDEEP
javascript
Rakesh Mistry
Rakesh Mistry

Reputation: 13

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>

Upvotes: 1

Views: 105

Answers (5)

itzmebibin
itzmebibin

Reputation: 9439

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');
}

Upvotes: 1

Vanojx1
Vanojx1

Reputation: 5574

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>

Upvotes: 1

Sam Bauwens
Sam Bauwens

Reputation: 1367

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>

Upvotes: 0

Massimo Franciosa
Massimo Franciosa

Reputation: 554

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 :))

Upvotes: 0

forgivenson
forgivenson

Reputation: 4435

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>

Upvotes: 2

Related Questions