I have a text input with an id of auto_change_date and i am trying to hide it on page load using:
$(document).ready(function(){
$("#auto_change_date").hide();
});
but its just not hiding it
i am then using this code to make it display (.show) when a select option is selected:
<script type="text/javascript">
$('#status').on('change',function(){
if( $(this).val()==="Auto Change"){
$("#auto_change_date").show()
}
else{
$("#auto_change_date").hide()
}
});
</script>
<input type="text" name="auto_change_date" onclick="ds_sh(this);" />
you are missing here id
put it as follows
<input type="text" name="auto_change_date" id="auto_change_date" onclick="ds_sh(this);" />
now your jquery will work fine
See Fiddle
Nothing is wrong with Your jQuery. But I would suggest you to use Pure CSS
<style>
#auto_change_date {
display:none;
}
</style>
OR, Simple JavaScript
document.getElementById('auto_change_date').style.display = 'none';
Add html input type = "text" with id = "auto_change_date"
<input type="text" id="auto_change_date" />
Now add following javascript function:
$(document).ready(function(){
$("#auto_change_date").hide();
});
Its Working fine for me.
With vanilla Javascript
var input = document.getElementById('auto_change_date');
input.style.display = 'none';
or
input.style.visibility = 'hidden';
<style>
.hidden{
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#auto_change_date').addClass('hidden');
$("#auto_change_date").hide();
});
</script>
the div should be made display:none at first inorder to apply this
You are not defining id to element and you should add jquery js to work this.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Html :
<input type="text" id="auto_change_date" name="auto_change_date" onclick="ds_sh(this);" />
simply try something like this
<input type="text" id="auto_change_date" name="auto_change_date" onclick="ds_sh(this);" />
your javascript code should be like this
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$('#status').on('change',function(){
if(this).value ==="Auto Change" ){
$("#auto_change_date").show();
} else {
$("#auto_change_date").hide();
}
});
});
</script>
Related
So I am trying to, when the button a is clicked, add the letter to the textfield. However, I cant seem to figure out why it isn't working. I got the code for it from here on stack exchange. Any help is as always appreciated.
<html>
<head>
<title>Test</title>
<style>
tab1 { padding-left: 8em; }
tab2 { padding-left: 12em; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</head>
<body style="background-color:powderblue;">
<tab2><input id="bar a" style="height:20px;width:120px" type="button" value="a" onlick=buttonPress('a')/><br><br>
<tab1><input id ="stringInput" type="text" value=""/><br>
<script language="javascript" type="text/javascript">
var added;
function buttonPress(added)
{
document.getElementById("bar a").addEventListener('click', function () {
var text = document.getElementById('stringInput');
text.text = (text.text + added);
});
}
</script>
</body>
</html>
You don't need to attach event as you are already calling function onclick.
Aslo you need value property of textbox not text
function buttonPress(added)
{
var text = document.getElementById('stringInput');
text.value= (text.value + added);
}
Also your html for button in invalid.It should be
<input id="bar a" style="height:20px;width:120px" type="button" value="a" onclick="buttonPress('a')" />
<html>
<head>
<title>Test</title>
<style>
tab1 { padding-left: 8em; }
tab2 { padding-left: 12em; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</head>
<body style="background-color:powderblue;">
<input type="text" value="" id="test1">
<input id ="test2" type="text" value="ram"/><br>
<input type="button" onclick="addInput()"/ value="click">
<span id="responce"></span>
<script>
function addInput()
{
var test1_value= document.getElementById('test1').value;
var test2_value= document.getElementById('test2').value;
document.getElementById('test2').value=''+test2_value+''+test1_value;
}
</script>
</body>
</html>
There are few issues in your code. Not sure if it is a typo in your code.
For example onlick=buttonPress('a') . It should be onclick and the handler function should be quotes. Refer to the below html.
There is also no need of adding addEventListener inside function. You have already added the listener in the html code. If you add the listener inside the function, then on first click it will again try to add the the event.
Refer to the below js. Hope this will be useful
var added = " New Text";
function buttonPress(added) {
var text = document.getElementById('stringInput');
text.value = (text.value + added);
}
HTML
<input id="bar" style="height:20px;width:120px" type="button" value="a" onclick='buttonPress("a")' />
DEMO
your onclick is mispelled as onlick. This will be read as a custom attribute.
put the buttonPress('a') inside "". It will become onclick="buttonPress('a')". It prompts an error when it's not inside "".
since you are using an input for the component with id "stringInput", text property does not work so you have to use the value property instead.
Here is the HTML:
<html>
<head>
<Script type = "text/javascript" src = "CprMdlrSrch.js"></Script>
<link type="text/css"rel="stylesheet"href="CprMdlrSrch.css"/>
</head>
<body>
<div id="main_box">
<p id="instructions"><strong>Please enter a part number to search.</strong></p>
<input id="part_num_search" type="text" name="searchPhrase">
<button id="search_button" type="button" value="button"> <strong>Search</strong></button>
<div id="results"></div>
<script type="text/javascript">
</div>
</body>
</html>
Here is the Javascript:
$(document).ready(function(){
$("#search_button").toggle(function() {
$("#part_num_search").fadeIn("slow");
},
$("#part_num_search").fadeOut("slow");
});
});
I am just unsure what I am doing wrong. I am really just trying to out the button to make sure I am on the right track.
thanks!
-Dustin
I'm not sure you understand how to use the toggle command. Please check out the API documentation: http://api.jquery.com/toggle/
For fade toggling, try .fadeToggle(), which started becoming available since JQuery 1.4.4.
http://api.jquery.com/fadeToggle/
Try something like this:
$(document).ready(function(){
$("#search_button").click(function() {
$("#part_num_search").fadeToggle("slow");
});
});
You'll be better served using http://api.jquery.com/fadetoggle/.
$("#search_button").click(function() {
$("#part_num_search").fadeToggle("slow");
});
The following code does not work
<!DOCTYPE html>
<html>
<body>
<input type="text" id="searchTxt"/>
<input type="button" id="run"/>
<script>
$(document).ready(function() {
$("#run").click(function(){
var input = document.getElementById("searchTxt");
alert(input);
});
});
</script>
</body>
</html>
How can I get and print the value in the text box ?
You have to include the jQuery JS file inside your <head> tag.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
.value on the element return by the getElementById function
Below is a function that I have been trying to call to set focus on a text box, but it is not doing so. I would be thankful if anyone can tell me how to do this.
Thanks in advance :)
address1 is the id of the text box.
function address_validation(address1)
{
document.getElementById("address1").focus();
return false;
}
You are using "address1" than address1.
Your are supposing to get element by using dynamic id address1 but you have used static one "address1".
function address_validation(address1){
document.getElementById(address1).focus();
return false;
}
<html>
<head>
<style>
#txt:focus{
background:black;
}
</style>
</head>
<body>
<input type="text" id="txt"><BR>
<input type="button" onclick="btn()" value="set focus">
<script>
function btn(){
var txt = document.getElementById("txt");
txt.focus();
return false;
};
</script>
</body>
I am trying to use some HTML tag inside JavaScript, but the HTML tag does not work. How can U use an HTML tag inside JavaScript? I wanted to use h1 but did not work.
if (document.getElementById('number1').checked) {
<h1>Hello member</h1>
}
You will either have to document.write it or use the Document Object Model:
Example using document.write
<script type="text/javascript">
if(document.getElementById('number1').checked) {
document.write("<h1>Hello member</h1>");
}
</script>
Example using DOM
<h1></h1> <!-- We are targeting this tag with JS. See code below -->
<input type="checkbox" id="number1" checked /><label for="number1">Agree</label>
<div id="container"> <p>Content</p> </div>
<script type="text/javascript">
window.onload = function() {
if( document.getElementById('number1').checked ) {
var h1 = document.createElement("h1");
h1.appendChild(document.createTextNode("Hello member"));
document.getElementById("container").appendChild(h1);
}
}
</script>
<html>
<body>
<input type="checkbox" id="number1" onclick="number1();">Number 1</br>
<p id="h1"></p>
<script type="text/javascript">
function number1() {
if(document.getElementById('number1').checked) {
document.getElementById("h1").innerHTML = "<h1>Hello member</h1>";
}
}
</script>
</body>
</html>
This is what I used for my countdown clock:
</SCRIPT>
<center class="auto-style19" style="height: 31px">
<Font face="blacksmith" size="large"><strong>
<SCRIPT LANGUAGE="JavaScript">
var header = "You have <I><font color=red>"
+ getDaysUntilICD10() + "</font></I> "
header += "days until ICD-10 starts!"
document.write(header)
</SCRIPT>
The HTML inside of my script worked, though I could not explain why.
here's how to incorporate variables and html tags in document.write
also note how you can simply add text between the quotes
document.write("<h1>System Paltform: ", navigator.platform, "</h1>");
JavaScript is a scripting language, not a HTMLanguage type. It is mainly to do process at background and it needs document.write to display things on browser.
Also if your document.write exceeds one line, make sure to put concatenation + at the end of each line.
Example
<script type="text/javascript">
if(document.getElementById('number1').checked) {
document.write("<h1>Hello" +
"member</h1>");
}
</script>
<div id="demo"></div>
<input type="submit" name="submit" id="submit" value="Submit" onClick="return empty()">
<script type="text/javascript">
function empty()
{
var x;
x = document.getElementById("feedbackpost").value;
if (x == "")
{
var demo = document.getElementById("demo");
demo.innerHTML =document.write='<h1>Hello member</h1>';
return false;
};
}
</script>
<div id="demo"></div>
<script type="text/javascript">
if(document.getElementById('number1').checked) {
var demo = document.getElementById("demo");
demo.innerHtml='<h1>Hello member</h1>';
} else {
demo.innerHtml='';
}
</script>