How will hide label using div in javascript? - javascript

I want hide a label according to a dropdown button. I am using a div with JavaScript. My code is:
<div id="ime" name="ime">
<h3 class="ms-standardheader">
<label>
<nobr>IEMI No</nobr>
</label>
</h3>
</div>
For hiding through JavaScript,which I am using:
ime.style.display='none';
document.getElementById("ime").style.display='none';
document.getElementsByName("ime").style.display='none';
But this code is not working.

On page load id to this div is not assigned that's way it is not working. Use this after body tag at the end of page.
write this way
<html>
<body>
.
.
.
.
.
</body>
<script type="text/javascript">
document.getElementById('ime').style.visibility = 'hidden';
</script>
</html>

What if you just use document.getElementById("ime").style.display='none'; without the other two lines (which will not work)?
I expect that the first line will throw an error, because ime is not defined, which will prevent execution of the next two lines.
The third line will not work, because it returns an array of objects, which individually have a style attribute, but not together...
// this would work on the first `ime` tag
document.getElementsByName("ime")[0].style.display='none';

Try this it will work
document.getElementById("ime").style.display='none';

Related

why I cant access to value of hidden input element by javascript?

I have an page that I cant use value of hidden input in if clause.
and dont print anything in page.
I use this javascript command past days and worke but dont work here.
my code is:
<script type="text/javascript">
function ch()
{
alert();
document.write(" brnd = ");
var c=document.getElementById("brnd").value;
document.write(document.getElementById("brnd").value);
document.write(document.forms["br"]["brnd"].value);
}
window.onload=ch();
</script>
</head>
<body >
<form id="br">
<input type="hidden" id="brnd" value="0000pp" />
</form>
<p>Page Description.
</p>
<div id="brands" style="" >
<ul style="height:20% !important;width:90% !important;">
<li>y.t</li>
<li>ez</li>
<li>am</li>
<li> group iks</li>
<li>frtc</li>
<li>armco</li>
</ul>
</div>
</body>
Where is the problem in your opinion?
=============================================
#Rocket Hazmat: thanks for your note.one problem was place of ch.i move ch to after input and work.but have another problem that i dont know how solved. anyway code work now.thanks all.
window.onload=ch();
This line will run the ch() function and set window.onload to its return value. ch() returns undefined, so you will not be setting onload to anything.
You want to do:
window.onload = ch;
In JavaScript, functions are like other variables. You can just pass them around normally. You use () to call them.
NOTE: document.write should never be used. Using it is most likely your other issue here. Once the page is fully loaded, document.write will destroy your page. It will erase it all and replace it with whatever you passed.
Because of this, your hidden element would be deleted and therefore you can no longer get its value.

jQuery .html(): Missing elements from beginning of div

I'm selecting a <div>, like so:
var html = $('div#mydiv').html();
Both in console, and in the DOM when I paste the html var back in, there are two elements missing from the beginning of the div, which is structured like so:
<div id="mydiv">
<input type="checkbox" />
<label for="input"></label>
<div class="notes"></div>
...
</div>
I'm only getting from the 'notes' div on down - NOT the input or label. It's the weirdest thing. Any ideas?
EDIT: By 'ideas', I mean - yes, I know this should work just fine. I'm wondering what bugs could be causing the weirdness. There is some PHP laced into the input and label - but those output just fine in the div where they originate, but do NOT show up in the console or in the div where I'm setting the html via jQuery. I'm looking to see if there's malformed HTML, but I don't think so.

Javascript form innerHTML

