I have a Wordpress with a Ninjaform calculated form. I have a dropdown list, and I would like to display the calculation DIV only after the dropdown is selected, but open automatically.
This is my select input (which I cannot change):
<select id="nf-field-5" name="nf-field-5" class="ninja-forms-field nf-element">
<option value="-" selected="selected">Seleccionar kilates</option>
<option value="14k">14k (joyas)</option>
<option value="18k">18k (joyas)</option>
<option value="22k">22k (monedas)</option>
<option value="24k">24k (lingotes)</option>
<option value="no-estoy-seguro-a">No estoy seguro/a</option>
</select>
This is my div:
<span>
<div class="calculator-item-list">
<div class="item-block calculator-item">
<p><br>
<span class="weight">Total de oro:</span>
<span class="headline2">{calc:Total} €</span>
<span class="weight">{calc:Susgramos} gramos</span>
<span class="large">Le pagamos a {calc:Porgramo} € el gramo</span>
<span class="weight">Gastos de valoración: -20€</span>
<br>
<span class="weight">Precio final:</span>
<span class="headline">{calc:Totals} €</span>
</p>
</div></div>
</span>
The div I can change and css. Also I can add a script to my header or footer.
Please help me, as I have tried various options but none seem to work.
So ideally, after the user selects an option from the dropdown, the result div shows up, before this it must be hidden.
I know an easy option would be with a hidden checkbox and label for clicking but I need an automatic solution, which works without cliking on any button to submit.
Here is link to my page: https://comprooroenmalaga.com/vender-oro-online/
Many thanks,
Bee
While you said that you cannot change the Select and Options, I'm going to assume that you mean the values of them.
Change it to this:
<select id="nf-field-5" name="nf-field-5" class="ninja-forms-field nf-
element" onchange="showDiv(divToShow)">
<option value="-" selected="selected">Seleccionar kilates</option>
<option value="14k">14k (joyas)</option>
<option value="18k">18k (joyas)</option>
<option value="22k">22k (monedas)</option>
<option value="24k">24k (lingotes)</option>
<option value="no-estoy-seguro-a">No estoy seguro/a</option>
</select>
And your div:
<span>
<div class="calculator-item-list" id="divToShow" style="display: none;">
<div class="item-block calculator-item">
<p><br>
<span class="weight">Total de oro:</span>
<span class="headline2">{calc:Total} €</span>
<span class="weight">{calc:Susgramos} gramos</span>
<span class="large">Le pagamos a {calc:Porgramo} € el gramo</span>
<span class="weight">Gastos de valoración: -20€</span>
<br>
<span class="weight">Precio final:</span>
<span class="headline">{calc:Totals} €</span>
</p>
</div></div>
</span>
Then :
<script>
function showDiv(id){
//For ease
var x = document.getElementById(id);
x.style.display = "block";
}
<script>
You can either use the change on select or use selected.
$(document).ready(function() {
$("#dropdown").change(function() {
$("#show").show();
})
})
#show {
display: none;
margin-top: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="" id="dropdown">
<option value="test1">TEST1</option>
<option value="test2">TEST2</option>
<option value="test3">TEST3</option>
<option value="test4">TEST4</option>
<option value="test5">TEST5</option>
</select>
<div id="show">
TEST SHOW
</div>
You can use jQuery to detect the dropdown change/select and then fire your div to show. This code assumes that your .calculator-item-list div has the CSS display property set to none e.g. display:none;.
UPDATE: I suspect OP's html is being created dynamically.
$(document).ready(function() {
console.log('fired');
$(window).on('change', '#nf-field-5', function(){
console.log('Change hit');
$('.calculator-item-list').show();
});
});
Related
Looking for some jQuery to help hide and reveal content in a simple form I'm creating.
Picking options 1-3 in the select field should show one of the three data response divs as well as reveal the content in the rest of the form (data-form-order 2).
I think data attributes would be a good route to go down but a little unsure of where to start.
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div data-response="op1">
This is content for option 1.
</div>
<div data-response="op2">
This is content for option 2.
</div>
<div data-response="op3">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
I highly recommend reading Decoupling Your HTML, CSS, and JavaScript. You can make some really simple and reusable jQuery that does some pretty cool stuff, without a lot of duplicate code or tightly coupled code. The following is very extensible, reusable, easy to read and maintain.
$(document).ready(()=>{
$('.js-revealer').on('change', function(){
var $select = $(this);
var $selected = $select.find('option:selected');
var hideSelector = $selected.data('r-hide-target');
var showSelector = $selected.data('r-show-target');
$(hideSelector).addClass('is-hidden');
$(showSelector).removeClass('is-hidden');
});
});
.is-hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box" class="js-revealer">
<option value="0" data-r-show-target="" data-r-hide-target=".opt-1, .opt-2, .opt-3, .opt-other">- please select -</option>
<option value="1" data-r-show-target=".opt-1, .opt-other" data-r-hide-target=".opt-2, .opt-3">Option 1</option>
<option value="2" data-r-show-target=".opt-2, .opt-other" data-r-hide-target=".opt-1, .opt-3">Option 2</option>
<option value="3" data-r-show-target=".opt-3, .opt-other" data-r-hide-target=".opt-1, .opt-2">Option 3</option>
</select>
</div>
<div data-response="op1" class="opt-1 is-hidden">
This is content for option 1.
</div>
<div data-response="op2" class="opt-2 is-hidden">
This is content for option 2.
</div>
<div data-response="op3" class="opt-3 is-hidden">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions" class="opt-other is-hidden">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
Really all you need is to hide all the divs using some CSS by default, and then use the change function to get the value and select the div based on that value:
$('#select-box').change(function(){
var selectVal = $(this).val();
$('.content, #other-questions').hide();
$('.content[data-response="op' + selectVal + '"], #other-questions').show();
});
.content, #other-questions {
display: none;
}
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="content" data-response="op1">
This is content for option 1.
</div>
<div class="content" data-response="op2">
This is content for option 2.
</div>
<div class="content" data-response="op3">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
I've updated my answer to include classes which are better for selecting elements than data attributes.
I would suggest using classes for this, there is no need for data attributes.
$(function() {
$('#select-box').change(function(){
if($('#select-box').val() == '1') {
$('.response1').show();
$('.response2').hide();
$('.response3').hide();
$('#content').show();
}
else if($('#select-box').val() == '2') {
$('.response1').hide();
$('.response2').show();
$('.response3').hide();
$('#content').show();
}
else if($('#select-box').val() == '3') {
$('.response1').hide();
$('.response2').hide();
$('.response3').show();
$('#content').show();
}
});
});
.response1, .response2, .response3 {
display: none;
}
#content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class='response1' data-response="op1">
This is content for option 1.
</div>
<div class='response2' data-response="op2">
This is content for option 2.
</div>
<div class='response3' data-response="op3">
This is content for option 3.
</div>
</div>
<div id='content' data-form-order="2" id="other-questions">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
I have shown show/hide using Class . Initially hide all div's , shown on drop down selection (only matches div).Here is how.I have created two classes hide
to hide the element and show to show the element.
$('[data-response^=op]').attr('class',"hide");//Initially set all div hidden
$("#select-box").on("change",function(){
var value = $(this).val();
if(value !="" && value<=3 && value !=0){
console.clear();// to clear older logs.
console.log('Selected value'+$(this).val());
$('[data-response^=op]').attr('class',"hide");//On change hide all div's
var selector = "op"+value;
$(document).find("[data-response='"+selector+"']").attr('class',"show");
$("#other-questions").attr('class',"show");//Show matching div.
}else{
$("#other-questions").attr('class',"hide");
$('[data-response^=op]').attr('class',"hide");
}
})
.hide{
display:none;
}
.show{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div data-form-order="1">
<div id="opening-question">
<select id="select-box">
<option value="0">- please select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div data-response="op1">
This is content for option 1.
</div>
<div data-response="op2">
This is content for option 2.
</div>
<div data-response="op3">
This is content for option 3.
</div>
</div>
<div data-form-order="2" id="other-questions" class="hide">
Rest of form content. This area should show when option values 1-3 are selected in the select field.
</div>
</form>
I have a bizzare problem using Packery. Below is my code.
If I toggle from show(default) to hide when I select from the dropdown menu it works fine.
When I hide it on load and would like to show the class when I select from drown down, it does NOT work. It just shows me the last picture ALWAYS.
I cant seem to figure out what the problem is. Could anyone help?
<select id="DateFilter">
<option selected>Choose Date</option>
<option id="yesterday">yesterday</option>
<option id="today">today</option>
</select>
<div id="container" class="js-packery" data-packery-options='{ "itemSelector": ".item", "gutter": 0 }'>
<div class="yesterday">
<div class="item">
<figure><img src="pic1.jpg" width="100%"><figcaption>Pic 1</figcaption></figure>
</div>
<div class="item">
<figure><img src="pic2.jpg" width="100%"><figcaption>Pic 2</figcaption></figure>
</div>
<div class="item">
<figure><img src="pic3.jpg" width="100%"><figcaption>Pic 3</figcaption></figure>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".yesterday").show();
$("#DateFilter").change(function(){
if($(this).find("option:selected").attr("id")=="yesterday"){
$(".yesterday").hide();
}
});
});
</script>
<select id="DateFilter">
<option selected>Choose Date</option>
<option value="yesterday" id="yesterday">yesterday</option>
<option value="today" id="today">today</option>
</select>
and change
if($(this).find("option:selected").attr("id")=="yesterday"){
with
if($(this).val() == 'yesterday'){
Code is working as it should be. You have explained you problem partially> Images can be shown on document load and it become hidden when you select Yesterday.
So I wasn't sure how to word this, but I want to create a multi-step form that asks the user a few questions, then based on what they choose, shows different code. I made a simple jsfiddle to explain. When they choose their answer, it will automatically fade into the next question or display a set of code, like an image. Also, having it work with radio buttons.
What is this called and will I need javascript to accomplish it?
<select>
<option>Select Color</option>
<option>Green</option>
<option>Blue</option>
<option>Red</option>
<option>Orange</option>
</select>
A few pointers:
jsFiddle Demo
(1) I used position:absolute so all DIVs would be located on top of each other. See here for more info about absolute/relative/fixed/static positioning
(2) Use the change() event to detect when the SELECT value has changed
(3) fadeOut ALL DIVs with class="ques", then fadeIn the one that you wish to display next
(4) Each DIV and each SELECT have a unique, numbered ID attribute. We get the number of the SELECT that just changed, turn that ID from a string into an integer, and add one. Now we know which DIV to fadeIn()
(5) The initial $('#q1').show(); just displays the first question, to get things started, because in the CSS we used .ques{display:none;} to hide all the questions, including the first one.
jsFiddle Demo
HTML:
<div id="bubble">
<div id="contain">
<div id="q1" class="ques">
<p>Which is your favorite color?</p>
<select id="q-1">
<option>Select Color</option>
<option>Blue</option>
<option>Red</option>
<option>Green</option>
<option>Orange</option>
</select>
</div><!-- #q1 -->
<div id="q2" class="ques">
<p>Which is your favorite car?</p>
<select id="q-2">
<option>Select Car</option>
<option>Ford</option>
<option>Chev</option>
<option>Kia</option>
<option>Peugot</option>
</select>
</div><!-- #q2 -->
</div><!-- #contain -->
</div><!-- #bubble -->
jQuery:
$('#q1').show();
$('select').change(function(){
$('.ques').fadeOut(800);
var num = $(this).attr('id').split('-')[1];
var nxt = parseInt(num) + 1;
$('#q'+nxt).fadeIn(800);
});
EDIT:
Thanks a lot. Is it possible to show a different select if they choose green instead of red?
$('select').change(function(){
$('.ques').fadeOut(800);
var ans = $(this).val();
if (ans == 'Green'){
$('#q15').fadeIn(800);
}else if (ans == 'Red'){
$('#q12').fadeIn(800);
}
});
Revised jsFiddle
You will need javascript to accomplish this. I have added a fiddle to explain how it can be done.
Check the fiddle using the following url : http://jsfiddle.net/hec4otv3/17/
HTML Code:
<div id="step1">
<div class="bubble">
<div class="contain">
<p>Which is your favorite color?</p>
<select id='color'>
<option value="">Select Color</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
</select>
</div>
</div>
after selecting answer, it should fade into a new question/code.
</div>
<div id="blue-step" class="hide">
<div class="bubble">
<div class="contain">
<p>Which is your favorite sub-color?</p>
<select id='color'>
<option>Select Color</option>
<option>dark Blue</option>
<option>light blue</option>
<option>sky blue</option>
<option>navy blue</option>
</select>
</div>
</div>
</div>
<div id="red-step" class="hide">
you choose red
</div>
<div id="green-step" class="hide">
you choose green
</div>
<div id="orange-step" class="hide">
you choose orange
</div>
Javascript:
window.shownextstep=function(){
var txt=document.getElementById('color').value;
document.getElementById('step1').style.display='none';
document.getElementById(txt+"-step").style.display='block';
}
var e=document.getElementById('color');
e.onchange=shownextstep;
CSS:
.bubble {
width:220px;
height:150px;
background:url("http://i.imgur.com/MBRmEEf.png")no-repeat;
background-position:center;
background-size:200px;
}
.contain {
padding: 10px 0 0 30px;
}
select {
margin-left:10px;
}
.hide{
display:none
}
Sounds like you should use JQuery animate http://api.jquery.com/animate/. To get the fade effect one of the properties you'll want to use is opacity. You might also want to use some easing in and out. You can then call the complete() function to load the next question.
yo can try this checking the value via jQuery. Instead of alert you can give jquery any command you like.
$(document).ready(function(){
$('select').change(function(){
var selectVal = $(this).find(':selected').val();
if(selectVal == 'Green'){
alert(selectVal);
}
else if(selectVal == 'Blue'){
alert(selectVal)
}
else if(selectVal == 'Red'){
alert(selectVal)
}
else {
alert(selectVal)
}
});
});
http://jsfiddle.net/hmd0t5u5/1/
Here you have a full working simple three steps example, with no need to jQuery.
You just need to define the submit_form() function. The HTML characters « and » just print respectively « and » which might be interesting for the previous and next button characters.
function shows_form_part(n){
var i = 1, p = document.getElementById("form_part"+1);
while (p !== null){
if (i === n){
p.style.display = "";
}
else{
p.style.display = "none";
}
i++;
p = document.getElementById("form_part"+i);
}
}
function submit_form() {
var sum = parseInt(document.getElementById("num1").value) +
parseInt(document.getElementById("num2").value) +
parseInt(document.getElementById("num3").value);
alert("Your result is: " + sum);
}
<body onload="shows_form_part(1)">
<form>
<div id="form_part1">
Part 1<br>
<select id="num1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<!--form elements 1-->
<button type="button" onclick="shows_form_part(2)">»</button>
</div>
<div id="form_part2">
Part 2<br>
<input type="number" value="2" id="num2"><br>
<!--form elements 2-->
<button type="button" onclick="shows_form_part(1)">«</button>
<button type="button" onclick="shows_form_part(3)">»</button>
</div>
<div id="form_part3">
Part 3<br>
<!--form elements 3-->
<input type="number" value="3" id="num3"><br>
<button type="button" onclick="shows_form_part(2)">«</button>
<button type="button" onclick="submit_form()">Sum</button>
</div>
</form>
</body>
I have this code:
<select>
<option disabled selected>Select Method</option>
<option value="question">Question</option>
<option value="password">Password</option>
<option value="email">Email</option>
<option value="none">None</option>
</select>
Now I want when user select each of them some div that hidden in css with display:none; get visible for example when user select Question the div that have question id get visible or when Password selected the div that have password id get visible.
I try this but not work:
$(document).ready(function(){
if ($("#auth option:selected").text() == "question"){
$("#question").css("display","block");
}
});
So how can I do this?
If you follow the pattern you have done so far, you have to write code for each option. If your options and div elements are coupled with value and id, you can simply do like this,
$("select").change(function() {
$("div").hide();
$("#" + $(this).val()).show();
});
Demo Fiddle
Here is Demo for this , remove disabled from select tag so that user can select the options
Jsfiddle
http://jsfiddle.net/adarshkr/z9gcf40r/2/
Code
HTML
<select id="showdiv">
<option disabled selected>Select Method</option>
<option value="question">Question</option>
<option value="password">Password</option>
<option value="email">Email</option>
<option value="none">None</option>
</select>
<div id="question" class="hide">
<p>question</p>
</div>
<div id="password" class="hide">
<p>password</p>
</div>
<div id="email" class="hide">
<p>email</p>
</div>
<div id="none" class="hide">
<p>none</p>
</div>
CSS
.hide{
display:none
}
JAVASCRIPT
$("select").change(function(){
$("div").hide();
$("#"+$(this).val()).show();
});
try this,
$('#auth').on('change', function() {
var that = $(this).val();
if (that === "question"){
$("#question").css("display","block");
}
});
Better check value than the text.
$(document).ready(function(){
if ($("#auth option:selected").val() == "question"){
$("#question").css("display","block");
}
});
I want a div to become visible when its corresponding select option is clicked (and to hide others) unfortunately my attempts at JavaScript are terrible.
CSS
#aaa, #bbb, #ccc {
display:none;
}
The HTML (I use the same id name for option and div - is this incorrect?)
<select>
<option>Select</option>
<option id="aaa" value="aaa" onclick="showExtra(this)">AAA</option>
<option id="bbb" value="bbb" onclick="showExtra(this)">BBB</option>
<option id="ccc" value="ccc" onclick="showExtra(this)">CCC</option>
</select>
<div id="aaa">
<p>AAA is aaamazing</p>
</div>
<div id="bbb">
<p>BBB is bbbriliant</p>
</div>
<div id="ccc">
<p>cccor blimey CCC</p>
</div>
The JavaScript
function showExtra(element)
{
I don't have clue .slideToggle("medium");
}
Get rid of the IDs in the <option> elements, they're not needed (or if they are, you need to rename them, e.g. optaaa, so they don't conflict with the IDs of the DIVs). Also, call the function from the dropdown's onchange event, not clicking on the options.
<select onchange="showExtra(this)">
<option>Select</option>
<option value="aaa">AAA</option>
<option value="bbb">BBB</option>
<option value="ccc">CCC</option>
</select>
Give all your DIVs a class, so you can operate on them as a group:
<div id="aaa" class="tab">
<p>AAA is aaamazing</p>
</div>
<div id="bbb" class="tab">
<p>BBB is bbbriliant</p>
</div>
<div id="ccc" class="tab">
<p>cccor blimey CCC</p>
</div>
In the JS, you can then operate on all the DIVs that do or don't match the value.
function showExtra(option) {
var divID = option.value;
$(".tab:not(#"+divID+")").slideUp();
$(".tab#"+divID).slideDown();
}
DEMO