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>
Related
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 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
I have a sample site here.
In the bottom of the document, there's a section labeled 'Potential Gen Ed TOC'.
If you open the Accordion labeled Composition, you'll see dropdown menus on the right.
As you can see, in this JavaScript, it was based on whether or not a checkbox was activated. Then the 'Potential Gen Ed TOC' would display a number based on the assigned value.
$(function($) {
var sum = 0;
$('#CourseMenu :checkbox').click(function() {
sum = 0;
$('#CourseMenu :checkbox:checked').each(function(idx, elm) {
sum += parseInt(elm.value, 10);
});
$('#total_potential').html(sum);
});
});
As you continue to check boxes throughout the different courses, a sum would be displayed.
What' I'm trying to do now, is eliminate the checkbox trigger in the JS. I've replaced them with dropdown menus that say, "Credits - Select Credit".
Whenever someone selects a value, the "Potential Gen Ed TOC" slowly increases based on that value.
I would assume that all I have to do is assign value="Any Number" and the JavaScript would pick up on that.
In the JavaScript (above), I'm having trouble accounting for pulling these values from the dropdown menus. As you can see the JS is based on checked boxes.
Once I'm able to pull values from the dropdown menu, I want to have these values add up, but never display a number higher than 72, no matter how many total transfer credits are selected.
Does that make sense?
Edit: Here is some markup to understand where I'm trying to pull the values from (dropdown menu)...
<fieldset name = Comunication>
<legend>Transfer Course Information</legend>
<label for="School Int.">School Int.</label>
<input name="School Int." type="text" size="6" maxlength="6" />
<label for="ID">ID</label>
<input name="ID" type="text" id="ID" size="8" />
<label for="Name">Name</label>
<input name="Name" type="text" id="Name" size="25" />
<label for="Grade">Grade</label>
<input name="Grade" type="text" id="Grade" size="2" />
<label for="COM1"></label>
<form id="form2" name="form2" method="post" action="">
<label for="Credits">Credits</label>
<select name="Credits" id="Credits">
<option value="0">Select Credit</option>
<option value="0.67">1 QtrCr.</option>
<option value="1.33">2 QtrCr.</option>
<option value="2.00">3 QtrCr.</option>
<option value="2.67">4 QtrCr.</option>
<option value="3.33">5 QtrCr.</option>
<option value="4.00">6 QtrCr.</option>
<option value="4.67">7 QtrCr.</option>
<option value="5.33">8 QrtCr.</option>
<option value="6.00">9 QtrCr.</option>
<option value="6.67">10 QtrCr.</option>
<option value="1">1 SemCr.</option>
<option value="2">2 SemCr. </option>
<option value="3">3 SemCr.</option>
<option value="4">4 SemCr.</option>
<option value="5">5 SemCr.</option>
<option value="6">6 SemCr.</option>
<option value="7">7 SemCr. </option>
<option value="8">8 SemCr.</option>
<option value="9">9 SemCr.</option>
<option value="10">10 SemCr.</option>
</select>
</form>
Transferrable
<input name="COM105" type="checkbox" id="COM1" />
$('#total_potential').html(Math.min(sum,72));
Will display the sum up to 72 then just 72
Here's how you would do it with select inputs:
$(function($) {
$('#CourseMenu select').change(function() {
var sum = 0;
$('#CourseMenu select').each(function(idx, elm) {
sum += parseInt(elm.value, 10);
});
$('#total_potential').html(Math.min(sum,72));
});
});
Important note
You have some serious issues with your form HTML markup. You have repeating ids in some of your elements which represents invalid markup, id attributes must be unique in a page. Also some of your inputs have the same name, which mean only one value will be submitted with the form. You can use arrays in your inputs name to submit multiple values.
how about:
if (sum <= 72) {
$('#total_potential').html(sum);
} else {
$('#total_potential').html("72");
}
I have 2 drop downs, I would like to know whether there is a possibility to display and hide some of the options in second drop down based on value selected in first dropdown.
<script language="JavaScript">
function funchk(){
document.getElementById('z').style.display="block";
}
</script>
<select name="first" onchange="funchk();">
<option name="asw" value="a">sda</option>
<option name="sd" value="sd">ZZ</option>
<option name="rdf" value="afe">fe</option>
<option name="bfe" value="bfe">fe3</option>
</select> <?php echo "<br/>" ?>
<select name="second">
<option name="a" value="a">aa</option>
<option name="z" value="a" style="display:none">ZZ</option>
<option name="r" value="a" style="display:none">aa</option>
<option name="b" value="b">bb</option>
</select>
Here i would like to display the 'z' option in 2nd dropdown to be displayed when onchging value of first dropdown.
No, you can't rely on setting the CSS to show/hide <option> elements.
You'll need to remove them, or just simply disable/enable them.
function funchk() {
document.getElementsByName('z')[0].disabled = false;
}
<select name="second">
<option name="a" value="a">aa</option>
<option name="z" value="a" disabled="disabled">ZZ</option>
<option name="r" value="a" disabled="disabled">aa</option>
<option name="b" value="b">bb</option>
</select>
you have to do that with javascript
here you can find different examples how to do that.
http://www.satya-weblog.com/2008/08/javascript-remove-delete-select-option.html
http://www.plus2net.com/javascript_tutorial/list-remove.php
Make use of Document Object Model(DOM) along with Javascript Events to manipulate HTML nodes.