i have an issue with innerHTML and getElementsById(); method but I am not sure if these two methods are the root of the issues i have.
here goes my code :
<script type="text/javascript">
function clearTextField(){
document.getElementsById("commentText").value = "";
};
function sendComment(){
var commentaire = document.getElementById("commentText").value;
var htmlPresent = document.getElementById("posted");
htmlPresent.innerHTML = commentaire;
clearTextField();
};
</script>
and my HTML code goes like this:
<!doctype html>
<html>
<head></head>
<body>
<p id="posted">
Text to replaced when user click Send a comment button
</p>
<form>
<textarea id="commentText" type="text" name="comment" rows="10" cols="40"></textarea>
<button id="send" onclick="sendComment()">Send a comment</button>
</form>
</body>
</html>
So theorically, this code would get the user input from the textarea and replace the text in between the <p> markups. It actually works for half a second : I see the text rapidly change to what user have put in the textarea, the text between the <p> markup is replaced by user input from <textarea> and it goes immediately back to the original text.
Afterward, when I check the source code, html code hasn't changed one bit, given the html should have been replaced by whatever user input from the textarea.
I have tried three different broswer, I also have tried with getElementByTagName(); method without success.
Do I miss something ? My code seems legit and clean, but something is escaping my grasp.
What I wanted out of this code is to replace HTML code between a given markup (like <p>) by the user input in the textarea, but it only replace it for a few milliseconds and return to original html.
Any help would be appreciated.
EDIT : I want to add text to the html page. changing the text visible on the page. not necessarily in the source. . .
There is no document.getElementsById, however there is a document.getElementById. This is probably the source of your problem.
I don't think there is any document.getElementsById function. It should be document.getElementById.
"To set or get the text value of input or textarea elements, use the .val() method."
Check out the jquery site... http://api.jquery.com/val/

Issues with jquery id selector

I have this snippet of HTML:
<div class="clearfix" id="menu-file-div">
<label id="menu-file-label" for="id_menu_file">From File</label>
<div class="input">
<div id="file-upload">
<input type="hidden" name="menu_file" id="id_menu_file" />
<script type="text/javascript">var field_id = "id_menu_file";</script>
<script type="text/javascript">var append_to_element_id = "menu-upload";</script>
<script type="text/javascript">var loader_element_id = "newmenu-modal";</script>
<noscript>
<p>Please enable JavaScipt to upload a file.</p>
</noscript>
</div>
</div>
</div>
In my console, when I try to use the jquery id selector, it fails to return the input element:
> $("#id_menu_file")
[]
Any thoughts on why this is so? I feel like I'm missing something simple. Thank you!
EDIT - some other javascript was removing the element, that is why it's not showing up. Thanks all for your help.
To repeat my first answer (which may be applicable to others reading this post later, and which was deleted despite the fact that it "fundamentally answer[ed] the question"):
Is this HTML inside of a frame (iframe or regular)? That could make it difficult for jQuery to find your element, unless you give it the right context.
To add a context to a jQuery selector you just provide that context as an extra argument, for example: $('TD', aFrameElement);
If the element in question is not inside a frame (which is the case for zallarak), the problem is almost certainly a timing issue: the jQuery selection is happening before the element has gotten loaded on the page. You can test this theory by adding the following code (anywhere):
$(function(){
console.log($("#id_menu_file"))
});
If that is the problem, simply wrap your code in $(function(){ to fix matters.
try :
$("#id_menu_file").get(0)
$(selector) return arrays

jquery before() is out of order?

I have a page where you can click a link that says "add a keyword" and an input will appear and you can enter the keyword, and then convert it into a span tag on blur or the "return" key. However, I've been adding onto it to allow for an "autocomplete" feature, so I'm trying to insert a
<ul></ul>
after my input in order to do a .load inside the list.
The relevant code I have is:
var addKeywordId = 0;
$('a.add_keyword').live('click', function(){
$(this).before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" /><ul><li>hi</li></ul>');
$('.add_keyword').focus();
addKeywordId++;
});
The problem is, that my HTML structure ends up looking like this:
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
<input id="addKeyword0" class="add_keyword" type="text />
INSTEAD OF
<input id="addKeyword0" class="add_keyword" type="text />
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
Anybody know why my HTML is added out of the order I specified??
Thanks
EDIT: This seems to be working fine in Google Chrome, but not in Mozilla Firefox.. :(
This is likely due to the weird rejiggering of code Firefox does to try to display things even when there are errors. I've seen it where I miss a closing div, IE freaks out (as it should) and Firefox looks fine, as it ignores that you missed adding the ending div and guesses.
You could try a 2 stage thing. I would add an id to the ul tag, then add the input before it.
$(this).before('<ul id="ulid"><li>hi</li></ul>');
$('#ulid').before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" />');
Happy haxin.
_wryteowl

Categories

Resources