here's the jsfiddle : https://jsfiddle.net/a1gsgh11/9/
For some reason , the javascript not working in js fiddle. My concern is, when I select multiple checkboxes, the values displays correctly and immediately without having to submit any button.
How do I display these selected values inside the box that currently listed out all the programming languages?
How do I alter below script into what I want?
function moveAll(from, to) {
$('#'+from+' option').remove().appendTo('#'+to);
}
function moveSelected(from, to) {
$('#'+from+' option:selected').remove().appendTo('#'+to);
}
function selectAll() {
$("select option").attr("selected","selected");
}
I want to display the selected checkboxes values inside select dropdown below:
<form name="selection" method="post" onSubmit="return selectAll()">
<select multiple size="10" id="from">
<option value="html">Html</option>
<option value="css">Css</option>
<option value="google">Google</option>
<option value="javascript">Javascript</option>
<option value="jquery">Jquery</option>
<option value="regex">Regex</option>
<option value="php">Php</option>
<option value="mysql">Mysql</option>
<option value="xml">Xml</option>
<option value="json">Json</option>
</select>
<div class="controls">
>>
>
<
<< </div>
<select multiple id="to" size="10" name="topics[]"></select>
<form>
this line displays all the values selected in the checkboxes:
<output>0 are checked<p>No Values</p></output>
Any help appreciated.. Thanks in advance.
Please see the fiddle, it is working fine now: https://jsfiddle.net/a1gsgh11/16/
I change the way the events were called:
$(".moveAll1").click(function(){
$('#from option').remove().appendTo($('#to'));
});
$(".moveAll2").click(function(){
$('#to option').remove().appendTo($('#from'));
});
$(".moveSelected1").click(function(){
$('#from option:selected').remove().appendTo('#to');
});
$(".moveSelected2").click(function(){
$('#to option:selected').remove().appendTo('#to');
});
var checked, checkedValues = new Array();
$("input[type=checkbox]").change(function(e) {
var selectedtext = ($(this).next().text());
if($(this).is(':checked'))
{
$("#from").append('<option value="' + selectedtext + '">' + selectedtext +'</option>');
}else{
$('option[value*="' + selectedtext + '"]').remove();
}
});
Html :
<input type="checkbox" name="level" id="level" value="1"><label>Primary</label><br/>
<input type="checkbox" name="level" id="level" value="2"><label>Upper Secondary</label><br/>
<input type="checkbox" name="level" id="level" value="3"><label>University</label><br/>
</div>
<div class="small-12 medium-6 large-6 columns">
<input type="checkbox" name="level" id="level" value="4"><label>Lower Secondary</label><br/>
<input type="checkbox" name="level" id="level" value="5"><label>Pre University</label><br/>
<input type="checkbox" name="level" id="level" value="6"><label>Skills/Languages</label><br/>
<div class="controls">
<a class="moveAll1">>></a>
<a class="moveSelected1">></a>
<a class="moveSelected2"><</a>
<a class="moveAll2" href="#"><<</a>
</div>
Is this the behavior you wanted?
var ele = $(this);
var from = $('select#from');
if (ele.prop('checked')) {
var opt = $("<option></option>")
.attr("value", ele.val())
.attr('id', 'op' + ele.val())
.text(ele.val());
from.append(opt);
} else {
var opt = $('#op' + ele.val());
opt.remove();
}
fiddle
Related
I am having div with input elements with Add and Cancel buttons.
When user clicked on add Button,I need to generate div with the same input elements and capture the value to JSon object.
Here is my code snippet
<div id="filterfields" class="row collapse">
<form class="form-inline" id="filterFieldsForm">
<select class="form-control" name="TypeCode" id="filterType_0">
<option value="Type">Type</option>
<option value="SubmittedBy">SubmittedBy</option>
<option value="Date">Date</option>
<option value="Description">Description</option>
</select>
<select class="form-control" name="Filter" id="filterCondition_0">
<option value="Equal">Equal</option>
<option value="StartsWith">Starts With</option>
<option value="EndsWith">Ends With</option>
<option value="Greaterthan">Greater Than</option>
<option value="Lessthan">Less Than</option>
</select>
<input type="text" name="caseFilterText" class="form-control" id="filterText_0">
<input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
<label for="andRadio">AND</label>
<input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
<label for="orRadio">OR</label>
<button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
<button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>
</form>
</div>
I tried with clone and trying to retrieve values from the input elements inside div,but I am facing issue with getting values and generating ids.
$('#addBtn_' + count).click(function () {
var newel = $("#filterfields").clone(true);
var jsonData = [];
$(newel).insertAfter("#filterfields");
var index;
$("#filterfields").find('input:text,select').each(function () {
let str = '{"' + this.id + '":' + (this.value + '}';
jsonData.push(str);
}).end()
newel.find(':input').each(function () {
var oldId = $(this).attr("id");
var split = oldId.toString().split('_');
index = parseInt(split[1]);
var curId = split[0];
var newId = curId + "_" + index + 1;
this.id = newId;
}).end()
jsonData.push('"filterClause":' + $('input[name="inlineRadioOptions"]:checked').val() + '"');
});
Please suggest me if there is better way to achieve the similar function as I am not able to get values of input elements of current row.
Consider the following code.
$(function() {
function formToJson(fObj) {
var j = [];
fObj.children().not("button, label").each(function(i, el) {
// Will avoid buttons and labels
if (!($(el).is(":radio") && !$(el).is(":checked"))) {
// Will avoid unselected Radio Buttons
var d = {
nodeName: $(el).prop("nodeName"),
props: {
class: $(el).attr("class"),
id: $(el).attr("id")
},
value: $(el).val(),
name: $(el).attr("name")
};
if (d.nodeName != "SELECT") {
d.props.type = $(el).attr("type");
}
j.push(d);
}
});
return j;
}
$("[id^='addBtn']").click(function() {
var jsonData = formToJson($("#filterFieldsForm"));
console.log(jsonData);
var filter = "Filter: ";
$.each(jsonData, function(key, item) {
if (key != 2) {
filter += item.value + " ";
} else {
filter += "'" + item.value + "' ";
}
});
$("<div>", {
class: "filter-results"
}).html(filter).appendTo("body");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filterfields" class="row collapse">
<form class="form-inline" id="filterFieldsForm">
<select class="form-control" name="TypeCode" id="filterType_0">
<option value="Type">Type</option>
<option value="SubmittedBy">SubmittedBy</option>
<option value="Date">Date</option>
<option value="Description">Description</option>
</select>
<select class="form-control" name="Filter" id="filterCondition_0">
<option value="Equal">Equal</option>
<option value="StartsWith">Starts With</option>
<option value="EndsWith">Ends With</option>
<option value="Greaterthan">Greater Than</option>
<option value="Lessthan">Less Than</option>
</select>
<input type="text" name="caseFilterText" class="form-control" id="filterText_0">
<input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
<label for="andRadio">AND</label>
<input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
<label for="orRadio">OR</label>
<button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
<button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>
</form>
</div>
As you are iterating over elements, it is best to use .each(). Using the proper selector, we can target just the form elements you want. You then want a condition to ensure that if a Radio Button is selected (or checked) that it is included and others are excluded.
The result is an Array of Objects that can be used to rebuild the HTML Structure or just build new copies.
Update
$(function() {
function formToJson(fObj) {
var j = [];
fObj.each(function(i, el) {
var d = {};
$("select, input", el).each(function(k, v) {
if (!($(v).is(":radio") && !$(v).is(":checked"))) {
d[$(v).attr("id")] = $(v).val();
}
});
j.push(d);
});
return j;
}
$("[id^='addBtn']").click(function() {
var jsonData = formToJson($("#filterFieldsForm"));
console.log(jsonData);
var filter = "Filter: ";
$.each(jsonData, function(key, item) {
if (key != 2) {
filter += item.value + " ";
} else {
filter += "'" + item.value + "' ";
}
});
$("<div>", {
class: "filter-results"
}).html(filter).appendTo("body");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filterfields" class="row collapse">
<form class="form-inline" id="filterFieldsForm">
<select class="form-control" name="TypeCode" id="filterType_0">
<option value="Type">Type</option>
<option value="SubmittedBy">SubmittedBy</option>
<option value="Date">Date</option>
<option value="Description">Description</option>
</select>
<select class="form-control" name="Filter" id="filterCondition_0">
<option value="Equal">Equal</option>
<option value="StartsWith">Starts With</option>
<option value="EndsWith">Ends With</option>
<option value="Greaterthan">Greater Than</option>
<option value="Lessthan">Less Than</option>
</select>
<input type="text" name="caseFilterText" class="form-control" id="filterText_0">
<input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
<label for="andRadio">AND</label>
<input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
<label for="orRadio">OR</label>
<button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
<button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>
</form>
</div>
This will target the various rows and for each row, it will gather all the Select and Inputs.
i have a checkout form . where there are 2 fields are used o give total amount of checkout . 1 field is in select tag and second is input type check box i want when i select and option and checkbox there values should be combine to give total.
$(function() {
$('.price-input').change(function() {
var price = 0;
$('.price-input').each(function() {
if ($(this).is(":checked")) {
price += parseInt($(this).attr("value"), 10);
}
})
$("select.price").change(function() {
var selectedPrice = $(this).children("option:selected").val();
document.getElementById("totalPrice").innerHTML = selectedPrice;
});
$(".totalPrice").text(price);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<label for="exampleFormControlSelect1">#lang('Number of Words'):</label>
<select class="price" name="word_prices_id" required>
<option value="">#lang('Select Words')</option>
#foreach($wordPrice as $wPrice)
<option value="{{$wPrice->id}}">{{$wPrice->page_quantity}} words</option>
#endforeach
</select>
</div>
</div>
<input class="price-input" type="checkbox" name="upsell" value="12">
I added a class .ajx to both Select and input to handle changes made on both of their values in the same function !
$(document).on('change', '.ajx', function () {
if ($( "input.price-input:checked" ).is(":checked") && $("select.price").val()!==''){
var price = 0;
price += parseInt($("select.price").val(),10);
$('.price-input').each(function() {
if ($(this).is(":checked")) {
price += parseInt($(this).attr("value"), 10);
}
});
$(".totalPrice").empty().text(price);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<label for="exampleFormControlSelect1">Price:</label>
<select class="price ajx" name="word_prices_id" required id="exampleFormControlSelect1">
<option value="">Choose Price</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<input class="price-input ajx" type="checkbox" name="upsell" value="12">
<input class="price-input ajx" type="checkbox" name="upsell1" value="15">
<div class="totalPrice">
</div>
Here, I have a drop-down which has options with values and also there are check boxes which have same values as of drop-down box. so what I am trying to do is when I select the option from drop-down the check box with same value should get selected.
for ex.
if I select the option designer from the drop-down, the checkbox related to designer should get selected because they will have the same value.if I select the engineer from the drop-down, then the engineer check box should get selected and other check boxes should get unchecked.
how can I do this?
here is what i have tried:
<select id="task_for_role" class="multi-selector" id="task_for_role" name="task_for">
<option value="3">Engineer</option>
<option value="4">Designer</option>
<option value="5">Architect</option>
</select>
<input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>
<script type="text/javascript">
$(function(){
$('#task_for_role').change(function() {
var selected = $('#task_for_role option:selected');
if (selected.val() == "null") {
$('input[name="role[]"]').prop('checked', false);
}
else {
$('input[name="role[]"]').prop('checked', true);
}
});
});
</script>
You can use value attribute to achieve this
$(function () {
$('#task_for_role').change(function () {
var val = $(this).val();
$('input[name="role[]"]').prop('checked', false);
$('input[name="role[]"][value=' + val + ']').prop('checked', true);
});
});
Also you have specified id twice for the select so remove one
<select class="multi-selector" id="task_for_role" name="task_for">
<option value="3">Engineer</option>
<option value="4">Designer</option>
<option value="5">Architect</option>
</select>
NOTE
I have written code such that only one checkbox would be checked at a time if you need multiple checkboxes to be checked remove this line
$('input[name="role[]"]').prop('checked', false);
You have two id attribute in your select tag! id="task_for" and id="task_for_role"
Should be corrected to:
<select class="multi-selector" id="task_for_role" name="task_for">
And you have wrong value assignment:
var selected = $('#task_for_role option:selected');
if (selected.val() == "null") {
should be:
var selected = $('#task_for_role');
if (selected.val() == "null") {
or ...
var selected = $('#task_for_role option:selected');
if (selected.attr('value') == "null") {
try this It's work:
HTML
<select class="multi-selector" id="task_for_role" name="task_for">
<option value="0">Select</option>
<option value="3">Engineer</option>
<option value="4">Designer</option>
<option value="5">Architect</option>
</select>
<input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>
Script
<script type="text/javascript">
$(function () {
$('#task_for_role').change(function () {
if ($('#task_for_role').val() == "0") {
$('input:checkbox').prop('checked', false);
}
else {
$('input:checkbox').prop('checked', false);
$('input[value=' + $('#task_for_role').val() + ']:checkbox').prop('checked', true);
}
});
});
</script>
$('#task_for_role').change(function() {
var selected = $('option:selected', this).val();
console.log(selected)
$(':checkbox[value=' + selected + ']').prop('checked', true);
$(':checkbox[value=' + selected + ']').siblings().prop('checked', false);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="multi-selector" id="task_for_role" name="task_for">
<option value="3">Engineer</option>
<option value="4">Designer</option>
<option value="5">Architect</option>
</select>
<input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>
Remove one other id attribute on the select element
This could have done this way. You have two id in same element which is not allowed so i have ignored the first one and uses #task_for_role.
It also work when the document is loading as i have fired .change() at
the end.
$('#task_for_role').change(function() {
var selected = $(this).val();
$('input[type="checkbox"]').attr('checked', false);
$('input[value="' + selected + '"]').prop('checked', true);
}).change();
$(function() {
$('#task_for_role').change(function() {
var selected = $(this).val();
$('input[type="checkbox"]').attr('checked', false);
$('input[value="' + selected + '"]').prop('checked', true);
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="multi-selector" id="task_for_role" name="task_for">
<option value="3">Engineer</option>
<option value="4">Designer</option>
<option value="5">Architect</option>
</select>
<input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>
I have a multi select field which toggles more field when selected multiple options. For example
<label for="projectType">Project Type<span class="icon-required">Required</span></label>
<select multiple="multiple" id="my-select" name="my-select[]">
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
</select>
#if($existelem1.Type1)
<fieldset class="group elem1" style="display:none;">
<legend><span>Type1</span></legend>
#foreach($elem1coll in $elem1collOptions)
<span class="radio">
<input class="radio" type="radio" name="Type1" id="elem1coll_${elem1coll}" value="$elem1coll"#if("${Type1}" == $elem1coll) checked="checked" #end>
<label for="elem1coll_${elem1coll}">$elem1coll</label>
</span>
#end
</fieldset>
#end
#if($existelem1.Type2)
<fieldset class="group elem1" style="display:none;">
<legend><span>Type2</span></legend>
<span class="radio">
#foreach($elem1Po in $elem1PoOptions)
<input class="radio" type="radio" name="Type2" id="elem1Po_${elem1Po}" value="$elem1Po"#if("${Type2}" == $elem1Po) checked="checked" #end>
<label for="elem1Po_${elem1Po}">$elem1Po</label>
#end
</span>
</fieldset>
#end
For example If I select "elem 1" and "elem 2" it toggles two checkboxes each.But when I check values using:
var params = compress(jQuery("#createMyForm").serialize());
console.log(params)
prints projectType=elem1,elem2&elem1.Type1=Yes&elem1.Type2=Yes&elem2.Type1=&elem2.Type1=&
It only sends the values of "elem 1" checkboxes and skips the "elem 2" checkboxes. How can i fix this.
It seems that you're not getting all the selected options from the multiple dropdown.
I would recommend to use.
var values = [];
var keys = [];
$('#my-select :selected').each(function(i, selectedElement) {
values[i] = $(selectedElement).val();
keys[i] = $(selectedElement).text();
});
I want to display only some options in a select according to the value of radio buttons. As I retrieve data from databases (MYSQL PDO), I'll simplify my code.
<input type="radio" name="type_rapport" value="v" id="r_v" /><label for="r_v">RV</label>
<input type="radio" name="type_rapport" value="f" id="r_f" /><label for="r_f">RF</label>
<input type="radio" name="type_rapport" value="g" id="r_g" /><label for="r_g">RG</label>
<select>
<option value="rv1">RV1</option>
<option value="rv2">RV2</option>
<option value="rf1">RF1</option>
<option value="rf2">RF2</option>
<option value="rg1">RG1</option>
<option value="rg2">RG2</option>
</select>
When RV is selected, only the options "rv1" and "rv2" should be displayed (and so on). I tried different solutions, but unfortunately I didn't succeed.
Javascript/Jquery will be appreciated.
Thanks in advance.
You can try this jQuery :
$(function(){
$('select').prop('disabled',true);//disable select box
$('[name=type_rapport]').change(function(){
$('select').removeProp('disabled'); // enable select box
var valueRadio = $(this).val();
$('select option').hide();
$('select option[value^="r'+valueRadio+'"]').show();
$('select option[value^="r'+valueRadio+'"]:first').prop('selected',true);
});
});
Working Demo
your jquery
$('.rd').on('change',function(){
var last='r'+$(this).val();
$('select > option').hide();
$('select > option[value^="'+last+'"]').show();
$("select option").filter(function () {
return $(this).attr('value') == last+'1';
}).attr('selected', true);
});
<input type="radio" name="type_rapport" class="rd" value="v" id="r_v" /><label for="r_v">RV</label>
<input type="radio" name="type_rapport" class="rd" value="f" id="r_f" /><label for="r_f">RF</label>
<input type="radio" name="type_rapport" class="rd" value="g" id="r_g" /><label for="r_g">RG</label>
<select>
<option value="rv1">RV1</option>
<option value="rv2">RV2</option>
<option value="rf1">RF1</option>
<option value="rf2">RF2</option>
<option value="rg1">RG1</option>
<option value="rg2">RG2</option>
</select>
DEMO
DEMO2