hey i would like to show an table when user fills an input.
What I have is:
in <head> section:
<script type="text/javascript">
//hide initially
$("table#mytable").hide();
// show function
function showit() {
$("table#mytable").show();
}
</script>
and the table:
<table id="mytable"><tr><td>FOO</td><td>BAR</td></tr></table>
and a form below(maybe it is important) the table:
<form action="foobar.php">
<input name="example" onselect="showit()" />
<input type="submit" value="Send" />
</form>
I think onselect isn't perfect but it should do the thing in my case.
The code above doesn't hide the table at all. I don't know what I did wrong. Hope some1 can find a mistake - thank you.
EDIT
here is the solution:
head:
<script type="text/javascript">
function show(id) {
document.getElementById(id).style.display = 'block';
}
</script>
and in every element to hide just add style="display: none;" and edit input - add onkeyup="show('id') where id is id of element to hide e.g. #mytable
The reason it isn't working is because you are calling the javascript before the table element is rendered. There are three ways of doing this:
// Use CSS (best):
<table style="display:none;" id="mytable">...</table>
or
// Using DOM Load event (wait for all of the elements to render) (second best)
$(function() { $("table#mytable").hide(); });
or
// Put your javascript at the bottom of the page instead of the head. (not preferred)
Check out the fiddle I've created for you - http://jsfiddle.net/ggJSg/
Basically there are two problems:
You need to call $("#mytable").hide(); only when DOM is ready
Use proper event (like focus in my example) to trigger table display
you can also use onkeyup and document ready might help
$(document).ready(function() {
$("#mytable").hide();
$("#example").keyup(function (e) {
$("#mytable").show();
})
});
jfidle http://jsfiddle.net/dznej/
You need to use the .ready() function to execute the code when the DOM has finished loading. Then you should use the .change() function to display it:
$(document).ready(function () {
// Hide initially
$('#mytable').hide();
// When something changes in the input named `example` then show the table.
$("[name='example']").change(function() {
$('#mytable').show();
});
});
Related
I have a file input element
<input type="file" id="fileid">
How do I call a JavaScript function after selecting a file from the dialog window and closing it?
jQuery("input#fileid").change(function () {
alert(jQuery(this).val())
});
<script>
function example(){
alert('success');
}
</script>
<input type="file" id="field" onchange="example()" >
<input type="file" id="fileid" >
the change will function when you put script below the input
<script type="text/javascript">
$(document).ready(function(){
$("#fileid").on('change',function(){
//do whatever you want
});
});
</script>
This tested code helps you:
$("body").on('change', 'input#fileid',function(){
alert($(this).val());});
Try declaring on the top of your file:
<script type="text/javascript">
// this allows jquery to be called along with scriptaculous and YUI without any conflicts
// the only difference is all jquery functions should be called with $jQ instead of $
// e.g. $jQ('#div_id').stuff instead of $('#div_id').stuff
$jQ = jQuery.noConflict();
</script>
then:
<script language="javascript">
$jQ(document).ready(function (){
jQuery("input#fileid").change(function () {
alert(jQuery(this).val());
});
});
(you can put both in the same <script> tag, but you could just declare the first part in you parent layout for example, and use $jQ whenever you use jQuery in you child layouts, very useful when working with RoR for example)
as mentioned in the comments in another answer, this will fire only AFTER you select a file and click open. If you just click "Choose file" and don't select anything it won't work
I think your purpose is achievable, but AFAIK no such event like that.
But to achieve that you need cooperate with 3 event,
i assume you just need to know about the file name.
I created walk around here
Firstly the change event just fired when actual change happen, selecting same file won't trigger change event so do opening dialog and cancel it.
Then clicking choose file the input element will gain focus, when pop up file dialog opened input element losing the focus.
When pop up file dialog closed, input element will regaining it focus.
So you might run client side validation on client side when the input element losing it focus 'again'.
I'm trying to create a simple form where i can add more text field after current text field.
And also i can add more field from the new field that ive added before (im using Recursion for this).
Problems come when i click the add on the first field, it creates more then 1 new fields (this happens because of recursion)
how do i refresh javascripts function without calling it again and again?
HTML :
<div class="line-input">
<input type='text' class='ipt-txt'>
<input type='submit' class='btn-smt' value="add new">
</div>
JS :
$(document).ready(function(){
callFunction();
});
function callFunction(){
$(".btn-smt").click(function(e){
$(this).parent(".line-input").clone().insertAfter($(this).parent(".line-input"));
callFunction();
});
};
JSFiddle : https://jsfiddle.net/1uofya3k/
Thanks!
Use event delegation:
$(function() {
$(document).on("click", ".btn-smt", function(e) {
$(this).parent(".line-input").clone().insertAfter($(this).parent(".line-input"));
});
});
That sets up an event handler at the document level that responds to clicks on your button class. You only have to add it once, and it'll work for all subsequent elements that are added dynamically.
(You don't really even have to do it in a "ready" handler; you can set it up before the DOM has been completed.)
Add true to the clone() function. From the jQuery API:
withDataAndEvents (default: false) Type: Boolean A Boolean indicating
whether event handlers should be copied along with the elements. As of
jQuery 1.4, element data will be copied as well.
https://api.jquery.com/clone/
$(document).ready(function() {
callFunction();
});
function callFunction() {
$(".btn-smt").click(function(e) {
e.stopPropagation();
$(this).parent(".line-input").clone(true).insertAfter($(this).parent(".line-input"));
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="line-input">
<input type='text' class='ipt-txt'>
<input type='submit' class='btn-smt' value="add new">
</div>
Im using a plugin (Event Organiser Pro) that dynamically creates a div based on the input of a number field - basically it creates a duplicates the form fields depending on the number you enter in the input field.
I need to run some jQuery which is based on those form fields, but obviously cant run it until the div has been created.
How can i run the script once the div has been created? Is it possible to run script when div id has been created? Or something similar?
Yes, you can delegate the DOMNodeInserted event to the body.
function createDiv() {
$('<div />').addClass('test').appendTo($('body'));
}
$('body').on('DOMNodeInserted', '.test',function() {
alert('Created element .test');
})
$("button").on('click', function() {
createDiv();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Create</button>
In the example above the click on the button simulates your other script creating the div.
To rewrite the code to work with your setup you can strip the click part out and delegate the event listener to your id:
$('body').on('DOMNodeInserted', '#your_element',function() {
yourFunction();
// call a function here or add your code here directly
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note: This example won't work here because the element with that ID does not exist and neither does the yourFunction() function.
I have a simple script that alerts the user what he or she typed in a search box. Im using Jquery to get the value of the input field when the user clicks the search button. Nothing is appearing though when I click the search button.
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$('#searchButton').click(function() {
alert($('#youtubeSearch').val());
});
</script>
I just need an alert box to appear with the value, how do I do this?
Wrap your code inside the .ready handler. You cannot manipulate dom elements before it got ready.
Try this,
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$('#searchButton').click(function() {
alert($('#youtubeSearch').val());
});
});
</script>
DEMO
well.. you need to make sure the element is loaded , before you attach any events to it (click in your case) .. so for that you either have to enclose you code inside document.ready function
<script>
$(function(){
$('#searchButton').click(function() {
alert($('#youtubeSearch').val());
});
});
</script>
or add your script at the end of your HTML just to make user you DOM is ready..
i am a bit new to using jquery, the following should display a button, and when someone clicks the button, the font size of that button should change.
Unfortunately, the button does not change its font size, for reasons i am not sure of.
Edit:
this example is the same one as before with adjustments, it works but it will only change font, once the mouse has left the button's area or if the button has be double clicked.
The font should change on only 1 click.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".button0").click(function() {
$('.button0').css('font-size', '43px');
});
});
</script>
<style type="text/css">
.button0{
position:fixed;
left:48px;
top:55px;
font-family:Arial;
font-size:8px;
font-weight:normal;
}
</style>
<body>
<div name="button0"><input class="button0" type="button" style="width: 148px;height: 72px;" value="Button"/></div>
</body>
</html>
By the time .click is called, the DOM hasn't fully loaded. You should wrap it in a DOM ready function.
$(function() {
$(".button0").click(function() {
$('.button0').css('font-size', '43px');
});
});
Also noted its not a div.
You have to make sure the document is ready—as in, all elements have loaded—before making modifications.
Wrap everything in this function:
$(document).ready(function(){
// your code here
});
Besides that, your selector is looking for a div element with a class of button0 when you're trying to modify an input element. Modify your selector to say input.button0.
Also, jQuery has a $(this) selector which selects the current element. In your case it will select the clicked input.
And finally, since you're using jQuery 1.7.1, I'll introduce you to on(). It's generally recommended to delegate events using this function. Instead of $(div).click(), use this:
$(document).on("click", "input.button0", function(){
$(this).css("font-size", "43px");
});
More about on() here.
Why are you using div.button0. The element isn't a div. try just .button0.
That is because the javascript is executed as soon as it is encountered; so it is executed before the button is rendered.
Change the order and it'll work.
<input class="button0" type="button" style="width: 148px;height: 72px;" value="Button"/>
<script type="text/javascript">
$(".button0").click(function() {
$('.button0').css('font-size', '43px');
});
</script>
jQuery also includes a domready event for this, which means the javascript will be parsed before the button but will only be executed when the button is there. This way, you can still put the javascript in the head, if you'd really want to. To do this, just wrap the existing code in
$(function() {
/*code*/
});
Need to properly fire off the event for attaching .click()
<script type="text/javascript">
$(document).ready(function() {
$(".button0").click(function() {
$(this).css('font-size', '43px');
});
});
</script>
Note the class name .button0 as it is NOT in a DIV as you previously used.
use it like this
$(document).ready(function(){
$("div.button0").click(function() {
$(this).css('font-size', '43px');
});
});