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();
});
Related
I have two dropdown lists of states . In both dropdown items there is two state Alaska and California. If I select any item from dropdown list one then I hit the radio button so the other dropdown must have same selection. Can anyone help me please? Thanks
<form>
<select id="state1" name="state1">
<option value="Alaska">Alaska</option>
<option value="California">California</option>
</select>
<select id="state2" name="state2">
<option value="Alaska">Alaska</option>
<option value="California">California</option>
</select>
<input type="radio" id="yes" name="yesNo" onclick="yesnoCheck()" value="yes" />
</form>
JavaScript Code
<script>
var state= document.getElementById("state");
var selectedText = state.options[state.selectedIndex].text;
var state1= document.getElementById("state1");
var selectedText1 = state.options[state.selectedIndex].text;
selectedText1 =selectedText;
</script>
You can simply do this by assigning the value of the first select to the second when the radio button is clicked.
var stateSelect1 = document.getElementById("state1");
var stateOption1 = document.getElementById("yes");
var stateSelect2 = document.getElementById("state2");
stateOption1.onclick = function(){
stateSelect2.value = stateSelect1.value
}
<form>
<select id="state1" name="state1">
<option value="Alaska">Alaska</option>
<option value="California">California</option>
</select>
<select id="state2" name="state2">
<option value="Alaska">Alaska</option>
<option value="California">California</option>
</select>
<input type="radio" id="yes" name="yesNo" value="yes" />
</form>
If you check the box the value will be set to the value in the first select.
In your backend you have to change yes or no to true or false.
<form>
<select id="state1" name="state1">
<option value="Alaska">Alaska</option>
<option value="California">California</option>
</select>
<select id="state2" name="state2">
<option id="state2_Alaska" value="Alaska">Alaska</option>
<option id="state2_California" value="California">California</option>
</select>
<input id="radioCheck" type="checkbox" name="yesNo" />
</form>
<script>
document.querySelector("#radioCheck").addEventListener("change", function() {
if(document.querySelector("#radioCheck").value == true){
var state = document.querySelector("#state1").value;
document.querySelector("#state2_" + state).setAttribute("selected", true);
}
});
</script>
I have a scenario with Chosen plugin and jQuery Validate plugin where I'm trying to show and hide fields according to radio button checked options. So as I'm trying to validate them too. Here's my code:
<form id="my-form" action="" method="post">
<input type="radio" name="active" id="1" value="1" onclick="test(1)" > A
<input type="radio" name="active" id="1" value="2" onclick="test(2)"> B
<input type="radio" name="active" id="1" value="3" onclick="test(3)"> C
<input type="radio" name="active" id="1" value="4" onclick="test(4)" checked> D
<div class='with-select' id="resident" style="display:none !important;">
<span>resident:</span>
<select class="chosen-select" required="true">
<option value="">[select option]</option>
<option value="01">Value 1</option>
<option value="02">Value 2</option>
<option value="03">Value 3</option>
<option value="04">Value 4</option>
<option value="05">Value 5</option>
</select>
</div>
<div class='with-select' id="employee" style="display:none !important;">
<span>employee:</span>
<select class="chosen-select" name="selEmp" id="selEmp" required="true">
<option value="">[select option]</option>
<option value="01">Value 1</option>
<option value="02">Value 2</option>
<option value="03">Value 3</option>
<option value="04">Value 4</option>
<option value="05">Value 5</option>
</select>
</div>
<div class='with-select' id="inputvis" style="display:none !important;">
<span>Visitor:</span>
<input type="text" name="txtVis" id="txtVis" required="true">
</div>
<div class='with-select' id="inputothr" >
<span>Other:</span>
<input type="text" name="txtOther" id="txtOther" required="true">
</div>
<div>
<input type="submit" />
</div>
</form>
<script>
// Chosen validation
$('.chosen-select').chosen();
$.validator.setDefaults({ ignore: ":hidden:not(select)" });
// validation of chosen on change
if ($("select.chosen-select").length > 0) {
$("select.chosen-select").each(function() {
if ($(this).attr('required') !== undefined) {
$(this).on("change", function() {
$(this).valid();
});
}
});
}
// validation
$('#my-form').validate({
errorPlacement: function (error, element) {
console.log("placement");
if (element.is("select.chosen-select")) {
console.log("placement for chosen");
// placement for chosen
element.next("div.chzn-container").append(error);
} else {
// standard placement
error.insertAfter(element);
}
}
});
window.test = function(a){
//alert(a);
switch(a){
case 1:
$("#resident").show();
$("#employee").hide();
$("#inputvis").hide();
$("#inputothr").hide();
break;
case 2:
$("#resident").hide();
$("#employee").show();
$("#inputvis").hide();
$("#inputothr").hide();
break;
case 3:
$("#resident").hide();
$("#employee").hide();
$("#inputvis").show();
$("#inputothr").hide();
break;
case 4:
$("#resident").hide();
$("#employee").hide();
$("#inputvis").hide();
$("#inputothr").show();
break;
}
}
</script>
My fiddle
The problem is that I have to select/enter values in every field to post the form. How can I post the form with checking one radio button for example, and then enter value in only that field (others) corresponding and skip validation of other select box or whatever left out?
I have a modal that contains a dropdown list that can select multiple options, i've tried many methods but my javascript wont execute do what i need. When the button is clicked, i need the javascript to select a value from the options under the said dropdown list. It does not select anything.
//alert(response[i].daytype);
var daywhen = response[i].daytype.toString();
var trimmed = daywhen.split(',');
var length = trimmed.length;
//alert(trimmed[0]+trimmed.length);
document.getElementById(2).selected = "true";
document.getElementById(1).selected = "true";
for(x = 0;x<length;x++){
alert(trimmed[x]);
document.getElementById("1").selected = "true";
document.getElementById("esched").selectedIndex = 2;
<div class="col" id="escheduledropdown" style="display:none;"><label id="etypeofsched"></label><!-- list of week or months if not daily -->
<select id="esched" name="esched" class="form-control col selectpicker" data-style="btn-primary" multiple="multiple">
<!-- fill data using javascript -->
<option value="1" id="1">Monday</option>
<option value="2" id="2">Tuesday</option>
<option value="3" id="3">Wednesday</option>
<option value="4" id="4">Thursday</option>
<option value="5" id="5">Friday</option>
<option value="6" id="6">Saturday</option>
<option value="0" id="0">Sunday</option>
</select>
<input type="hidden" name="hiddenschedule2" id="hiddenschedule2" value="">
</div>
Note: The commented alerts are executed so i know the javascript is executed. it just wont read the elementbyid.
Here I have 3 radio buttons in each li and one of the is having select dropdown. I need to validate this dropdown on button submit if user selected School radio button.But the classes are not being applied to the select dropdown.
$(".retail-proceed-purchase").click(function() {
var checkout_delivery_option = $(".cartcontinue .delivery_option").val();
if (checkout_delivery_option == 'your_school') {
var school = $('#school_list :selected').val();
if (school == 'your_school') {
$('.school_name').addClass("needsfilled");
$('.school_name').attr("placeholder", emptyerror);
return false;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<input type="radio" id="school" name="delivery" value="your_school">
<label for="school">
<select class="school_name" id="school_list">
<option label="Send to school" value="your_school">Send to school</option>
<option value="your_school a">Send to school A</option>
<option value="your_school b">Send to school B</option>
</select>
</label>
<div class="check"></div>
</li>
Try this
$(".retail-proceed-purchase").click(function() {
school_element = $("[type='radio'][value='your_school']")
if(school_element.is(':checked')){
school_list_element = school_element.parents("li").find("select.school_name")
if(school_list_element.val() == "your_school"){
alert('Please choose school name from list')
school_list_element.addClass("needsfilled");
school_list_element.attr("placeholder", "error occured");
} else {
alert('form submitted')
}
}else{
alert('form submitted')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cartcontinue">
<li>
<input type="radio" id="school" name="delivery" value="your_school">
<label for="school">
<select class="school_name" id="school_list">
<option label="Send to school" value="your_school">Send to school</option>
<option value="your_school a">Send to school A</option>
<option value="your_school b">Send to school B</option>
</select>
</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="school" name="delivery" value="your_college">
Second radio button
<div class="check"></div>
</li>
</div>
<br><br>
<button class="retail-proceed-purchase">proceed</button>
There is a task. It is necessary to give the user a choice in the first step between 3 (input radio). After he chose one of the items he needed, a second column appears with the new column (input radio). And also after the choice in the second step appears the third step with the final choice (input radio).
It is important that the second step and the third for each selected item are new.
Help solve this problem.
I found a similar task, but it's a little unsuitable for my purposes.
Updating button content based on selection
for example
$(document).ready(function(){
var selects = $('.drop-down');
selects.not(':eq(0)').prop('disabled', true);
selects.on('change', function() {
var select = $(this),
currentIndex = selects.index(select),
nextIndex = currentIndex + 1;
if (currentIndex != selects.length - 1) {
selects.slice(nextIndex)
.val('')
.prop('disabled', true);
selects.eq(nextIndex).prop('disabled', select.val() === '');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="v1" class="drop-down">
<option value="">--Выберите Вид рекламы--</option>
<option value="1">Объявление [Товар / Услуга]</option>
<option value="2">Визитная карточка</option>
<option value="3">Статический баннер</option>
</select><br>
<select name="v2" class="drop-down">
<option value="">--Выберите раздел--</option>
<option value="1">Товары</option>
<option value="2">Услуги</option>
<option value="3">Компании</option>
<option value="4">Биржа</option>
<option value="5">Публикации</option>
</select><br>
<select name="v3" class="drop-down">
<option value="">--Конечная категория--</option>
<option value="1">Весь раздел</option>
<option value="2">Главная страница</option>
<option value="3">Категория товара</option>
<option value="4">Отдельный товар</option>
</select>
Hope this is what you want:
will create dependencies between each select and the next one only with CSS.
This might not be a perfect solution but for some situations it might definitely be suffice.
Each select must have a required attribute for this to work and also there should be no HTML elements between them.
You can extend this approach to pretty much anything you want, including those radio buttons you've mentioned. just add them to the HTML and change the CSS a bit. it was unclear what exactly you wanted, but this gives you 90% of the way to achieve it probably.
select { margin:1em; display:block; }
/* block all but the first "select" elements from being used (like "disabled" */
select:not(:first-child){ opacity:.3; pointer-events:none; }
/* show the next "select" if any select has a value */
select:valid + select{ opacity:1; pointer-events:auto; }
select:invalid{ }
<select name="v1" required>
<option value="">--Выберите Вид рекламы--</option>
<option value="1">Объявление [Товар / Услуга]</option>
<option value="2">Визитная карточка</option>
<option value="3">Статический баннер</option>
</select>
<select name="v2" required>
<option value="">--Выберите раздел--</option>
<option value="1">Товары</option>
<option value="2">Услуги</option>
<option value="3">Компании</option>
<option value="4">Биржа</option>
<option value="5">Публикации</option>
</select>
<select name="v3" required>
<option value="">--Конечная категория--</option>
<option value="1">Весь раздел</option>
<option value="2">Главная страница</option>
<option value="3">Категория товара</option>
<option value="4">Отдельный товар</option>
</select>
Try this:
jsFiddle example: https://jsfiddle.net/7c297a3w/
Javascript
$('input[type="radio"][name^="group-"]').change(function() {
var container = $(this).parent().parent();
var nextSiblings = container.nextAll();
nextSiblings.removeClass('valid');
nextSiblings.find('input[type="radio"]').attr('checked', false);
container.addClass('valid');
});
CSS
[id^="step-"] {
display: table-cell;
width: 1%;
}
[id^="step-"]:not(:first-child) label {
opacity: .3;
pointer-events: none;
}
[id^="step-"].valid+[id^="step-"] label {
opacity: 1;
pointer-events: auto;
}
label {
display: block;
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="step-1">
Step 1
<label><input type="radio" name="group-1" value="1" required>1</label>
<label><input type="radio" name="group-1" value="2">2</label>
<label><input type="radio" name="group-1" value="3">3</label>
<label><input type="radio" name="group-1" value="4">4</label>
<label><input type="radio" name="group-1" value="5">5</label>
</div>
<div id="step-2">
Step 2
<label><input type="radio" name="group-2" value="a" required>a</label>
<label><input type="radio" name="group-2" value="b">b</label>
<label><input type="radio" name="group-2" value="c">c</label>
<label><input type="radio" name="group-2" value="d">d</label>
<label><input type="radio" name="group-2" value="e">e</label>
</div>
<div id="step-3">
Step 3
<label><input type="radio" name="group-3" value="i" required>i</label>
<label><input type="radio" name="group-3" value="ii">ii</label>
<label><input type="radio" name="group-3" value="iii">iii</label>
<label><input type="radio" name="group-3" value="iv">iv</label>
<label><input type="radio" name="group-3" value="v">v</label>
</div>