I've got two input fields that each dynamically generate a small image with a red cross when they are filled with text. The idea is that the user can clear the text by clicking on that image. The javascript code is exactly the same with the only difference being the alt value of the image and the name attribute of the input box.
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script>
$( document ).ready(function() {
$("input[type='text']").keyup(function(){
var alt = "clear"+$(this).attr("name");
if($(this).val() && !$("img[alt='"+alt+"']").length){
$(this).after("<img src='images/cross.png' alt='"+alt+"'/>");
}
});
$(document).on('click', 'img[alt="clearsource"]' , function(){
$( "input[name='source']" ).val('');
$(this).remove();
});
$(document).on('click', 'img[alt="clearlocation"]' , function(){
$( "input[name='location']" ).val('');
$(this).remove();
});
});
</script>
</head>
<body>
<form>
<input type="text" name="source" placeholder="Source" /><br />
<input type="text" name="location" placeholder="Location" />
</form>
</body>
</html>
I wanted to make a reusable function through which I can pass two variables, and then call it twice. This is my attempt but it's not working. Can someone please help? Is it a scope issue?
Here is the JSFiddle version: https://jsfiddle.net/2bk86w4y/
<script>
$( document ).ready(function() {
$("input[type='text']").keyup(function(){
var alt = "clear"+$(this).attr("name");
if($(this).val() && !$("img[alt='"+alt+"']").length){
$(this).after("<img src='images/cross.png' alt='"+alt+"'/>");
}
});
// == The function below replaces the duplicate functions in the previous code block.
// == Unfortunately it doesn't work. Please help :(
function clearBox(inputname,imagealt){
$(document).on("click", "img[alt='"+imagealt+"']" , function(){
$( "input[name='"+inputname+"']" ).val('');
$(this).remove();
});
}
clearBox("clearsource","source");
clearBox("clearlocation","location");
});
</script>
Many thanks in advance!
You've got your parameters the wrong way round.
https://jsfiddle.net/daveSalomon/2bk86w4y/1/
clearBox("clearsource", "source");
clearBox("clearlocation", "location");
// should be...
clearBox("source", "clearsource");
clearBox("location", "clearlocation");
Related
I have a button on my HTML document as listed below
<input type = "submit" value = "Manuals and Coaching Tools" class = "col-sm-1" style="white-space:normal;" id = "mac">
And I have this block of jQuery at the bottom of the document. It is supposed to fade in the div with the id "gold" when the button is clicked.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeIn('slow');
});
});
</script>
However the code does not seem to work/trigger and nothing happens. Any suggestions to why this is happening is greatly appreciated.
Note: display: none is applied to the "gold" div in css, but I want the div to fade in once the button is clicked.
Split up your script tags:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeOut('slow');
});
});
</script>
Edit: JSFiddle
Here is working example:
$(document).ready(function () {
$("#mac").click("input", function(){
$('#gold').fadeOut('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "submit" id = "mac"value = "Manuals and Coaching Tools" class = "col-sm-1" style="white-space:normal;">
<div id="gold">Some content</div>
Change your javascript like this.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeOut('slow');
});
});
</script>
If your div#gold is display:none;
you need to update your jQuqery to fadeIn("slow")
$('#mac').click(function(){
$('#gold').fadeIn('slow');
})
try this
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type = "submit" value = "button" class = "col-sm-1" style="white- space:normal;" id = "mac">
<div id="gold" style="display:none">
hello
</div>
<script>
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeIn('slow')
});
});
</script>
When I press a button, my table is suppose to be replaced by a video but when I click the button, my table disappears and my video won't show up. Is there something wrong with my code?
<script>
var checkContent = 0;
function contentChange(){
if(checkContent == 0){
$('#tableContent').addClass("hiddenContent");
$('#videoContent').removeClass("hiddenContent");
checkContent++;
}else{
$('#tableContent').removeClass("hiddenContent");
$('#videoContent').addClass("hiddenContent");
checkContent--;
}
}
</script>
Something like this?
HTML:
<button>Click</button>
<table id="tableContent"><tr><td>Table Content</td></tr></table>
<div id="videoContent" class="hiddenContent">Video Content</div>
JavaScript:
$( "button" ).click(function() {
$( '#tableContent' ).toggleClass( "hiddenContent" );
$( '#videoContent' ).toggleClass( "visiblecontent" );
});
CSS:
.hiddenContent{ display:none;}
.visiblecontent{ display: block; }
Fiddle here.
Simple, but I don't know it is good for you.
HTML:
<input type="button" id="btn" value="Click Me"></input>
<div id="someContent" hidden>Some Content</div>
<div id="videoContent">Video Content</div>
JS:
document.getElementById("btn").onclick = function(){
var someContent = document.getElementById("someContent");
var videoContent = document.getElementById("videoContent");
if(someContent.hasAttribute("hidden")){
someContent.removeAttribute("hidden");
videoContent.setAttribute("hidden", "");
}
else{
videoContent.removeAttribute("hidden");
someContent.setAttribute("hidden", "");
}
}
Try this if any good for you:
http://jsfiddle.net/bigneo/40vLxLnm/
You may want to check the console in the browser (CTRL + SHIFT + J).
Also remove the
`enter code here`
if you didn't put it there on purpose.
If that still doesn't work you probably have an error in either your CSS or your HTML code.
i would like my id to shake when a user clicks it, how can i achieve that? I am a beginner in jquery and am currently finishing up php, I am going to study jquery next.example:https://twitter.com/signup
this is my html:
<input id="sub" type="submit" value="Sign Up">
and this is my js:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$( document ).click(function() {
$( "#sub" ).effect( "shake",{distance:100} );
});
</script>
also if i wanted to implement times and direction would i do this?:
$( "#sub" ).effect( "shake",{direction:right},{distance:100},{times:6} );
Try this out:- http://jsfiddle.net/adiioo7/kx8q8/2/
Use #sub instead of document on click.
jQuery(function ($) {
$("#sub").click(function () {
$(this).effect("shake", {
direction: 'right'
}, {
distance: 100
}, {
times: 6
});
});
});
JSBIN: http://jsbin.com/uGAMulOL/3/
Add the # for the sub id element and put right in quotes. Also the options should be fixed in the object literal.
$("#sub").click(function() {
$(this).effect("shake",{direction:'right',distance:100,times:6000});
});
how do i use a html check box to toggle two different links in a html button?
(IE) a button contains two links. with the use of a check box, if set to true, on click of button should go to xyz site and when check box false, on click of same button should go to abc site ?
Please help as i am new to j query. using this on a share point site.
This may help you,
$('button').on('click',function(){
var url=$('input:checked').length ? 'abc.com' : 'xyz.com';
alert(url);// use window.location.href=url; to open that url
});
Try Demo
On checkbox change switch link href:
HTML
<input type="checkbox">
<a href="#" data-url1='lala' data-url2='lolo'>button</a>
JQUERY
$(function(){
$('a').attr('href',$('a').data('url1'));
$('input').on('change',function(){
if($(this).is(':checked')){
$('a').attr('href',$('a').data('url2'));
}else{
$('a').attr('href',$('a').data('url1'));
}
})
})
This is the proper code try and run it in your browser, you can even try this in jsfiddle
Two concepts here used is how to check the checkbox checked or not in jquery, there are many ways i illustrate the one way by using is(':checked')
and other is binding the click event of a button, which is quite simple. I hope you like it.
<html>
<head>
<title></title>
</head>
<body>
<input type="checkbox" id="myCheckbox" />
<button id="myButton">Click</button>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myButton').click(function(){
if($('#myCheckbox').is(':checked')){
window.location.href = "http://www.google.co.in";
}else{
window.location.href = "http://jforjs.com";
}
})
})
</script>
</body>
</html>
Demo
HTML
<input id="choice" name="choice" type="checkbox" data-yes="http://www.xyz.com" data-no="http://www.abc.com"/>
<button id="submit">submit</button>
jQuery
$('#submit').on('click',function(){
var url ='';
if($('#choice').is(':checked')){
url = $('#choice').data('yes');
}
else{
url = $('#choice').data('no');
}
alert(url);
//Uncomment below for redirecting automatically to the desired url
//location.href = url;
});
I want to use Jquery Attr.Radio Button click and write to #RadioDesc id's div...
<input type="radio" desc="sample description" class="AddText">
<script type="text/javascript">
$( document ).ready( function() {
$("radio").click( function() {
$("#RadioDesc").attr("desc");
});
});
</script>
<div id="RadioDesc"></div>
These codes not work...Please help me solutions...
your selector is invalid, change:
$("radio").click(function(){
to
$( document ).ready( function() {
$(":radio").click( function() {
//add to html
$("#RadioDesc").html($(this).attr("desc"));
});
});
Html:
<input type="radio" desc="sample description" class="AddText">
<div id="RadioDesc"></div>
Js:
$(document).ready(function() {
$("input[type=radio]").click(function(){
$("#RadioDesc").text($(this).attr("desc"));
});});
Working Fiddle
The radio selector is :radio
$(document).ready(function () {
$(":radio").click(function () {
$("#RadioDesc").html($(this).attr('src'));
});
});
Your selector isn't targeting the radio, its targeting an element radio
try this:
$('input[type=radio]')
You should change div's html to radio's attribute value
<input type="radio" desc="sample description" class="AddText">
<div id="RadioDesc"></div>
<script type="text/javascript">
$( document ).ready( function() {
$("input:radio").click( function() {
$("#RadioDesc").html( $(this).attr("desc") );
});
});
</script>