ajaxを介して動的にロードされた非表示のフォーム要素の値を変更するのに問題があります。ユーザーが日付をクリックすると、いくつかの非表示の入力フィールドが日、月、年で自動的に更新されるようにしたいと思います(簡略化のためにコードには日のみが表示されています)。
主な質問は、ajaxを介して動的にロードされた要素をどのように選択できるかということだと思います。
簡略化されたコード:
index.php
<a href="#" id="someLink">Click Me</a>
include.js
$(document).ready(function(){
$('#someLink').click(function(){
// Create modal dialog dynamically
var modal = $('<div/>').attr({
id:'new' + objectName + 'Modal',
class:'modal hide fade',
tabindex:'-1',
role:'dialog',
});
// Ajax call to load modal
$.ajax({
url: "getModal.php",
}).done(function ( data ) {
modal.html(data);
});
// show form
modal.modal('show');
return false;
});
// bind datepicker from jQuery UI to text input
$("body").on({
focus: function(){
$('.datepicker').datepicker({
onClose: function(dateText, inst) {
var inputName = $(this).attr("name"); //returns "startDate"
console.log($('#'+inputName+'_day')); // returns "[]"
$('#'+inputName+'_day').val(new Date(dateText).getDate());
}
});
}
},'.datepicker');
});
getModal.php
echo <?php
echo "<form name='modalForm'>";
echo "<input type='hidden' name='startDate_day' id='startDate_day'>";
echo "<input type='text' class='datepicker' name='startDate' id='startDate'>";
echo "</form>";
echo ?>