javascript - Ctrl select multiple items and access via form post -
i have form has list of days shown - user clicks on day , use jquery populate hidden field value can reference in post array.
i allow users select more 1 item using ctrl+click , able access selected options in post array not sure how go it?
i have figured out how allow selecting multiple items cant figure out how access via post current code contains last clicked item in hidden field.
here using currently:
var multiple = false; $(document).on('keyup keydown', function(e) { multiple = e.ctrlkey; }); $(document).ready(function () { $(document).on('click', '[name="day"]', function () { if (multiple) { $('[name="date"]').val($(this).text()); $(this).addclass('selected'); } else { $('[name="day"]').removeclass('selected'); $('[name="date"]').val($(this).text()); $(this).addclass('selected'); } }); });
you're using $('[name="date"]').val($(this).text());
, means replace value in input every time date clicked.
instead, should append input , separate each value with, example, comma.
so change:
$('[name="date"]').val($(this).text());
to:
$('[name="date"]').val($('[name="date"]').val() + ',' + $(this).text());
the $('[name="date"]').val()
means add current value.
i've removed 'hidden' input in example can see mean (updated fiddle here):
var multiple = false; $(document).on('keyup keydown', function(e) { multiple = e.ctrlkey; }); $(document).ready(function() { $(document).on('click', '[name="day"]', function() { if (multiple) { $('[name="date"]').val($('[name="date"]').val() + ',' + $(this).text()); $(this).addclass('selected'); } else { $('[name="day"]').removeclass('selected'); $('[name="date"]').val($(this).text()); $(this).addclass('selected'); } }); });
.selected { background-color: red; color: white; } .base { float: left; height: 40px; width: 40px; margin-right: 10px; padding: 10px; border: 1px solid; cursor: pointer; text-align: center; border-radius: 5px; font-size: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="date"> <br> <span id="days_disp"><div name="day" class="base wd selected"><span>mon</span> <br>05/10/2015</div> <div name="day" class="base wd"><span>tue</span> <br>06/10/2015</div> <div name="day" class="base wd"><span>wed</span> <br>07/10/2015</div> <div name="day" class="base wd"><span>thu</span> <br>08/10/2015</div> <div name="day" class="base wd"><span>fri</span> <br>09/10/2015</div> <div name="day" class="base nwd"><span>sat</span> <br>10/10/2015</div> <div name="day" class="base nwd"><span>sun</span> <br>11/10/2015</div> </span>
you can access hidden input's value (val()
) , use .split(',')
(to split @ each comma) form array of dates can work on whatever want do.
Comments
Post a Comment