Question

I am getting values from one textbox and putting it in another textbox. The values being transferred are a question’s duration, and both textboxes use the jQuery timepicker plugin. Now this works for the first textbox but it does not work for the second textbox. I want to include a button next to the second textbox so the user can open up the timepicker just in case the user wants to change the duration in the second textbox.

So I want to include this timepicker function below:

$(document).ready(function() {
    $(function() {
        $('#questiondurationpickerRow').trenttimepicker({
            timeFormat: 'hh mm ss',
            hourGrid: 4,
            minuteGrid: 10,
            secondGrid: 10,
            showOn: 'button',
            buttonImage: "Images/clock.gif",
            buttonImageOnly: true
        });
    });
});

Into the InsertQuestion(form) function below:

var qnum = 1;

function insertQuestion(form) {
    var $tr = $("<tr></tr>");
    var $duration = $("<td class='duration'></td>");

    $('#questiondurationpicker').each(function() {
        var $this = $(this);
        var $durationText = 
            $("<input type='text' id='questiondurationpickerRow' readonly='readonly' />")
                .attr('name', $this.attr('name'))
                .attr('value', $this.val())

        $duration.append($durationText);
    });

    $tr.append($qid);
    $tr.append($duration)
    $('#qandatbl').append($tr);

    form.numberOfQuestions.value = qnum;

    ++qnum;
    $("#questionNum").text(qnum);
    form.questionText.value = "";
}

What it is suppose to do is to display the timepicker button I have created next to the “#questiondurationpickerRow” textbox so that the user can click on the button and open up the timepicker to open up the duration.

I tried to put the “questiondurationpickerRow” timepicker function in the insertQuestion(form) function but it does not display the button. Below is what I tried:

var qnum = 1;

function insertQuestion(form) {
    $(document).ready(function() {
        $(function() {
            $('#questiondurationpickerRow').trenttimepicker({
                timeFormat: 'hh mm ss',
                hourGrid: 4,
                minuteGrid: 10,
                secondGrid: 10,
                showOn: 'button',
                buttonImage: "Images/clock.gif",
                buttonImageOnly: true
            });
        });
    });

    var $tr = $("<tr></tr>");
    var $duration = $("<td class='duration'></td>");

    $('#questiondurationpicker').each(function() {

        var $this = $(this);
        var $durationText =
        $("<input type='text' id='questiondurationpickerRow' readonly='readonly' />")
            .attr('name', $this.attr('name'))
            .attr('value', $this.val())

        $duration.append($durationText);
    });

    $tr.append($qid);
    $tr.append($duration)
    $('#qandatbl').append($tr);

    form.numberOfQuestions.value = qnum;

    ++qnum;
    $("#questionNum").text(qnum);
    form.questionText.value = "";
}

How can I include the “questiondurationpickerRow” timepicker function in the insertQuestion(form) function so that it will display the timepicker button next to the textbox?

Answer 1

for this:

function insertQuestion(form) {
     $(document).ready(function() {
         $(function() {
             $('#questiondurationpickerRow').trenttimepicker({

all you need is:

function insertQuestion(form) {
   $('#questiondurationpickerRow').trenttimepicker({

I do not see a definition

$tr.append($qid);   

of $qid

an it is hard to guess what the ).trenttimepicker does really.

EDIT:

Looking at:

$('#questiondurationpicker').each(function() {
     var $this = $(this);
     var $durationText =
          $("<input type='text' id='questiondurationpickerRow' readonly='readonly' />")
             .attr('name', $this.attr('name'))
             .attr('value', $this.val())
      $duration.append($durationText);
 });

This makes more sense (and fix syntax error)

to do as:

   $this = $('#questiondurationpicker');
   var $durationText = $("<input type='text' id='questiondurationpickerRow' readonly='readonly' />")
       .attr('name', $this.attr('name'))
       .attr('value', $this.val());
   $duration.append($durationText);

re: missing semi-colon
only ONE element can be present with a given ID so no need for each() stuff

final rework:

var qnum = 1;

function insertQuestion(form) {
    var $tr = $("<tr></tr>");
    var $duration = $("<td class='duration'></td>");

    $this = $('#questiondurationpicker');//assume this exists
    var $durationText = $("<input type='text' id='questiondurationpickerRow' readonly='readonly' />").attr('name', $this.attr('name')).attr('value', $this.val());//was issing semi colon
    $duration.append($durationText);

    $tr.append($qid);//assume $qid exists and is an element
    $tr.append($duration) $('#qandatbl').append($tr);
    form.numberOfQuestions.value = qnum;//another assumption
    ++qnum;
    $("#questionNum").text(qnum);// assume this exists
    form.questionText.value = "";//assume this exists

    // This has to be after it gets inserted
    $('#questiondurationpickerRow').trenttimepicker({
        timeFormat: 'hh mm ss',
        hourGrid: 4,
        minuteGrid: 10,
        secondGrid: 10,
        showOn: 'button',
        buttonImage: "Images/clock.gif",
        buttonImageOnly: true
    });
}

Here is a page with a sampe using jQuery UI datepicker:
http://jsfiddle.net/MarkSchultheiss/Mykd6/