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>
Related
Here i have three dropdowns with differents values and the code looks like as follows.
To get the value of the corresponding dropdown using jquery i had this but it always gets same value please have a look
$(".one").hide();
$(".two").hide();
$(".three").show();
var name_type=$("#abc_type_1").attr('name','type');
$("#abc_type_2").removeAttr('name');
$("#abc_type_3").removeAttr('name');
$("input[name=select_type]:radio").change(function () {
if($(this).val()=='1')
{
$(".one").show();
$(".two").hide();
$(".three").hide();
var name_type=$("#abc_type_1").attr('name','type');
$("#abc_type_2").removeAttr('name');
$("#abc_type_3").removeAttr('name');
}
else if($(this).val()=='2')
{
$(".one").hide();
$(".two").show();
$(".three").hide();
var name_type=$("#abc_type_2").attr('name','type');
$("#abc_type_1").removeAttr('name');
$("#abc_type_3").removeAttr('name');
}
else if($(this).val()=='3')
{
$(".one").hide();
$(".two").hide();
$(".three").show();
var name_type=$("#abc_type_3").attr('name','type');
$("#abc_type_1").removeAttr('name');
$("#abc_type_2").removeAttr('name');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left_1">
<input class="magic-radio" type="radio" name="select_type" id="1" value="1">
<label for="1">1</label>
<input class="magic-radio" type="radio" name="select_type" id="2" value="2">
<label for="2">2</label>
<input class="magic-radio" type="radio" name="select_type" id="3" checked value="3">
<label for="3">3</label>
</div>
<div class="left_2 one">
<select name="type" id="abc_type_1" class="form-control abc_type">
<option value="A">LSK-A</option>
<option value="B">LSK-B</option>
<option value="C">LSK-C</option>
</select>
</div>
<div class="left_2 two">
<select name="type" id="abc_type_2" class="form-control abc_type">
<option value="AB">LSK-AB</option>
<option value="AC">LSK-AC</option>
<option value="BC">LSK-BC</option>
</select>
</div>
<div class="left_2 three">
<select name="type" id="abc_type_3" class="form-control abc_type">
<option value="super">LSK-SUPER</option>
<option value="box">BOX-K</option>
</select>
</div>
Here i want to get the value of the selected select box but i can not get the correct value, please help me to solve.
var form_data={
agent_name: $('#agent_name').val(),
number: $('#number').val(),
number_from: $('#number_from').val(),
number_to: $('#number_to').val(),
quantity: $('#quantity').val(),
amount: $('#amount').val(),
date: $('#date').val(),
commision: $('#commision').val(),
profit: $('#profit').val(),
agent_amount: $('#agent_amount').val(),
user_id: $('#user_id').val(),
type: name_type.val(),
}
Problem with script is that you are not handling radio buttons and dropdown while extracting values for posting to server.
JS
var form_data = {
agent_name: $('#agent_name').val(),
number: $('#number').val(),
number_from: $('#number_from').val(),
number_to: $('#number_to').val(),
quantity: $('#quantity').val(),
amount: $('#amount').val(),
date: $('#date').val(),
commision: $('#commision').val(),
profit: $('#profit').val(),
agent_amount: $('#agent_amount').val(),
user_id: $('#user_id').val(),
type: $("#abc_type_"+$("input[name=select_type]:checked").val()).val()
};
Just replace your form_data with above script. If not works let me know.
This part getting checked value from the radio button.
$("input[name=select_type]:checked").val()
response is like this. 1 or 2 or 3.
$("#abc_type_"+$("input[name=select_type]:checked").val()).val()
Now jquery will get value by targeting the ID. eg #abc_type_1, #abc_type_2, #abc_type_3
You add a default value to the inputs and add function that runs when selects change like this Code:
$(".one").hide();
$(".two").hide();
$(".three").show();
var name_type = $("#abc_type_1").attr('name', 'type');
$("#abc_type_2").removeAttr('name');
$("#abc_type_3").removeAttr('name');
$("input[name=select_type]:radio").change(function() {
if ($(this).val() == '1') {
$(".one").show();
$(".two").hide();
$(".three").hide();
var name_type = $("#abc_type_1").attr('name', 'type');
$("#abc_type_2").removeAttr('name');
$("#abc_type_3").removeAttr('name');
} else if ($(this).val() == '2') {
$(".one").hide();
$(".two").show();
$(".three").hide();
var name_type = $("#abc_type_2").attr('name', 'type');
$("#abc_type_1").removeAttr('name');
$("#abc_type_3").removeAttr('name');
} else if ($(this).val() == '3') {
$(".one").hide();
$(".two").hide();
$(".three").show();
var name_type = $("#abc_type_3").attr('name', 'type');
$("#abc_type_1").removeAttr('name');
$("#abc_type_2").removeAttr('name');
}
});
$("select").change(function(e){
alert(e.target.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left_1">
<input class="magic-radio" type="radio" name="select_type" id="1" value="1">
<label for="1">1</label>
<input class="magic-radio" type="radio" name="select_type" id="2" value="2">
<label for="2">2</label>
<input class="magic-radio" type="radio" name="select_type" id="3" checked value="3">
<label for="3">3</label>
</div>
<div class="left_2 one">
<select name="type" id="abc_type_1" class="form-control abc_type">
<option value="">Select value</option>
<option value="A">LSK-A</option>
<option value="B">LSK-B</option>
<option value="C">LSK-C</option>
</select>
</div>
<div class="left_2 two">
<select name="type" id="abc_type_2" class="form-control abc_type">
<option value="">Select value</option>
<option value="AB">LSK-AB</option>
<option value="AC">LSK-AC</option>
<option value="BC">LSK-BC</option>
</select>
</div>
<div class="left_2 three">
<select name="type" id="abc_type_3" class="form-control abc_type">
<option value="">Select value</option>
<option value="super">LSK-SUPER</option>
<option value="box">BOX-K</option>
</select>
</div>
This is how you can get the current Select Box value
Simplest Example
HTML
<select class="select1_class_name" id="select1" data-userid="1">
<option value="1">1</option>
</select>
Jquery
$('#select1').change(function() {
var id = $(this).data('userid');
console.log(id); //you will get on change of selected dropdown
});
$("#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>
So, any hints why this is not working?
I'm trying to get both input fields ('pagamento' and 'parcelas') at a preset if the 'Boleto' radiobox is selected, ('1' and 'MercadoPago', respectively, and back again to user input if the 'Cartão' radiobox is selected.
function boleto() {
if(document.getElementById('tipodepagamento').checked==true){
document.getElementById('pagamento').value = 'MercadoPago';
document.getElementById('pagamento').disabled = true;
document.getElementById('parcelas').value = '1';
document.getElementById('parcelas').disabled = true;
}
else{
document.getElementById('pagamento').disabled = false;
document.getElementById('parcelas').disabled = false;
}
}
<div class="col-md-6">
<label class="radio-inline">
<input type="radio" name="tipodeconta" id="tipodepagamento2" value="Cartão" checked onClick="boleto();">Cartão de Crédito
</label>
</div>
<div class="col-md-6">
<label class="radio-inline">
<input type="radio" name="tipodeconta" id="tipodepagamento" value="Boleto" onClick="boleto();">Boleto
</label>
</div>
<label>Plataforma de Pagamento</label>
<select class="form-control" onClick="fpagamento();validador();" onKeyUp="fpagamento();" name="pagamento" id="pagamento">
<option value="Selecione">Selecione</option>
<option value="Paypal">Paypal</option>
<option value="MercadoPago">Mercado Pago</option>
</select>
<label>Número de Parcelas</label>
<select class="form-control" id="parcelas" name="parcelas">
<option value="1">1x</option>
<option value="2">2x</option>
</select>
Fiddle = http://kodeweave.sourceforge.net/editor/#d692f9461c022ee386cb2c5329f453c4
I see a few problems with your code.
<input type="radio" name="tipodeconta" id="tipodepagamento" value="Boleto" onClick="boleto();">
<select class="form-control" onClick="fpagamento();validador();" onKeyUp="fpagamento();"
First off you shouldn't use onClick for a radio button, or a select element. use onChange instead which means you won't need to call onKeyUp="fpagamento();"
BTW: your code is very WET. In addition it's bad practice to add a onClick attribute in your html (same goes for other events). Put your javascript in a .js file and edit it there.
var tipodeconta = $('input[name=tipodeconta]'),
cartao = document.querySelector('#tipodepagamento2'),
pagamento = $('#pagamento'),
checkThis = $('.form-control');
tipodeconta.on('change', function() {
if (cartao.checked) {
pagamento.val('MercadoPago');
}
(cartao.checked) ? checkThis.prop('disabled', true) : checkThis.removeAttr('disabled');
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-6">
<label class="radio-inline">
<input type="radio" name="tipodeconta" id="tipodepagamento2" value="Cartão" checked="">
Cartão de Crédito
</label>
</div>
<div class="col-md-6">
<label class="radio-inline">
<input type="radio" name="tipodeconta" id="tipodepagamento" value="Boleto">
Boleto
</label>
</div>
</div>
</div>
<label>Plataforma de Pagamento</label>
<select class="form-control" name="pagamento" id="pagamento" disabled="">
<option value="Selecione">Selecione</option>
<option value="Paypal">Paypal</option>
<option value="MercadoPago">Mercado Pago</option>
</select>
<label>Número de Parcelas</label>
<select class="form-control" id="parcelas" name="parcelas" disabled="">
<option value="1">1x</option>
<option value="2">2x</option>
</select>
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
This is my HTML form structure:
EDIT: Each section is generated by PHP script, and the section id will change depending on user input. I am not able to use the whole selector because of this
<section id="JaneDoe">
<div class="gcolumn1">Jane Doe</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="Y">Yes
<input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
<select id="Meal[]" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
<section id="JohnSmith">
<div class="gcolumn1">JohnSmith</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="Y">Yes
<input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
<select id="Meal[]" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
</section>
I'd like for the dropdown Meal[] to be enabled only after the chk_food[] is selected as yes. However, I am having some trouble figuring out how to tell jQuery to enable only the dropdown box within the same section.
I currently have this as the jQuery: (I added the alert boxes to see which part of the code is not working)
var update_meal = function () {
alert ("Hi");
var sec_id = $(this).closest("section").attr("id");
alert (text(sec_id));
if ($(sec_id + "> #chk_food[]").is(":checked")) {
$(sec_id + "> #Meal[]").prop('disabled', false);
} else {
$(sec_id + "> #Meal[]").prop('disabled', 'disabled');
}
};
$(update_meal);
$("#chk_food[]").change(update_meal);
When I tried to run this on JSFiddle, no bugs show up, but the coding doesn't work at all.
I see the alert box popping up with "Hi" as soon as the document loads
Thank you for your help
You can't have multiple elements on the same page with the same ID. It is invalid HTML and it will confuse your code terribly. To get this to work, you first need to use classes to find things:
<section>
<div class="gcolumn1">JohnSmith</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JohnSmith-chk_food[]" class="chk_food yes" value="Y">Yes
<input type="radio" name="JohnSmith-chk_food[]" class="chk_food no" value="N">No
</div>
<div class="gcolumn3">
<select name="Meal[]" class="meal" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
</section>
Then you can start to target things correctly. Something like this:
$(".chk_food").on("change", function() {
$(this)
.closest("SECTION")
.find("SELECT.meal")
.prop("disabled", $(this).is(".no"));
});
In this case, we bind the change handler on both the Yes and No food radios. The handler will be called for the one the user clicks on, so they are inherently turning that one "on". So we find the parent section, and then the meal select within it, and set its disabled property to true if this is the .yes radio and false if this is the .no radio.
I think that should do it.