Home/ Questions/Q 9077289
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T19:18:25+00:00

Possible Duplicate: Executing <script> elements inserted with .innerHTML I have a problem, when generating

  • 0

Possible Duplicate:
Executing <script> elements inserted with .innerHTML

I have a problem, when generating content with Java Script, an embedded script does not function. How can one code this correctly?

Here is a working example:
class datepicker works correctly for a static html code, but does not work for those lines that are added on runtime with the add new line button. Plesae note, that reloading the page is not an option for me as the real problem is more complicated.

Thanks for your help.

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        $( ".datepicker" ).datepicker({
        yearRange: "-100:+0",
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy-mm-dd'
        });
    });
    </script>
</head>
<body>

<p>How many children do you have? What is their names and age?</p>
 <input type="text" id="qchildren" />
 <div id="qchildren-answer-wrapper"></div>


<button type="button" onclick="addNew()">Add new entry</button>
<button type="button" onclick="save()">Save</button>

 <br/>This is a correct date picker:
 <input type="text" class="datepicker" id="dp1" />

<script>
var lines=0;
function addNew()
{
lines++;
var newElement = document.createElement("span");
  newElement.innerHTML =  'Name:<input type="text" id="qchildrenname'+window.lines+'" /> Birth date:<input type="text" class="datepicker" id="qchildrenage'+window.lines+'" /><br/>';
document.getElementById("qchildren-answer-wrapper").appendChild(newElement);
}

function save()
{
var answer='';
for (var ii=1;ii<=window.lines;ii++)
{
if (document.getElementById('qchildrenname'+ii.toString()).value.toString()!=''){
answer+=document.getElementById('qchildrenname'+ii.toString()).value.toString()+','+document.getElementById('qchildrenage'+ii.toString()).value.toString()+';';
}
}
document.getElementById("qchildren").value=answer;
}
</script>


</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First abstract function which ties datepicker to your html inputs:

    <script>
function attachDatePickerById(id) {
    $( "#" + id ).datepicker({
    yearRange: "-100:+0",
        changeMonth: true,
        changeYear: true,
        dateFormat: 'yy-mm-dd'
    });
}

// Attaching your initial datepicker with id "dp1"
$(attachDatePickerById("dp1"));
</script>

    Then just call this function for every new datepicker after it was attached:

    function addNew()
{
    lines++;
    var newElement = document.createElement("span");
    newElement.innerHTML =  'Name:<input type="text" id="qchildrenname'+window.lines+'" /> Birth date:<input type="text" class="datepicker" id="qchildrenage'+window.lines+'" /><br/>';
    document.getElementById("qchildren-answer-wrapper").appendChild(newElement);

    // Tie jquery datepicker control to new added html INPUT
    attachDatePickerById("qchildrenage" + window.lines);
}
    • 0