<script type="text/javascript">
$(function(){
$('input.check1').click(function(){
$('#show1').show();$('#show2').hide();
});
$('input.check2').click(function(){
$('#show2').show();$('#show1').hide();
});
});
</script>
This is the Javascript code that I'm trying to use in one of my Wordpress 7.1 pages to show and hide a 'div' part that contains a table, using radio buttons. Below is code for the radio button:
<input type="radio" name="chec" class="check1" checked="checked">Option 1
<input type="radio" name="chec" class="check2">Option 2
But it is not working. I don't know what to do, maybe the Javascript is not triggering?
Try this
<script type="text/javascript">
jQuery(function(){
$('.check1').click(function(){
$('#show1').show();
$('#show2').hide();
});
$('.check2').click(function(){
$('#show2').show();
$('#show1').hide();
});
});
</script>
Also make sure you have the script source in your header.
replace all '$' sign by 'jQuery'
As wordpress by default uses jQuery=noconflict
Related
I have a tiny issue if anybody can help... I am trying to implement a form, so when the page loads the textbox is disabled. If the user wishes to amend information they first have to press a button which will enable the text box.
<input id="text" type="text" disabled="disabled">
<br />
<button>Enable</button
So I have a basic textbox which is disabled. Then an event that should enable the textbox...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#text").attr("disabled","false");
});
});
</script>
I can get this working when the textbox is not initially disabled and I want to disable it, though I can not get it working the other way round - when it is disabled and I want to enable it.
Can anyone point me in the right direction?
Hi i have created a jsfiddle for you see the working example...
you should use removeAttr instead of attr
code:-
$(document).ready(function(){
$("button").click(function(){
$("#text").removeAttr("disabled");
});
});
link:-http://jsfiddle.net/L7S37/15/
You are giving boolean value as String
Use this
$("#text").attr("disabled",false);
instead of
$("#text").attr("disabled","false");
DEMO
Or you can use this, Even the last answer by Mr Soni is correct.
$(document).ready(function(){
$("button").click(function(){
$("#text").prop('disabled', false);
});
});
I really don't get why my check-box being clicked doesn't prompt my JS as well. I'll write the code and explain a little more in depth what's happening.
Here's my header (in-case I'm linking the wrong files):
<head>
<link rel='stylesheet' href='reset.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel='stylesheet' href='Vector Add.css'/>
<script src='Vector Add.js'></script>
</head>
Here's the checkbox itself:
<div id='gridButton'>
<form>
<input type="checkbox" id="gridCheck" value="showGrid"> Show Grid
</form>
</div>
Here's the first line of code for the table (The table is large and there's really no value in linking all that extra code):
<table id="gridTable" style="position:absolute">
Here's the JS:
$(document).ready(function(){
if($('#gridCheck').is(':checked')===true){
$('#gridTable').show('fast');
} else {
$('#gridTable').hide('fast');
};
});
Essentially I have this graph and I want the user to be able to generate a grid whenever they click the "Show Grid" check-box and for it to go away when the check-box isn't selected. But for some reason it's not working. There are no errors but when I bring up the dev tool it's showing that the JS isn't realizing whether or not the buttons being clicked. I don't know what to do as I've been grappling with this for the past couple hours and nothing seems to work. Please help out! Thanks in advance!
You need to bind the click event to the checkbox so it is triggered on every check on and off.
$(document).ready(function(){
$('#gridCheck').on('click', function(){
if ($(this).is(':checked')){
$('#gridTable').show('fast');
} else {
$('#gridTable').hide('fast');
}
});
});
Why watch clicks when you can watch change?
$(document).ready(function(){
$('#gridCheck').on('change', function(){
$('#gridTable').fadeToggle("fast");
});
});
First, default the checkbox to be CHECKED if the grid will be displayed on page load:
<input type="checkbox" id="gridCheck" value="showGrid" checked/> Show Grid
I am fetching data from database using jquery in search bar as user enter some character in it will fetch data from database the search is working perfectly but it disable my drop down menus on the top and when i remove jquery-1.8.2.min.js from the page the search module stop working and drop down menus start working . i have tried jquery-2.1.0.min.js but did not get the result.Here is my coding.please help me out.
<form action="view_cat.php" method="post" >
<input type="text" name="search" class="autosuggest" >
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/javascrip.js"></script>
<script>
$(document).ready(function() {
$('.autosuggest').keyup(function() {
var search_term=$(this).attr('value');
$.post('search.php', {search_term:search_term},function(data){
$('.result').html(data);
$('.result li').click(function(){
var result_value=$(this).text();
$('.autosuggest').attr('value', result_value);
$('.result').html('');
});
});
});
});
</script>
</body>
</html>
The drop down menus script.
<script>
$(function () {
var example = $('#sf-menu').superfish({
delay: 400,
animation: {opacity:'show',height:'show'},
speed: 'fast',
autoArrows: false
});
});
</script>
Please suggest me some Alternative path.
if you are using template than for sure I can say there should be another jquery file which are conflicting with each other please check out the file if you have another jquery file remove it and as far I am seeing your calling your jquery above the body so remove the jquery script from the bottom and put in the head section will work fine I hope.
I have a problem with javascript. I have downloaded a rating star plugin , this one to be exact: http://www.fyneworks.com/jquery/star-rating/#tab-Testing
I have multiple things to rate on one page, so i thought i could use an onclick to send it to a function, that sends it to my database with ajax. The problem is, when a rating star is clicked nothing happens, ive tried it on a regular submit button and the function gets executed.
Here is the code :
<script type="text/javascript">
function postform(){
alert('Thing is clicked');
};
</script>
And the star is actually a radio button:
<input name="adv1" type="radio" class="star {split:4}" value="0.50" onclick="postform()"/>
I can't see what is wrong with the code, because when i test it on a regular button like this :
<input type="submit" value="testbutton" onclick="postform()"/>
It gives me the alert Thing is Clicked.
Somehow the star doesn't like the onclick stuff..
Ive tested it in IE, Chrome and FF, nothing ever happens
could someone help me out here?
Thanks alot!
Edit:
As requested by Lukas , i have this in my head :
<script type='text/javascript' src='jquery.min.js'></script>
<script src='jquery.MetaData.js' type="text/javascript"></script>
<script src='jquery.rating.js' type="text/javascript"></script>
That library is handling the onclick event of the radio button for you, so you cannot handle it by adding an attribute onclick to the input element.
According to their documentation you need to put some code like this in a script:
$('.auto-submit-star').rating({
callback: function(value, link){
alert(value);
}
});
Then add the class auto-submit-star to the class list of your radio button:
<input name="adv1" type="radio" class="auto-submit-star {split:4}" value="0.50" onclick="postform()"/>
I am using the following code to make a custom checkbox with my own images and it works but it's using a Checkbox and I need to use Radio buttons.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#moreinfo").change(function() {
if(this.checked) {
$(this).prev().attr("src", "checkbox_unchecked.gif");
} else {
$(this).prev().attr("src", "checkbox_checked.gif");
}
});
});
</script>
Next...here's the HTML:
<label for="moreinfo">
<img src="checkbox_unchecked.gif"/>
<input name="moreinfo" type="checkbox" id="moreinfo" style="display:none">
</label>
If it a question of changing from checkbox to radio type or does the jquery need changing too?
How do I go about this?
Change the type="checkbox" to type="radio" (and add some more radio buttons for testing, grouping them via the name attribute, they may not have the same id as IDs are unique!). Then, you also need to handle the click event of the replacement images.
But actually, that's going beyond your original question, which you could have solved by simply trying it out. ;)
A Radio Button uses also the attribute checked. So you can switch the element without changing the script (perhaps the gifs).
But your script will never run, because your checkbox/radio button is not displayed.
So you need some functionality to change the status when clicking the image.