asked on

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

leakim971

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

peter-cooper

ASKER

Alerts just the first input. Lets me input date in 2nd input but does not post or alert. Thanks

peter-cooper

ASKER

Basically, I just need get the value of the input when the click function triggers. Thanks

leakim971

so why do you create a datepicker on click?

peter-cooper

ASKER

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

leakim971

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

peter-cooper

ASKER

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

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

peter-cooper

ASKER

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

leakim971

replace :
var theValue
by :
var $temper

and try to understand the code :o(

peter-cooper

ASKER

Sorry my bad. forgot to return $button. many thanks

peter-cooper

ASKER

Many thanks for your help and patience.