Hiding input doesnt work - javascript

<input type="checkbox" name="AvatarfileSelected" value="image"
id="AvatarfileSelected" onclick="$('#extra').hide('slow')"/>
<span style="color:#538f05;">Change Image</span>
<div id="extra">
<input type="file" name="avatarfile" id="avatarfile"></input>
</div>
The above code doesn't work. Could someone show me the mistakes?

You probably didn't include jQuery...
Use vanilla javascript:
onclick="document.getElementById('extra').style.display = 'none'";
Instead of:
onclick="$('#extra').hide('slow')"
(Or include jQuery if you want to use it.)
BTW, <input> doesn't have a closing tag: </input>
Replace:
<input type="file" name="avatarfile" id="avatarfile"></input>
With:
<input type="file" name="avatarfile" id="avatarfile" />

Take out the onclick event from the HTML markup and do it in unobutrusive way. Make sure you bind your event functionalities in document ready event.
Use it like this
$(function(){
$("#AvatarfileSelected").click(function(){
$("#extra").hide();
});
});​
Jsfiddle sample : http://jsfiddle.net/p9tdf/1/

Related

jquery is not working onclick

on click id="check_user" alert is not working .and this is my code.
<html>
<script>
$("#check_user").click(function(){
alert("good");
});
</script>
<body>
<label name="email">Email</label>
<input type="email" id="log_user_email" placeholder="example#example.com" />
<label name="password">Password</label>
<input type="password" id="log_password" placeholder="*********"/>
<input type="button" value="Login" id="check_user" style="cursor:pointer;" />
</body>
</html>
Assuming you have added the jquery library, You need to attach the event when DOM is loaded.i.e. on DOM ready event:
$(function(){//document ready function
$("#check_user").click(function(){
alert("good");
});
});
The jQuery script you've written is inside 'script' tag. Nice !
But the whole script should either be inside 'head' tag or inside 'body' tag. ;) 3:)
use on method for adding event for dynamically element added
and wrap the jquery code inside the $(document).ready() method
$(document).ready(function() {
$("#check_user").on('click', function(evt) {
alert("good");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label name="email">Email</label>
<input type="email" id="log_user_email" placeholder="example#example.com" />
<label name="password">Password</label>
<input type="password" id="log_password" placeholder="*********" />
<button type="button" id="check_user">login</button>
Seeing as how you haven't shown your entire code, and your code appears valid, I can only assume that you have not added the jQuery library before adding that script tag. And you should also wrap your code within the jQuery ready function $(document).ready(); especially seeing that your code appears before the body tag which means the DOM content would not have completely downloaded at the time the script is executed.
In summary, make sure you added included the jQuery library before your script.
Also wrap your code with $(document).ready(); like this:
$(document).ready(function(){
$("#check_user").click(function() {
alert("good");
});
});

JQuery Setting inline attribute in Grand children input type

I'm in ASP.NET MVC. I need to modify an input tag with JQuery to set placeholder="Something"
I have these tags in a form
<div id="searchbox" class="SearchBox SearchInterface state
ComponentState QueryController Debug">
<div>
<input type="text" autocapitalize="off" autocorrect="off"
class="QueryBox" form="dummy-form">
</div>
</div>
I have tried many things such as
$(document).ready(function () {
$("#searchbox > div > input").prop('placeholder', 'Search');
});
But It's always like it can't find the input tag.
What's wrong with that and how I can do that ?
Thanks,
here it is working:
http://fiddle.jshell.net/9dRc8/
Seams you are missing a closing tag for the input or something like this.

How can I upload a new file on click of image button

I have got a task to upload new file from the click of image button.
My code is
<label>File</lable>
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
On the click of this button I want to upload a new file.How can I do this?
You can check my code from
Demo
You could add a hidden file input field, like:
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
<input type="file" id="my_file" style="display: none;" />
And do:
$("input[type='image']").click(function() {
$("input[id='my_file']").click();
});
Demo:: Updated Fiddle
There is no need for javascript just put the <input> and the <img> inside <label> make sure you hide the <input> like so:
<label for="image">
<input type="file" name="image" id="image" style="display:none;"/>
<img src="IMAGE URL"/>
</label>
There is no need for javascript.
Just place both <input type="file"> and <img src=""> inside a label.
Eg:
<label>
<input type="file" style="display:none">
<img src="">
</label>
This will work Just Fine
Demo: https://codepen.io/sandeeprana1001/pen/dyPVvJZ
If you are looking for a cross-browser compatible solution you should check out plupload(http://www.plupload.com) it supports image buttons aswell from what i remember.
you are using the wrong input, use file instead, if you want the button to loke like the circle in your code demo you will need to use CSS to change the way "submit" looks like. This has to be in a form:
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile"/>
<input type="submit" class="circle-btn"/>
<form>
I don't know what language are you using in the server-side (PHP, ASP.NET, etc) but you will need to create a page (for xample "upload_file.php" for php). You can easily find examples in google about how to create a page like that, just copy pasete the code:
An example in PHP: http://www.w3schools.com/php/php_file_upload.asp
Hope it helps :)
You can do this using css.
Please check the 4th answer in this blog.
How can I customize the browse button?
You can use your image as background image of the .button class.
You can also use this in order to access the file that you uploaded since in PHP you can't access the file inside a label.
<input type="file" name="input" id="input" style="display:none;">
<label for="input">
<img src="images/default.jpg" id="image">
</label>
Supplement for DemoUser's answer, add .focus() works for me.
$("input[type='image']").click(function() {
$("input[id='my_file']").focus().click();
});

jQuery Rotate Plugin

I'm using jQuery Rotate plugin to rotate items. It works, but I experienced some problems.
I have that code:
<input type="text" name="np_angle" id="np_angle" size="2" maxlength="4" value="<?=$userinfo->np_angle?>" onchange="$('#np_drag').rotate(this.value)" />
<div id="np_drag" style="color:<?=$userinfo->np_color?>; font-size:<?=$userinfo->np_size?>px;position:absolute;top:<?=$userinfo->np_y?>px;left:<?=$userinfo->np_x?>px" class="draggable np_drag">
<?=$userinfo->np_text?>
</div>
<script>$("#np_drag").rotate(<?=$userinfo->np_angle?>);</script>
The problem is on input onchange. When I change it, #np_drag don't rotate. But when value is static (e.g. onchange="$('#np_drag').rotate(45)"
It works.
Why? How can I solve my problem?
Select it with an id
... id="my-id" onchange="$('#np_drag').rotate($('#my-id).val())" ...
Additionally, you might want to bind the onchange event via the dom-ready function instead of writing it in the HTML source
In the statement $('#np_drag').rotate(this.value), this will refer to np_drag and I believe you want it to refer to the value of np_angle. Try this:
<input type="text" name="np_angle" id="np_angle" size="2" maxlength="4" value="<?=$userinfo->np_angle?>" />
<script>$('#np_angle').bind('change', function(e){$('#np_drag').rotate($('#np_angle').val())});" </script>

Form tips with jquery or other library

This is a form validation for jquery:
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
I need something like that but the tips has to appear when I select the input text form by clicking on it and has to dissapear when I select another input text form.
Is there a way to do this with jquery, mootools, scriptaculus or any other library ?
Thanks ^_^
In jquery, I'd do something like this:
$('input').focus(function(){
$(this).sibling('div.form_tooltip').show();
});
$('input').blur(function(){
$(this).sibling('div.form_tooltip').hide();
});
corresponding html:
<div class="form_input">
<label for="..">label</label>
<input type="text" name="" id="" value="" />
<div class="form_tooltip" style="display: none;">
Here goes the html that appears in the tooltip, you probably want this div to be positioned relatively to the div.form_input.
</div>
</div>

Categories