I have a list of radio buttons on the basis of how many id in the mysql table.
when ever clock on the radio then it shows the div details
for example
radio buttons
<input name="value" type="radio" value="facebook" id="facebook"/> facebook
<input name="value" type="radio" value="google_plus" id="google_plus" /> Google plus
<input name="value" type="radio" value="orkut" id="orkut" /> orkut
divs
<div id="facebook" style="display:none;">
facebook is one of the most popular social networking website
</div>
<div id="google" style="display:none;">
google plus is the new social network
</div>
<div id="orkut" style="display:none;">
Orkut is a socila networking website powered by google
</div>
when select radio, I need to show divs on the base value="" value of the radio button.
the thing is that radio numbers and values will be on the base of mysql data
is there any option to show divs in Jquery ?
if u know help me pls
Hope, this piece of code would be of any help. here is my try to find a solution for your problem :)
$('input:radio').click(function(){
var idVal = $(this).val();
$('div').hide();
$('div[id='+idVal+']').show()
});
please find a working sample here: http://jsfiddle.net/u3AbT/3/
from what it seems like you're asking you want to know how to show a div via jquery?
.show() method
or .css() method example: $('nameOfYourDiv').css('display','block');
$('input[name="value"]').change(function(){
var id = $(this).val();
$('#' + id).show();
});
Related
I am new to web programming and wants to create a link that will expand and collapse a list of information. I was able to do this using radio buttons as shown in the following example bellow.
Instead of using a radio button or a regular button, can you please tell me how can I achieve this same feature using a clickable link. Ex: + More
Please show me with an example if possible.
<script type="text/javascript">
function OnChangeCheckbox1 (checkbox) {
if (checkbox.checked) {
document.getElementById(checkbox.name).style.display = 'none';
document.getElementById(checkbox.id).style.display = 'none';
}
}
function OnChangeCheckbox2 (checkbox) {
if (checkbox.checked) {
document.getElementById(checkbox.name).style.display = 'block';
document.getElementById(checkbox.value).style.display = 'block';
}
}
</script>
* Some Information about X<br>
<label class="radio"><input id="id_clasification2" type="radio" name="moreid1" value="lessid1" onclick="OnChangeCheckbox2 (this)" />+ More</label>
<span style="display:none" id="moreid1" ><label for="id_advisor">First some text<br>First more text</label></span>
<label style="display:none" class="radio" id="lessid1"><input id="lessid1" type="radio" name="moreid1" value="Staff/Faculty" onclick="OnChangeCheckbox1 (this)"/>- Less</label>
<br><br>
* Some Information about Y<br>
<label class="radio"><input id="id_clasification2" type="radio" name="moreid2" value="lessid2" onclick="OnChangeCheckbox2 (this)" > + More</label>
<span style="display:none" id="moreid2" ><label for="id_advisor">Second Some text<br>Second more text</label></span>
<label style="display:none" class="radio" id="lessid2"><input id="lessid2" type="radio" name="moreid2" value="Staff/Faculty" onclick="OnChangeCheckbox1 (this)"/>- Less</label>
<br><br><br>
Aditional Information goes here
Working Code: https://jsfiddle.net/hey4769/owpat8zf/
While it's an idea to use value/name/id attributes, please be aware this does not work for all elements. Also name attribute (at least for some elements) is deprecated in html5.
So I've chosen to use data attributes. And, as I'm spoiled with using jQuery, I decided to test some things in javascript, and included 2 different functions, one using this and another passing the event.
For selecting the elements to show/hide I've used document.querySelector, which works like a css selector.
I'm also changing the text on the a element after clicking it. Last I've added some console logs. Hope it's useful!
https://jsfiddle.net/hamu21gj/
you can you href to add your javascript like this:
href="javascript:MyFunction"
I changed your code a little bit just to make an example.
https://jsfiddle.net/owpat8zf/3/
code: http://jsfiddle.net/HB8h9/7/
<div id="tab-2" class="tab-content">
<label for="tfq" title="Enter a true or false question">
Enter a Multiple Choice Question
</label> <br />
<textarea name="tfq" rows="3" cols="50"></textarea>
<p>Mark the correct answer</p>
<input type="radio" name="multians" value="A">A)</input>
<input name="Avalue" type="text">
<br>
<input type="radio" name="multians" value="B">B)</input>
<input name="Bvalue" type="text">
<br>
<input type="radio" name="multians" value="C">C)</input>
<input name="Cvalue" type="text">
<br>
<input type="radio" name="multians" value="D">D)</input>
<input name="Dvalue" type="text">
<br>
//different file below used as main page
$(document).ready(function() {
$("#second li ").click(function() {
$("#content").load("file_above.html .tabs");
});
});
trying to create a quiz using div elements from different file containing select option tags. Need to create a function which will load all the "appropriate div tags" according to the selected option and display the dropdown options again after each option has been selected. I'm not sure when to implement submit button either after each question type is loaded or somewhere between 5 - 10 questions. the submit button will "store" the questions selected into a quiz which will later be used for another user to answer.
I hope this makes sense, I'm not too familiar with jquery and any help would be highly appreciated.
Any other techniques which would be better suited are also welcomed.
thanks.
You must set an id to select element and hadle onChange event over this.
Somehting like:
$(document).ready(function(){
$('#selectionId').onChange(function(){
/*load new options into select element*/
$(this).append('option data-tab="tab-6">New option text</option>');
/*displaying desired div. Using HTML5 data attributes as in the fiddle*/
var selected=$(this).attr('data-tab');
if (selected==='tab-1'){
/*load or display tab-1 class div*/
}else...
});
});
You can have various html files with only the corresponding tab to load or in the same file you are defined the select element you can have the tab class divs with visibility attribute set to 'none' and show the targeted div after user selects an option.
Personally, I preferred the last one option.
I hope this fixes your problem
http://jsfiddle.net/r9sv8/
Use the .change() to listen to the options selected and display the div respect to it.
$('.tabs').change(function(){
$('.tabQues').hide('500'); // Hides all the divs
var changeVal = $(this).val(); //Takes the value of the <option>
if(changeVal=="selectOne"){
$('.'+changeVal).show('500'); //show the div you want
}else if(changeVal=="multiple"){
$('.'+changeVal).show('500');
}else if(changeVal=="trueFalse"){
$('.'+changeVal).show('500');
}else if(changeVal=="short"){
$('.'+changeVal).show('500');
}else if(changeVal=="program"){
$('.'+changeVal).show('500');
}else{
$('.tabQues').hide();
}
I am using a form builder with field IDs in Wordpress. I need to uncheck a specific checkbox if a specific radio button selection is changed. The radio button's field ID is 180. The checkbox's field ID is 640. Here's what I tried first:
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[180]"]').change(function(){
$('input[name="item_meta[640]"]').val('');
})
})
</script>
Note that this script was originally written to change the value of a dropdown, not a menu. The only change I made to the code was changing "select" to "input" on line 3.
I've also tried changing
.val('');
to
.attr('checked', false);
and also to
.removeAttr('checked');
None of these work. The checkbox remains checked when the radio button is changed. Does anyone have any ideas? Thanks in advance!
UPDATE: Here are the two relevant form fields in HTML:
<div id="frm_field_180_container" class="frm_form_field form-field frm_required_field frm_top_container">
<label class="frm_primary_label">Pricing Categories
<span class="frm_required">*</span>
</label>
<div class="frm_description">Select your meta-category then locate your entry fee in the subsequent dropdown.</div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-0" value="Independent Film & Videos" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-0">Independent Film & Videos</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-1" value="Film / Video for TV & Cable Production" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-1">Film / Video for TV & Cable Production</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-2" value="TV Ads, PSAs, Screenplays, New Media, Websites, etc." class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-2">TV Ads, PSAs, Screenplays, New Media, Websites, etc.</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-3" value="Student Entry of Any Category (with 2 Additional Categories Free) - $45" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-3">Student Entry of Any Category (with 2 Additional Categories Free) - $45</label></div>
</div>
and
<div id="frm_field_640_container" class="frm_form_field form-field frm_top_container frm_last_third">
<label class="frm_primary_label">Apply Early-Bird Discount
<span class="frm_required"></span>
</label>
<div class="frm_opt_container"><div class="frm_checkbox" id="frm_checkbox_640-0"><input type="checkbox" name="item_meta[640][]" id="field_640-0" value="5" /><label for="field_640-0">1-3 Categories: $5</label></div>
</div>
The following approach appears to work:
$('input[name="item_meta\\[180\\]"]').change(function(){
$('input[name="item_meta\\[640\\]\\[\\]"]').prop('checked',false);
});
JS Fiddle demo.
Note that I removed the onclick (since they weren't defined, their absence generated errors, and if you're using jQuery why are you even using in-line event-handlers?). Also, the escaping of the square-brackets (using the \\ characters).
References:
prop().
You've got a mismatch for the name of the checkbox, between your HTML and your JQuery . . .
HTML
<input type="checkbox" name="item_meta[640][]" id="field_640-0" value="5" />
Here, the name attribute is item_meta[640][].
JS
$('input[name="item_meta[640]"]').val('');
Here, the name attribute is item_meta[640].
Because of that, the selector is not matching the checkbox. If you update you JQuery selector to $('input[name="item_meta[640][]"]'), it should work fine.
As noted by Dave Thomas, you are better going with .prop('checked', false); to uncheck the box.
i made 3 buttons in jquery mobile lets say (coffee, cola, water) grouped horizontally, I want them to behave like when I click one of them (coffee) the clicked button will change its appearance to clicked state and I wont be able to click it again (take note that when I disable a button it changes its color to gray also). then when i click cola, coffee returns to normal and cola turns to clicked state.
<div id="ui-26">
<div class="ui-segment" data-role="controlgroup" data-type="horizontal" >
<input type="button" name="segment-coffee" id="segment-coffee" class="custom" value="coffee" />
<input type="button" name="segment-cola" id="segment-cola" class="custom" value="cola" />
<input type="button" name="segment-water" id="segment-water" class="custom" value="water" />
</div>
</div>
i tried using the radio button but i cant assign a background image on it so i decided to use grouped buttons. how should this be done on jquery? thanks in advance!
I think http://jsfiddle.net/rcNfJ/2/ is what you are looking for? I just used attr("disabled") but you can do whatever you want to them (change their css, manipulate data, etc).
http://jqueryui.com/demos/button/#radio
I think this is what you are searching for :)
You can use icons option to set icons for them.
EDIT:
Here is alternative solution then :)
$(function() {
$('#ui-26 > .ui-segment > input').click(function(){
if($(this).is(':disabled')) return;
$('#ui-26 > .ui-segment > input').prop('disabled',false);
$(this).prop('disabled',true);
});
});
I'm struggling to find a solution for this anywhere on Google, maybe i'm searching incorrectly but thought I would come and ask the ever trustworthy members of StackOverflow.
I'm wanting to use an html button to check an html check box. There reason I don't want to use the check box will be purely for accessibility reasons because the application i'm developing will be on a terminal and used as via a touch-screen so an HTML check box is too small.
The only issue is that the list of check box's is dynamic as it is populated using an SQL query. Obviously however I can do the same for creating HTML buttons.
Im guessing it will require JavaScript (which I'm perfectly happy using now as I'm finding a lot of the functionality I need in this application needs JavaScript) to do this functionality.
So to clarify: I want to click on a button, say it has a value of "Fin Rot" and that checks the check box with the value "Fin Rot". And then if I clicked another button, say it has a value of "Ich" then it also checks the check box with the value "Ich"
While you can use a button and JavaScript for this, might I suggest a much simpler approach? Just use a <label> that's designed just for this, and style it like a button, for example:
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<label for="finRot">Some text here, could be "Fin Rot"</label>
or (if you don't want to use id on checkbox and for on label):
<label>
<input type="checkbox" name="something" value="Fin Rot">
Some text here, could be "Fin Rot"
</label>
....then with CSS you can hide the checkbox if needed, but either are clickable to toggle the checkbox.
You can test out a demo here, also showing some button-ish CSS on the label if needed.
This example uses a button to toggle the checkbox on/off.
http://jsfiddle.net/DnEL3/
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<button onclick="document.getElementById('finRot').checked=!document.getElementById('finRot').checked;">Fin Rot</button>
How about a HTML solution.
<p><input type="checkbox"
value="Another check box"
name="cboxwithlabel" id="idbox"><label
for="idbox">Another
checkbox</label></p>
<label> Creates label for the checkbox or radio buttons.
If you are looking for bootstrap solution, I just created this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Here starts the component -->
<label class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="form-control btn btn-primary">
Click to toggle checkbox
</span>
</label>
<!-- Here ends the component -->
</div>
</div>
</div>