Add div content using jquery - javascript

I have to add dynamically the content of div using jquery.
when I choose 10 for example, I should see in the right side 10 option of :
the code of these element are given as follow:
<nav class="choose_option" id="navch">
{{ form_widget(form.critere1) }}
<select id="select1">
<option value="normal" class="highlight_orange">Normal</option>
<option value="nombre">Nombre</option>
</select>
<select id="op1">
<option value="like" class="highlight_orange">Like</option>
<option value="not like">NOT LIKE</option>
<option value="=">=</option>
<option value="<"><(inf)</option>
<option value=">"><(sup)</option>
<option value="<>"> <></option>
</select>
<input type="text" id="txtcrit1" {{ app.request.get('txtcrit1') }}/>
</nav>
<nav>
<ul class="list">
<li class="list__item left pushright">
<label class="label--checkbox">
<input type="radio" name="radio" value="AND" class="checkbox" id="chx1">
ET
</label>
</li>
<li class="list__item left pushright">
<label class="label--checkbox">
<input type="radio" name="radio" value="OR" class="checkbox" id="chx2">
OU
</label>
</li>
</ul>
</nav>
my question, how I can add this same code dynamically using jquery and javascript in such a way when I choose five or tens option I get five or tens elements

I've done you a quick example of how you can do this:
$( document ).ready(function()
{
$('#selectBox').on('change', function()
{
switch (this.value)
{
case "5":
case "10":
for (i = 0; i < this.value; i++)
{
$("#appendToMe").append('<nav class="choose_option" id="navch">{{ form_widget(form.critere1) }}<select id="select1"><option value="normal" class="highlight_orange">Normal</option><option value="nombre">Nombre</option></select><select id="op1"><option value="like" class="highlight_orange">Like</option><option value="not like">NOT LIKE</option><option value="=">=</option><option value="<"><(inf)</option><option value=">"><(sup)</option><option value="<>"> <></option></select><input type="text" id="txtcrit1" {{ app.request.get("txtcrit1") }}/></nav><nav><ul class="list"><li class="list__item left pushright"><label class="label--checkbox"><input type="radio" name="radio" value="AND" class="checkbox" id="chx1">ET</label></li><li class="list__item left pushright"><label class="label--checkbox"><input type="radio" name="radio" value="OR" class="checkbox" id="chx2">OU</label></li></ul></nav>');
}
break;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="selectBox">
<option>select option</option>
<option>5</option>
<option>10</option>
</select>
<div id="appendToMe">
</div>

use $(selector).append() to append data

Related

Toggle element class on checkbox state

The class hidden should be toggling based on if the checkbox is checked. One of the drop-down menus should be hidden and the other be displayed.
maybe my ternary operator isn't set up properly.
Thanks in advance.
function toggleButton() {
var toggler = $("input[name='toggler']").prop('checked');
var awardOptions = $('#awardOptions');
var yearOptions = $('#yearOptions');
var awardShow = awardOptions.removeClass('hidden');
var yearShow = yearOptions.removeClass('hidden');
var awardHide = awardOptions.addClass('hidden');
var yearHide = yearOptions.addClass('hidden');
console.log(toggler);
return (toggler) ? (awardShow,yearHide) : (awardHide, yearShow);
}
$('#toggler').on('click', function(){
toggleButton();
});
.hidden {
display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggleWrapper">
<input type="checkbox" class="dn" name="toggler" id="toggler" checked/>
<label for="toggler" class="toggle">
<span class="toggle__handler"></span>
</label>
</div>
<div class="inputBox" id="filter">
<div class="dropdown hidden" id="yearOptions">
<select id="hof-year">
<option value="0">Choose a Year</option>
<option value="2016">2016</option>
</select>
</div>
<div class="dropdown" id="awardOptions">
<select id="hof-accomp">
<option value="0">Choose an Award</option>
</select>
</div>
</div>
This is the function I'm using to trigger the toggleButton function.
$('#toggler').on('click', function(){
toggleButton();
});
You can use var awardShow = awardOptions.toggleClass('hidden'); instead of using addClass or removeClass.
$('#toggler').on('click', function(){
$('#awardOptions, #yearOptions').toggleClass('hidden');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggleWrapper">
<input type="checkbox" class="dn" name="toggler" id="toggler" checked/>
<label for="toggler" class="toggle">
<span class="toggle__handler"></span>
</label>
</div>
<div class="inputBox" id="filter">
<div class="dropdown hidden" id="yearOptions">
<select id="hof-year">
<option value="0">Choose a Year</option>
<option value="2016">2016</option>
</select>
</div>
<div class="dropdown" id="awardOptions">
<select id="hof-accomp">
<option value="0">Choose an Award</option>
</select>
</div>
</div>

if dropdown is selected span is to show attribute of that option. This works until I add a second Select input

$("#item1").change(function() {
$('#price-
displayitem1').text($('option:selected').attr('data-item1'));
}).change();
$("#item2").change(function() {
$('#price-displayItem2').text($('option:selected').attr('data-item2'));
}).change();
then here are the spans which will be chaged
<span id="price-displayItem1"></span>
<span id="price-displayItem2"></span>
Then here is the actual Select input
<div class="col-sm-3">
<label for="item1" style="color:black;">item1</label>
<div class="input-select">
<select name="item1" id="item1">
<option value="1" data-item1="1">1</option>
<option value="2" data-item1="2">2</option>
<option value="3" data-item1="3">3</option>
</select>
</div>
</div>
<div class="col-sm-3">
<label for="item2" style="color:black;">item2</label>
<div class="input-select">
<select name="item2" id="item2">
<option value="1" data-item2="1">1</option>
<option value="2" data-item2="2">2</option>
<option value="3" data-item2="3">3</option>
</select>
</div>
</div>
Note: the id's and name's in actuality are only using string characters
Explanation: so basically It works for the first item/dropdown/span. But when I introduce a second or even third, then only the first one works properly. If i remove the code of the first. Then the second one begins to work but still not the third. and so on.
I'd appreciate any help.
Thanks!
Well you use an option selector so you select all the options on the page.
$('option:selected').attr('data-item1')
so you need to look for the options in the select that you are using
$(this).find('option:selected').attr('data-item1')
You forgot to use selector before option.
$("#item1").change(function() {
$('#price-displayitem1').text($('#item1 option:selected').attr('data-item1'));
}).change();
$("#item2").change(function() {
$('#price-displayItem2').text($('#item2 option:selected').attr('data-item2'));
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="price-displayItem1"></span>
<span id="price-displayItem2"></span>
<div class="col-sm-3">
<label for="item1" style="color:black;">item1</label>
<div class="input-select">
<select name="item1" id="item1">
<option value="1" data-item1="1">1</option>
<option value="2" data-item1="2">2</option>
<option value="3" data-item1="3">3</option>
</select>
</div>
</div>
<div class="col-sm-3">
<label for="item2" style="color:black;">item2</label>
<div class="input-select">
<select name="item2" id="item2">
<option value="1" data-item2="1">1</option>
<option value="2" data-item2="2">2</option>
<option value="3" data-item2="3">3</option>
</select>
</div>
</div>

Reduce redundant function with javascript

I currently have the following Javascript running on my website, but I really feel like it is really redundant. So I am trying to condense it, since they are basically all the same thing, except different numbers appended. Is there a way I can wildcard the string?
$(document).ready(function() {
$('#type_1').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_1').show();
}else {
$('#dropdown_list_1').hide();
}
});
$('#type_2').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_2').show();
}else {
$('#dropdown_list_2').hide();
}
});
$('#type_3').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_3').show();
}else {
$('#dropdown_list_3').hide();
}
});
$('#type_4').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_4').show();
}else {
$('#dropdown_list_4').hide();
}
});
$('#type_5').change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_5').show();
}else {
$('#dropdown_list_5').hide();
}
});
});
This is what I have tried so far, but I couldn't get it to work. I believe it's because the for loop only runs once, and not on each event.
for(var i = 1; i <= 15; i++){
$('#type_'+i).change(function(){
if($(this).attr('value') == "dropdown"){
$('#dropdown_list_'+i).show();
}else {
$('#dropdown_list_'+i).hide();
}
});
}
EDIT:
I uploaded a JSFiddle if you want to test the code out.
HTML:
<form>
<hr class="separate" />
<!-- Question 1 -->
<h3 class="question_title">Survey Question 1</h3>
<label for="question_1">Question 1</label>
<input type="text" name="question_1" value="" class="question_field" id="question_1">
<label for="type_1">Type for Question 1</label>
<div class="option_field">
<select name="type_1" id="type_1" onchange="" size="1">
<option value="oneline">One Line Text Field</option>
<option value="freeresponse">Free Response Text Field</option>
<option value="rating10">Rating (1-10)</option>
<option value="rating4">Poor, Fair, Good, Excellent</option>
<option value="dropdown">Drop-Down Menu</option>
</select>
</div>
<div id="dropdown_list_1" class="dropdown_list">
<label for="question_1_list">Question 1 List</label><input type="text" name="question_1_list" value="" class="question_list" id="question_1_list" placeholder="Option A,Option B,Option C,Option D">
</div>
<hr class="separate" />
<!-- Question 2 -->
<h3 class="question_title">Survey Question 2</h3>
<label for="question_2">Question 2</label><input type="text" name="question_2" value="" class="question_field" id="question_2">
<label for="type_2">Type for Question 2</label>
<div class="option_field">
<select name="type_2" id="type_2" onchange="" size="1">
<option value="oneline">One Line Text Field</option>
<option value="freeresponse">Free Response Text Field</option>
<option value="rating20">Rating (1-10)</option>
<option value="rating4">Poor, Fair, Good, Excellent</option>
<option value="dropdown">Drop-Down Menu</option>
</select>
</div>
<div id="dropdown_list_2" class="dropdown_list">
<label for="question_2_list">Question 2 List</label><input type="text" name="question_2_list" value="" class="question_list" id="question_2_list" placeholder="Option A,Option B,Option C,Option D">
</div>
<hr class="separate" />
<!-- Question 3 -->
<h3 class="question_title">Survey Question 3</h3>
<label for="question_3">Question 3</label><input type="text" name="question_3" value="" class="question_field" id="question_3">
<label for="type_3">Type for Question 3</label>
<div class="option_field">
<select name="type_3" id="type_3" onchange="" size="1">
<option value="oneline">One Line Text Field</option>
<option value="freeresponse">Free Response Text Field</option>
<option value="rating30">Rating (1-10)</option>
<option value="rating4">Poor, Fair, Good, Excellent</option>
<option value="dropdown">Drop-Down Menu</option>
</select>
</div>
<div id="dropdown_list_3" class="dropdown_list">
<label for="question_3_list">Question 3 List</label><input type="text" name="question_3_list" value="" class="question_list" id="question_3_list" placeholder="Option A,Option B,Option C,Option D">
</div>
</form>
Give your <select> a class, e.g.
<select name="type_2" class="type" size="1">
Then use DOM traversal functions to find the associated dropdown DIV from the type SELECT:
$(document).ready(function () {
$(".dropdown_list").hide();
$(".type").change(function () {
$(this).closest(".option_field").next(".dropdown_list")
.toggle($(this).val() == "dropdown");
});
});
DEMO
Also, you should use .val() to get an input value, not .attr("value").

