Jquery Timedatepicker won't work properly on dynamic form

Question

I have successfully modified a code that I found here, which creates new textbox fields using javascript.

I am using timepicker with datepicker jquery plugin for a smooth date and time selection. I have a problem. The timepicker works normally after loading the page but after adding additional input fields, the timepicker stops working.

Here's the html code:

<head>
    <link href="css/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />       
    <link href="css/timepicker.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/timepicker.js"></script>
</head>
<body>
<form id="obform" name="obform" action="test5.php" method="POST">
    <div id="fields">
    <p><label>Date From:</label><input class="timepicker" name="txtdatefrom0" type="text"/></p>       
    <p><label>Date To:</label><input class="timepicker" name="txtdateto0" type="text"/></p>
    <input type="hidden" name="num" value="1"/>
    <button id="start" type="button" onclick="addField()">Add</button>
    <input type="submit" value="Submit"/>
    </div>
</form>
</body>

Here is the script

<script>
$(document).ready(function(){
$('.timepicker').datetimepicker(); 
});

$('#start').click(function(){
$(".timepicker").datetimepicker("destroy");
$(".timepicker").datetimepicker();
});
    var num=0;
    function addField(){
    num++; //1
    if(num>4){
        num--;
    }
    makefields();
}
function rmField(){
    num--;
    if(num<0){
        num++;
    }
    makefields();
}

function makefields(){
var fields="";
for(var o=0;o<=num;o++){
fields+="<p><label>Date From: </label><input class=\"timepicker\" name=\"txtdatefrom"+o+"\" type=\"text\"></p>";
fields+="<p><label>Date To:</label><input class=\"timepicker\" name=\"txtdateto"+o+"\" type=\"text\"/></p>";
}
fields+="<br/><input type=\"hidden\" name=\"num\" value=\""+o+"\"/>";
if(num!=3){fields+="<button type=\"button\" onclick=\"addField()\">Add</button>";}
if(num>0){fields+="<button type=\"button\" onclick=\"rmField()\">Remove</button>";}
fields+="<input type=\"submit\" value=\"Submit\"/></form>";
document.getElementById("fields").innerHTML=fields;
}
</script>

I am also trying to add the new input values in my database, any ideas on how to do that? Sorry, I'm still new in web development. Hoping to become better someday.

EDIT: Here is the php code that I've been modifying for a while now. I want the newly created fields to be inserted in my database smoothly. I set the maximum of fields to be added to 4. I've been trying to insert the fields dynamically by creating a set of fields ready to catch them in my db table(datefrom1,dateto1,datefrom2,dateto2 and so on but i can't get it to work.

Also, is it possible to add a umber of fields in my sql through code? Like if you have 2 duplicates the program will create 2 new fields in a certain db table? I'd prefer that if possible. I've been looking everywhere in the net but couldn't find the solution.

$mysql_host = 'changed'; // put change for confidentiality
$mysql_user = 'changed';
$mysql_pass = 'changed';

$mysql_db = 'changed';

if(!mysql_connect($mysql_host, $mysql_user, $mysql_pass) || !mysql_select_db($mysql_db)) {
    die(mysql_error());
}
$sets=mysql_real_escape_string($_REQUEST["num"]); 
for($loop=0;$loop<$sets;$loop++){
    $df="txtdatefrom".$loop;
    $dt="txtdateto".$loop;
    if(isset($_POST[$df]) && isset($_POST[$dt])) {
        $datefrom=mysql_real_escape_string($_REQUEST[$df]);
        $dateto=mysql_real_escape_string($_REQUEST[$dt]);
        $query="INSERT INTO testob (datefrom,dateto) VALUES ('$datefrom','$dateto')";
        $query_run=mysql_query($query);
    }
    else {
        echo 'Fill up all fields';
    }
?>

1. No need to put entire HTML. 2. [jsfiddle](http://jsfiddle.net/) please? — hjpotter92, Feb 02 '13 at 02:31
Sorry. I'm kind of new in web development. I have small knowledge of useful web dev related tools. Anyway, Thanks for letting me know. — Wax, Feb 02 '13 at 11:50

score 1 · Answer 1 · answered Feb 02 '13 at 02:34

1

You need to initialize the plugin for newly added elements after you add them. It won't initialize on elements that don't exists when you run the code.

Change this:

document.getElementById("fields").innerHTML=fields;

TO:

$('#fields').html( fields).find('.timepicker').datetimepicker();

DB issue is not clear

answered Feb 02 '13 at 02:34

charlietfl

170,828
13
121
150

It worked like a charm! Thanks! Anyway, I've updated the topic. You can now see the concept of the database that I've been trying to create. Thank you again – Wax Feb 02 '13 at 11:42

score 0 · Answer 2 · edited May 23 '17 at 12:12

For these kinds of dynamic forms you're better off using client side templates for the dynamic bits. That way you don't have to code them twice (once in js and again in html)

See http://jsfiddle.net/HmCPd/1/

You're addField function should look something like:

function addField() {
    // get html from the template
    var html = $('#fieldTemplate').html();

    /*
    make a new dom element (need to trim whitespace or jquery 
    won't parse the template properly
    */
    var $newField = $($.trim(html));

    // insert the new field and make it a datepicker
    $('#fieldsContainer')
      .append($newField)
      .find('input')
      .datepicker();
}

That's very similar to what you want to do. Just make sure you bind any ui classes like datetimepicker() after you insert the new nodes into the dom.

As far as saving things to the DB, the general idea is that you want to give your fields, etc... unique name attributes, which your server-side code will receive as post parameters. Gather those params into a SQL insert statement and run it against the DB. Just make sure you avoid SQL injection. See How can I prevent SQL injection in PHP? for more information on that.

Jquery Timedatepicker won't work properly on dynamic form

2 Answers2

Linked