Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 285
  • Last Modified:

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

0
peter-cooper
Asked:
peter-cooper
  • 7
  • 5
1 Solution
 
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
 
peter-cooperAuthor Commented:
Basically, I just need get the value of the input when the click function triggers. Thanks
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
leakim971PluritechnicianCommented:
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
 
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now