Dynamic input fields all displaying the same value

I am using JTable to display form data and seem to be having a problem where the custom inputs are all displaying the value of the first input. What should happen, is each input should hold it's own value based on the selected datepicker data.

However, if I click the second input, this displays the correct date in the input, but when I click button, the value that is returned is input 1.

I would be grateful if someone could shed some light as to where I have gone wrong as I am still learning JTable and jQuery. Many thanks.

//function to amend and destroy boxes
$(function() {

  //Prepare jTable
  $('#setDestScheduleShow').jtable({
    title: 'Box Destruction Schedule',
    paging: true,
    pageSize: 5,
    pageSizes: [5, 10, 25, 50, 100, 250, 500],
    messages: {
      pagingInfo: 'Showing {0} to {1} of {2} records',
      editRecord: 'Edit Box Record'
    },
    sorting: true,
    defaultSorting: 'destroy_date ASC',
    actions: {
      listAction: '../users/destroySchedDisp.php?action=list',
      //createAction: '../users/destroySchedDisp.php?action=create',
      //updateAction: '../users/destroySchedDisp.php?action=update',
      //deleteAction: '../users/destroySchedDisp.php?action=delete'
    },
    fields: {
      Id: {
        key: true,
        title: 'Id',
        width: '2%',
        list: false
      },
      customer: {
        title: 'Co Ref',
        width: '10%',
        list: false
      },
      intake_date: {
        title: 'Intake Date',
        width: '14%',
        type: 'date',
        displayFormat: 'dd/mm/yy'
      },
      destroy_date: {
        title: 'Destroy Date',
        width: '14%',
        type: 'date',
        displayFormat: 'dd/mm/yy'

      },
      custref: {
        title: 'Box No',
        width: '14%'
      },
      amend: {
        title: 'Amend Date',
        width: '12%',
        sorting: false,
        type: 'date',
        display: function(data) {
          return '<input type="text" name="MyName" onclick="dpicker();" />'; [b]**<--- THIS IS THE INPUT**[/b]
        }
      },
      sendbtn: {
        title: 'Update',
        width: '12%',
        sorting: false,
        display: function(data) {
          var $button = $('<input type="button" class="destBtn" name="destUpdBtn" value="Update" />');

          $button.click(function() {
            temp();
          });
          return $button;
        }
      }
    }
  });
  $('#setDestScheduleShow').jtable('load');
});

function dpicker() {

        $('input[name="MyName"]').datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '2011:2037',
        dateFormat: 'dd/mm/yy',
        minDate: 0,
        defaultDate: null
      });

    };

function temp() {
        var $temper = $('input[name="MyName"]').val();
        alert($temper);

}

Open in new window

peter-cooperAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
replacce your current button click :
          $button.click(function() {
            var $temper = $('.hasDatepicker').val();
			//var $myname = $('input[name="MyName"]').val();
			
			alert($temper);
          });

Open in new window

by :
          $button.click(function() {
                var theRow = $(this).closest("tr");
                var theDatePicker = theRow.find(".myname.hasDatepicker");
                var theValue = theDatePicker.val();
//                alert($(this).closest("tr").find(".myname.hasDatepicker").val()); // one line
                alert($temper);
          });

Open in new window

0
 
leakim971PluritechnicianCommented:
replace : onclick="dpicker();"
by : onclick="dpicker(this);"

and :
function dpicker() {

        $('input[name="MyName"]').datepicker({

Open in new window

by :
function dpicker(obj) {

        $(obj).datepicker({

Open in new window

0
 
peter-cooperAuthor Commented:
Alerts just the first input. Lets me input date in 2nd input but does not post or alert. Thanks
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
peter-cooperAuthor Commented:
Basically, I just need get the value of the input when the click function triggers. Thanks
0
 
leakim971PluritechnicianCommented:
so why do you create a datepicker on click?
0
 
peter-cooperAuthor Commented:
That is the only way I could get it to work. Is there a better way to accomplish this? also, why am I only getting the value of the first input instead of the value of say input 2? Thanks
0
 
leakim971PluritechnicianCommented:
yes, the same way of your other question using ajaxSuccess

to get the value use

$(":text[name=MyName]").click(function() {
    var myValue = $(this).val();
    alert( myValue );
});

Open in new window


but I think you want to get this value when user select a date :
http://api.jqueryui.com/datepicker/#option-onSelect

 $('input[name="MyName"]').datepicker({ // your current code
      onSelect: function(dateText, inst) {
          alert( dateText );
      }

Open in new window

0
 
peter-cooperAuthor Commented:
We have sorted the date and that is working fine as per my other question. I need to capture the value when the 'Update' button is clicked. Could I incorporate your code into the $button click event? Thanks
0
 
peter-cooperAuthor Commented:
2 things with code.

1) Although it does not error, the button does not appear in the table.

2) Where is the $temper defined?

Updated code:

sendbtn: {
        title: 'Update',
        width: '12%',
        sorting: false,
        display: function(data) {
          var $button = $('<input type="button" class="destBtn" name="destUpdBtn" value="Update" />');

          $button.click(function() {
                var theRow = $(this).closest("tr");
                var theDatePicker = theRow.find(".myname.hasDatepicker");
                var theValue = theDatePicker.val();
//                alert($(this).closest("tr").find(".myname.hasDatepicker").val()); // one line
                alert($temper);
          });
        }
      }

Open in new window

0
 
leakim971PluritechnicianCommented:
replace :
var theValue
by :
var $temper

and try to understand the code :o(
0
 
peter-cooperAuthor Commented:
Sorry my bad. forgot to return $button.  many thanks
0
 
peter-cooperAuthor Commented:
Many thanks for your help and patience.
0
All Courses

From novice to tech pro — start learning today.