how can i use id of option in selectlist

my code is:
html:
<select id="select" onclick="getValue()">
<option id="profile-pic">profile pic</option>
<option id="product-image">product image</option>
</select>
<div id="radio-button">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
male
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
female
</label>
</div>
<div id="dropdown">
<select id="select">
<option>profile pic</option>
<option>product image</option>
</select>
<select id="select">
<option>profile pic</option>
<option>product image</option>
</select>
</div>
jquery:
$(document).ready(function(){
$("div#dropdown").hide();
$("div#radio-button").hide();
});
$(document).ready(function(){
$("#select").change(function(){
$("div#dropdown").hide();
$("div#radio-button").show();
});
$("#select").click(function(){
$("div#dropdown").show();
$("div#radio-button").hide();
});
});
I want to use id of option in selectlist.
I have two option in select(1:profile-pic, 2:product-image) .
what i want:
when i clicked on profile pic it shows two radio button.
and if I select product image it shows two dropdown.
Please make sure to use an ID only once per page. An ID is a UNIQUE identifier of some element. I guess that "select" or "dropdown" aren't really unique page elements, so think of better names, for example "profile_picture_select" and "product_image_select".
Also, don't use inline javascript (onclick="getValue()").
EXAMPLE
HTML
<select id="function_select">
<option>profile_picture_select</option>
<option>product_image_select</option>
</select>
<div id="profile_picture_select">profile_picture_select</div>
<div id="product_image_select">product_image_select</div>
JavaScript (jQuery) (use indentation)
$(function () { // Same as $(document).ready().
$("#profile_picture_select").hide(); // By ID, so no element needed.
$("#product_image_select").hide();
// Just one document ready function.
$("#function_select").change(function () {
switch ($(this).val()) {
case "profile_picture_select":
$("#profile_picture_select").show();
$("#product_image_select").hide();
break;
case "product_image_select":
$("#profile_picture_select").hide();
$("#product_image_select").show();
break;
}
});
});
Check the jsFiddle: http://jsfiddle.net/c3Ehb/
JQuery
$(document).ready(function(){
$("#dropdown").hide();
$("#radio-button").hide();
$("#select").change(function () {
if($("#select option:selected").text() == 'profile pic')
{
$("#dropdown").hide();
$("#radio-button").show();
}
if($("#select option:selected").text() == 'product image')
{
$("#dropdown").show();
$("#radio-button").hide();
}
});
});
HTML
<select id="select">
<option>profile pic</option>
<option>product image</option>
</select>
<div id="radio-button">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
male
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
female
</label>
</div>
<div id="dropdown">
<select id="select">
<option>profile pic</option>
<option>product image</option>
</select>
<select id="select">
<option>profile pic</option>
<option>product image</option>
</select>
</div>

