CODEWITHSUNDEEP
javascript
Nyc2x
Nyc2x

Reputation: 93

JavaScript Year Value

document.getElementById('text').innerHTML += "<td class='surveyquest'>5. Years of Services :</td></tr>";
document.getElementById('text').innerHTML += 
          "<tr>
              <td>
                 <select  name='services" + fields + "' title='Years of Services'>
                 var myDate = new Date(); 
                 var year = myDate.getFullYear(); 
                 for(var i = 2008; i < year+1; i++)
                 {
                      document.write('<option value=\"'+i+'\">'+i+'</option>');
                 }
                 </select>
              </td>
           </tr>";

The problem is select box appeared like this: enter image description here

How can I solve this problem?

Upvotes: 1

Views: 135

Answers (6)

nikodz
nikodz

Reputation: 727

Why do you use javascript inside the string which is generated from javascript?

do it like this:

document.getElementById('text').innerHTML += "5. Years of Services :";

var myDate = new Date(); 
var year = myDate.getFullYear(); 
var temp = "<tr><td><select  name='services" + fields + "' title='Years of Services'>";
for(var i = 2008; i < year+1; i++)
{
    temp += '<option value="'+i+'">'+i+'</option>';
}
temp += "</select></td></tr>";
document.getElementById('text').innerHTML += temp;

Or do it with document.createElement('<tag name here>'); and element.appendChild(childElement)

like this (I prefer this way):

var myDate = new Date(); 
var year = myDate.getFullYear();
var tr = document.createElement("tr");
var td = document.createElement("td");
var select = document.createElement("select");
select.name = "services" + fields;
select.title = "Years of Services";
for (var i=2008; i <= year; i++) {
    var option = document.createElement("option");
    option.value = i;
    option.innerHTML = i;
    select.appendChild(option);
}
td.appendChild(select);
tr.appendChild(td);
document.getElementById('text').appendChild(tr);

Upvotes: 0

user2587132
user2587132

Reputation: 

<option value='"+i+"'>"+i+"</option>
document.write() not needed

prefer appendChild to innerHTML

Upvotes: 0

Batakj
Batakj

Reputation: 12743

Don't put the javascript code inside the string... It will not execute.

PROBLEM :

<select  name='services" + fields + "' title='Years of Services'> <-- String is not terminated. It will take next line also as part of this string..

             var myDate = new Date(); <-- so, this line is part of string.
            var year = myDate.getFullYear(); <-- This line also
            for(var i = 2008; i < year+1; i++) <-- This line also
             {         <-- This line also
                  document.write('<option value=\"'+i+'\">'+i+'</option>'); <-- This line also
             }   <-- This line also
</select> <-- the string ends here

SOLUTION:

var comboHTML =  "<tr><td><select  name='services" + fields + "' title='Years of Services'>"


var myDate = new Date(); 
var year = myDate.getFullYear(); 

for(var i = 2008; i < year+1; i++){ 
     comboHTML+="<option value="+i+">"+i+"</option>" 
}

comboHTML+= "</select></td></tr>";

document.getElementById('text').innerHTML += comboHTML;

Upvotes: 0

Priyanka
Priyanka

Reputation: 11

I don't think innerHTML works to create a select box. You can use the below sample code to dynamically create a Select box

function addSelect(row, cellIndex, id, sid, sname, value, list, width, align, className)
{
    var cell = row.insertCell(cellIndex);
    cell.setAttribute("width", width);
    cell.setAttribute("align", align);
    cell.setAttribute("class", className);
    if(id != "")
        cell.setAttribute("id", id);
    var groupId = document.createElement("select");
    groupId.setAttribute("id", sid);
    groupId.setAttribute("name", sname);
    groupId.setAttribute("value", value);
    var optionArray = list.split("/");
    groupId.options[groupId.options.length] = new Option('---Select---','---Select---');
    for(var a=0; a<optionArray.length; a++)
    {
        var option = optionArray[a].split(",");
        groupId.options[groupId.options.length] = new Option(option[1],option[0]);
    }
    //groupId.options[groupId.options.length] = new Option('text_1','value_1');
    cell.appendChild(groupId);      
}

Upvotes: 0

Allen Chak
Allen Chak

Reputation: 1950

document.getElementById('text').innerHTML += "<td class='surveyquest'>5. Years of Services :</td></tr>";
var myDate = new Date();
var year = myDate.getFullYear() + 1;
var html = '';
for(var i = 2008; i < year; i++)
    html += '<option value="' + i + '">' + i + '</option>';
document.getElementById('text').innerHTML += "<tr><td><select  name='services" + fields + "' title='Years of Services'>" + html + "</select></td></tr>";

Upvotes: 1

Marcandria
Marcandria

Reputation: 415

You have to use parseInt, or parseFloat, or anything that can read your data as a numeric value, I think here parseInt would be nice.

Upvotes: 0

Related Questions