[Mr_P]

I am using JTable http://jtable.org and jQuery 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 what the user enters.

However, if I click the second input, this displays the correct date in the input, but when I click the update button to trigger the alert and display the value, the value that is returned is the value of input 1.

All I am trying to do is, get the value of each input on the click event.

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() {

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

  //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: '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,
          visibility: 'visible',
          type: 'date',
          display: function() {
            return "<input class='' type='text' name='amend'>";
          }
        },
        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 $temp = $('input[name="amend"]').val();
                alert($temp);
              }
            });
          return $button;
        }
      }
    }
  }); 
      $('#setDestScheduleShow').jtable('load');
});

This post has been edited by Mr_P: 25 October 2014 - 05:12 AM

[andrewsw]

I am not sure about your question, but this

var $temp = $('input[name="amend"]').val();

will display the value of the first input with the name 'amend'. This $('input[name="amend"]') returns of collection of these inputs, and applying val() will, by default with jQuery, obtain the value from the first of these elements.

Is this the issue you are talking about?

[Mr_P]

Hi Andrew and thanks for reply. Yes, that is I think the problem. This piece of code creates the inputs based on records pulled from the db.

Quote

display: function() {
return "<input class='' type='text' name='amend'>";
}

I then retrieve the value using this piece of code. However, it is only getting the value from the 1st input. I think I could use $.each and then trim the , or whatever, but would prefer an alternative if possible. Thanks

Quote

var $temp = $('input[name="amend"]').val();

This post has been edited by Mr_P: 25 October 2014 - 07:42 AM

[andrewsw]

I don't have the full picture. What is the relation between the button that is clicked and the input that this click-code needs to refer to? Are the button and input sitting within the same parent-element? Or perhaps there are the same number of these buttons as there are 'amend' inputs? In which case, the index number of each can be used to identify the corresponding input.

[Mr_P]

What I need to happen is when a user enters a value into the input which is created with this code:

display: function() {
return "<input class='' type='text' name='amend'>";
}

I then need to capture the value that is entered when the user triggers

$button.click(function() {

so I can then process via ajax to php for inclusion into db. If it would help, I can open my test server with the table with full functionality for you to test. http://80.5.187.111/temp/ Thanks

This post has been edited by Mr_P: 25 October 2014 - 10:42 AM