I've created days names 7 checkboxes and 1 input type hidden
. If user click on days names which are checkboxes. Then their values print in the input.
Here is my code:
<div class="ml-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="monday" name="days_names" value="Monday">
<label class="custom-control-label" for="monday">Monday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tuesday" name="day_name_selector" value="Tuesday">
<label class="custom-control-label" for="tuesday">Tuesday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="wednesday" name="day_name_selector" value="Wednesday">
<label class="custom-control-label" for="wednesday">Wednesday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="thursday" name="day_name_selector" value="Thursday">
<label class="custom-control-label" for="thursday">Thursday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="friday" name="day_name_selector" value="Friday">
<label class="custom-control-label" for="friday">Friday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="saturday" name="day_name_selector" value="Saturday">
<label class="custom-control-label" for="saturday">Saturday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="sunday" name="day_name_selector" value="Sunday">
<label class="custom-control-label" for="sunday">Sunday</label>
</div>
</div>
<input type="" class="form-control selected_days_names" name="days_names" />
<script>
$(document).ready(function() {
$("input[name='day_name_selector']").change(function() {
var final = new Array();
$('input[name="day_name_selector"]:checked').each(function(){
var values = $(this).val();
final.push(values);
});
$('.selected_days_names').val(final);
});
});
</script>
The problem is, I am getting values in input without spaces like this --> Sunday,Monday,Tuesday
..... I want it to show the values in input like this --> Sunday, Monday, Tuesday
with spaces between values.
How can I get spaces between values? Please help me
The issue is because jQuery is calling join()
on the array when displaying it in the value of the field. By default this uses ','
to separate the values.
Instead you want to use join(', ')
(note the trailing space) so you can call that manually when setting the val()
:
$('.selected_days_names').val(final.join(', '));
Here's a full working example, which is using map()
instead of each()
to be slightly more succinct:
jQuery(function($) {
$("input[name='day_name_selector']").change(function() {
var final = $('input[name="day_name_selector"]:checked').map(function() {
return this.value;
}).get();
$('.selected_days_names').val(final.join(', '));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ml-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="monday" name="days_names" value="Monday">
<label class="custom-control-label" for="monday">Monday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tuesday" name="day_name_selector" value="Tuesday">
<label class="custom-control-label" for="tuesday">Tuesday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="wednesday" name="day_name_selector" value="Wednesday">
<label class="custom-control-label" for="wednesday">Wednesday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="thursday" name="day_name_selector" value="Thursday">
<label class="custom-control-label" for="thursday">Thursday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="friday" name="day_name_selector" value="Friday">
<label class="custom-control-label" for="friday">Friday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="saturday" name="day_name_selector" value="Saturday">
<label class="custom-control-label" for="saturday">Saturday</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="sunday" name="day_name_selector" value="Sunday">
<label class="custom-control-label" for="sunday">Sunday</label>
</div>
</div>
<input type="" class="form-control selected_days_names" name="days_names" />
A friend's site is being really slow when loading. I used gtmetrix.com (even though the page is not wordpress) to check and the page load time is 8.4s with 2.09MB and a score of C. the result ...
A friend's site is being really slow when loading. I used gtmetrix.com (even though the page is not wordpress) to check and the page load time is 8.4s with 2.09MB and a score of C. the result ...
Please i am having an issue with my java script. start_clock_ws : function(){ var that = this; ..decl function init(){ if(socket.isReady() === ...
Please i am having an issue with my java script. start_clock_ws : function(){ var that = this; ..decl function init(){ if(socket.isReady() === ...
When trying to run cow1.voice(); and I keep getting an error in the console. Uncaught ReferenceError: type is not defined class Cow { constructor(name, type, color) { this.name = name; ...
When trying to run cow1.voice(); and I keep getting an error in the console. Uncaught ReferenceError: type is not defined class Cow { constructor(name, type, color) { this.name = name; ...
Is it possible to enforce the votes array to have exactly 5 entries? newData.child('votes').val().length === 5) doesn't seem to work as the length property only works with strings. Here is my data: ...
Is it possible to enforce the votes array to have exactly 5 entries? newData.child('votes').val().length === 5) doesn't seem to work as the length property only works with strings. Here is my data: ...