Drop down list - display div when clicking an option

You must write a function that 'shows' the corresponding part of the form depending on what the user has selected. For example, if 'Pizza' is selected, the div #section2 with the question about Pizza type should be shown.
This is part of the html code
<form id="survey" action="#" method="post">
<div id="section1">
<label for="food">What is your favourite type of food?</label>
<select id="food" onchange="selection()">
<option value="pizza">Pizza</option>
<option value="mex">Mexican</option>
<option value="thai">Thai</option>
</select>
</div>
<div id="section2">
What is your favourite type of pizza?<br>
<label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian">
<label for="supreme">Supreme</label><input type="radio" id="supreme">
<label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian">
</div>
How would i write a javascript function so that when I click the option pizza, it will display section 2? I'm a complete javascript novice so any help would be great.
DEMO: http://jsfiddle.net/iambriansreed/rQr6v/
JavaScript:
var sections = {
'pizza': 'section2',
'mex': 'section3',
'thai': 'section4'
};
var selection = function(select) {
for(i in sections)
document.getElementById(sections[i]).style.display = "none";
document.getElementById(sections[select.value]).style.display = "block";
}
Checkout the demo. Replace the section3 and section4 divs with actual content.
There are plenty of solutions for that. One of the simpliest options is to change your markup a bit and use div IDs.
HTML:
<div id="section1">
<label for="food">What is your favourite type of food?</label>
<select id="food" onchange="selection(this)">
<option value="pizza">Pizza</option>
<option value="mex">Mexican</option>
<option value="thai">Thai</option>
</select>
</div>
<div id="section_pizza" style="display: none;">
What is your favourite type of pizza?<br>
<label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian">
<label for="supreme">Supreme</label><input type="radio" id="supreme">
<label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian">
</div>
JavaScript:
function selection(select) {
document.getElementById("section_" + select.value).style.display = "block";
}
However, you can use JQuery library and make it faster and more flexible. You can easily add animation to blocks and add extra functionality.
HTML:
<div id="section1">
<label for="food">What is your favourite type of food?</label>
<select id="food">
<option value="pizza">Pizza</option>
<option value="mex">Mexican</option>
<option value="thai">Thai</option>
</select>
</div>
<div id="section2" data-type="pizza" style="display: none;">
What is your favourite type of pizza?<br>
<label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian">
<label for="supreme">Supreme</label><input type="radio" id="supreme">
<label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian">
</div>
JavaScript:
$("#food").change(function() {
$("[data-type]").hide();
$("[data-type='" + this.value + "']").show(1000);
});

Categories