CODEWITHSUNDEEP
javascriptvariables
udhaya
udhaya

Reputation: 1

Using Variables in Javascript

<head>
    <script type="text/javascript">
        var p=0;
    </script>
</head>
<body>
<form name="quiz" method="post" action="evaluate.jsp">
   <script type="text/javascript">
                   <input type="radio" name="q"+p value="hi">charles
                   <input type="submit">
     </script>

  </form>  
  </body>

Can anyone plss help me out how to concatenate name of radiobutton like q0. I got a requirement to increment name of radiobutton q0, q1, q2 and so on using for loop. Help me out..

Upvotes: 0

Views: 218

Answers (4)

Jason M. Batchelor
Jason M. Batchelor

Reputation: 2951

I think it's important enough to illustrate the possible issue the OP has with the requirement as he stated it, so I composed this jsFiddle to show the difference between assigning the same name to every radio button and changing the name for each radio button to be different.

The radio buttons in the first row will all be checkable... but you won't be able to uncheck them, because they have nothing to turn them off (no other radio buttons with the same name to toggle them off).

The radio buttons in the second row will work the way you expect a radio button group to work... only one of the radio buttons will be checkable at a time.

http://jsfiddle.net/2ENZP/1/

HTML:

<form name="quiz" method="post" action="evaluate.jsp">
    <h3>Buttons with Differing Names</h3>
    <fieldset id="buttonsDiffNames">
    </fieldset>

    <h3>Buttons with Same Names</h3>
    <fieldset id="buttonsSameNames">
    </fieldset>
    <input type="submit">
</form>

Javascript:

var radioBtns = [
    {id:0,name:"charles"},
    {id:1,name:"diana"},
    {id:2,name:"peter"},
    {id:3,name:"sofia"},
    {id:4,name:"reggie"},
    {id:5,name:"jim"}
];

// set up templates for use by the examples, below.
var tmpl  = '<input type="radio" name="{ID}" value="{ID}">{NAME}';
var tmpl2 = '<input type="radio" name="{ID}" value="{NAME}">{NAME}';

// This one will populate the first list, with buttons
// that all have different names
function populateWithDifferingNames(){
    // get a ref to the fieldset we're going to add these to
    var fieldSet = document.getElementById("buttonsDiffNames");
    // create an array to act as a StringBuilder
    var sb = [];

    // loop through your dataset... 
    for(var i = 0; i < radioBtns.length; i++){
        // add a string to the sb array, replacing the templated
        // areas with the incremented radio button id and the name
        // from the dataset
        sb.push(tmpl.replace(/\{ID\}/gi,"q" + radioBtns[i].id).replace("{NAME}", radioBtns[i].name));
    }
    // set the fieldset's innerHTML to the joined string representation
    // of the sb array
    fieldSet.innerHTML = sb.join("\n");
}

// Same idea, but with matching names
function populateWithSameNames(){
    var fieldSet = document.getElementById("buttonsSameNames");
    var sb = [];

    for(var i = 0; i < radioBtns.length; i++){
        sb.push(tmpl2.replace(/\{ID\}/gi,"q").replace(/\{NAME\}/gi, radioBtns[i].name));
    }
    fieldSet.innerHTML = sb.join("\n");
}

window.onload = function() {
    populateWithDifferingNames();
    populateWithSameNames();
}();

​

Upvotes: 0

Yatrix
Yatrix

Reputation: 13775

This should go inside your script tag to create your inputs:

function createInputs(totalInputsNeeded) {
    var rdo, parent;

    parent = document.getElementById('parentId');

    for (var i = 0; i < totalInputsNeeded; i++) {        
        rdo = document.createElement('input');

        rdo.setAttribute('type','radio');
        rdo.setAttribute('name','q' + i.toString());
        rdo.setAttribute('value', 'yourValue');

        parent.appendChild(rdo);
    }
}

If it's to just add to the name of existing radios, you can do this:

function appendToNames() {
    var elems = document.getElementsByName('q');

    for (var i = 0; i < elems.length; i++) {
        elems[i].setAttribute('name', elems[i].getAttribute('name') + i.toString());
    }
}

Upvotes: 0

jfriend00
jfriend00

Reputation: 707328

An alternative to document.write() (which in some cases can prevent some page load optimizations by the browser), is to just modify the DOM after it loads and use a script to add the desired name property to the input tag.

<head>
 <script type="text/javascript">
  var p=0;
 </script>
</head>
<body>

<form name="quiz" method="post" action="evaluate.jsp">
    <input id="radio1" type="radio" value="hi">charles
    <input type="submit">
</form>  
<script type="text/javascript">
    document.getElementById("radio1").name = "q" + p;
</script>
</body>

Upvotes: 0

Abhishek Saha
Abhishek Saha

Reputation: 2564

Format your javascript code in the below way.

<script type="text/javascript">

var p=0;
document.write('<input type="radio" name="q'+p+'" value="hi">charles');
document.write('<input type="submit">');

</script>

Upvotes: 1

Related Questions