Passing values from a DIV element to an input

2018-06-29 22:11:10

I have a PHP calendar form (generated from http://style-vs-substance.com/code/calendar-class-php/ as a base, but heavily customised and updated) which outputs two month at a time - 30/31 days, in a tabular format.

What I am trying to create is a booking form for business meetings, whereby the client user can click on a date on the HTML calendar and the value of the date as in the whole date value - not just the day is passed to the input field.

I would like to achieve something like (pseudo code): (calendar month of March 2015)

   <td><div value='13032015' id='something'>13</div></td>

On clicking this date box, the JQuery rule is fired and the value is passed to the input which is further down the page and formatted into something like:

<input type='text' value='13th March 2015' name='dateA' id='dateA'>

My initial issue is, can I take a unseen value from a DIV (rather than innerHTML) using jQuery and pass it to the input (with appropriate formatting)?

Part 1 - How to get JQuery to take a value from the DIV, I can place values into the input - that's easy, but I would need a unique ID for each div in the table (60+) and I'm not going to write out 60+ JQuery rules, one for each div id, there must be a better more dynamic way of doing this.

Part 2 - Once I have a value selected, how would I go about formatting the value to make it a full date rather than the code date identifier? Something similar to PHP date() function.

So, What would be the best JQuery way of achieving this? I am wary of generating a custom JQuery Var for each day as that's 60+ days on each page load, seems quite inefficient.

I am currently using JQuery 1.11.1 for other things on the page, and would be looking to use this rather than JQuery 2.

EDIT:

Could I take the DIV id value - so :

<td><div id='13032015'>13</div></td>

And somehow use the id string of 13032015 to become the date string in the input?

I think the best way is to use data attributes for both. You have one data attribute with the formatted date and one data attribute with the date you want for the backend.

When a user clicks the date you simply put the formatted date into a normal input and use the value you need for the backend into a hidden field .

jsfiddle

HTML

<div class="date" data-value='13032015' data-formatted="13th March 2015" id='something'>13</div>
<div class="date" data-value='14032015' data-formatted="14th March 2015" id='something'>14</div>
<div class="date" data-value='15032015' data-formatted="15th March 2015" id='something'>15</div>
<input type='text' value='' name='dateA' id='dateF'> 
<input type='hidden' value='' name='dateA' id='dateD'>

Javascript/jQuery

var date = $('.date');
var inputD = $('#dateD');
var inputF = $('#dateF');
date.on('click', function(){
    var valueD = $(this).data('value');
    var valueF = $(this).data('formatted');
    inputD.val(valueD);
    inputF.val(valueF);
    console.log(valueD);
});

No id required and dynamic:

$('td > div').on('click', function() {
    var value = $(this).attr('value');
    // do something with this value
});

And for the date formatting have a look at the Date API

The this keyword is a powerful tool in JavaScript. It takes a while to understand but saves way more time in the long run.

$(document).ready(function() {
    $('.click_me').click(function() {
        alert($(this).attr('value'));
    });
});

Here is the demo

Part 2 - Once I have a value selected, how would I go about formatting the value to make it a full date rather than the code date identifier? Something similar to PHP date() function.

Use Date in JavaScript to format the text.

$(document).ready(function() {
    $('.click_me').click(function() {
        var new_date = new Date($(this).attr('value'));
        alert(new_date.getDate() + "/" + (new_date.getMonth()+1) + "/" + new_date.getFullYear());
    });
});

Here is the demo

链接地址: http://www.djcxy.com/p/83512.html

上一篇: jQuery使用相同的类来动态创建元素

下一篇: 将值从DIV元素传递到输入