getElementById, radio buttons, and document.write(); - javascript

Radio buttons and JS suck. Ok now that I got that out of my system here is my problem: I finally got Javascript to acknowledge the radio button's value after reading getElementById not playing nice with Radio Buttons
I can alert the value but document.write(); won't work?
Here is my code:
<html>
<head>
<script type="text/javascript">
function getRadioValue() {
var y=document.getElementById('draftrequirement_2').value;
document.write(y);
return y;
}
window.onload = function() { alert(getRadioValue()); }
</script>
</head>
<body>
<input onchange="checkRadio()" type="radio" name="draftrequirement" value="na" id="draftrequirement_2" />
</body>
</html>

In Firefox 5 and Chrome 12 I see 'na' in both the alert and the document, so the document.write() seems to work in those browsers. The radio input is not present after the window load event, though.
Can I ask you why you are using document.write()? There are many alternatives to manipulating the DOM. From w3schools.com (http://www.w3schools.com/js/js_howto.asp)
Note: Try to avoid using document.write() in real life JavaScript code. The entire HTML page will be overwritten if document.write() is used inside a function, or after the page is loaded. However, document.write() is an easy way to demonstrate JavaScript output in a tutorial.

Do not use document.write(). Ever!
Make your life easier and start using jQuery or similar library for manipulating DOM.
If you need to do it with pure javascript only, this should work:
<html>
<head>
<script type="text/javascript">
function checkRadio() {
var y=document.getElementById('draftrequirement_2').value;
document.getElementById('draftrequirement_2_message').innerHTML = y;
}
</script>
</head>
<body>
<input onchange="checkRadio()" type="radio" name="draftrequirement" value="na" id="draftrequirement_2" />
<div id="draftrequirement_2_message" />
</body>
</html>

<html>
<head>
<script type="text/javascript">
function checkRadio() {
var y=document.getElementById('draftrequirement_2').value;
document.write(y);
return y;
}
</script>
</head>
<body>
<input onchange="checkRadio()" type="radio" name="draftrequirement" value="na" id="draftrequirement_2" />NA
</body>
</html>
Use this it is working

Related

Cannot hide a element in javascript using onfocus event

when i trying to hide the element div while click on text box using javascript.but it can't.what is the error on my program .anyone suggest me a good one
<html>
<head>
<script>
function clear()
{
alert("hi");
document.getElementById("mails").style.display="none";
}
</script>
</head>
<body>
<input type="text" onfocus="clear();" />
<div id="mails">hii</div>
</body>
</html>
Instead of using function name as clear(), please use any other name.
clear method refers to obsolete document.clear() method so it does not call clear method written by you.
According to HTML5 Specification, clear() method must do nothing.
IT's very easy to hide elements if you use jQuery. This way, all you need to do is:
$('#mails').hide();
If you prefer using DOM, then you can try this:
<html>
<head>
<script>
function hideit()
{
alert("hi");
document.getElementById("mails").style.display="none";
}
</script>
</head>
<body>
<input type="text" onClick="hideit()" />
<div id="mails">hii</div>
</body>
</html>
Though clear is not a keyword but it seems some browser still supports document.clear & that may be stopping the clear function here . You can change the function name and try
function myF() {
document.getElementById("mails").style.display = "none";
}
<input type="text" onfocus="myF();" />
<div id="mails">hii</div>
I am to late but nevertheless I can agree brk. The clear() is blocked by a native function.
<html>
<head>
<script>
function clearFunction()
{
console.log("onfocus called");
document.getElementById("mails").style.display="none";
}
</script>
</head>
<body>
<input type="text" onfocus="clearFunction();" />
<div id="mails">hii</div>
</body>
</html>

How to fill in data in an input field using Javascript directly on page load?

This question has been asked a lot it seems on Stack Overflow but none of the solutions seem to be working. I am developing a web application where I have to fill in data in data fields on page load. Here is my code:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<input type="text" id="datetime" value="" />
<script type="text/javascript">
$(document).on("pageload",function(){
//for fill field
document.getElementById("datetime").value = "here is value";
});
</script>
</body>
</html>
For some reason, when I load the page, no data gets filled in, does anyone see the reason for it?
You don't need jQuery. Try this:
<!DOCTYPE html>
<html>
<body>
<input type="text" id="datetime" value="" />
<script>
window.onload = function() {
document.getElementById('datetime').value = 'here is value';
};
</script>
</body>
</html>
What version of jquery are you using? Looks like pageload might deprecated and you should use pagecontainerload
Or better yet use the $(document).ready or .load methods?
In Jquery it's called document ready event... So use the below syntax.
$(document).ready(function(){
//for fill field
$("#datetime").val( "here is value");
});
Note the inner line of code has been changed.. This is the Jquery way of doing the same thing...
You can also use this Shorthand to $(document).ready(function(){
That is $(function(){

jQuery click function doesnt work

So I have a very simple code with form and one button
with jQuery I want to bind some actions when user clicks on that button, but some reason it's not working
Here is the code
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<script>
$('#jallerysubmit').bind('click', function() {
alert('asd');
})
</script>
<form>
<input type="checkbox" name="box1">box1<br>
<input type="checkbox" name="box1">box2<br>
<input type="button" id="jallerysubmit" value="Proved">
</form>
</body>
</html>
please suggest what's wrong with this code as it does not work, even it does not produce any error
You need to wrap it in a document ready handler.
<script>
$(function() {
$('#jallerysubmit').bind('click', function() {
alert('asd');
});
});
</script>
Docs: http://api.jquery.com/ready/
The JavaScript code will be executed before the DOM is loaded, so the element with ID jallerysubmit cannot be found (it does not exists yet).
#sje397 described a very common way (at least when using jQuery) how to solve this. Another way is to put the script at the end of the document:
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<form>
<input type="checkbox" name="box1">box1<br>
<input type="checkbox" name="box1">box2<br>
<input type="button" id="jallerysubmit" value="Proved">
</form>
<script>
$('#jallerysubmit').bind('click', function() {
alert('asd');
});
</script>
</body>
</html>
Your code attaching the handler is being executed before the element exists in the DOM, therefore the selector returns nothing and the handler is not applied. Put the code inside a document ready handler and it should work. You could also simplify by using the click shortcut.
<script>
$(function() {
$('#jallerysubmit').click(function() {
alert('asd');
});
});
</script>
Include an alert("hello"); right after to make sure the jQuery is working right. Then add a return false to the end of your submit handle to make sure your page doesnt reload when the button is clicked, also use document.ready. See code below
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
alert("hello");
$('#jallerysubmit').bind('click', function() {
alert('asd');
return false;
});
});
</script>
<form>
<input type="checkbox" name="box1">box1<br>
<input type="checkbox" name="box1">box2<br>
<input type="button" id="jallerysubmit" value="Proved">
</form>
</body>
</html>
Best practice is using an external .js file, example script.js:
$(document).ready(function() {
yourFunction();
});
function yourFunction() {
$('#jallerysubmit').click(function() {
alert('asd');
});
}
and import it in your html file in the tag head:
<script type="text/javascript" src="script.js"></script>
Always use jquery function within
(document).ready(function(){//ur jquery codes});
or
$().ready(function(){//ur jquery codes});
or
$.noConflict();
jQuery(document).ready(function($){//ur codes});
Once DOM of page is loaded above ready function is initiated. so i recommend jquery lovers to write their magic codes always within this code

Why isn't my jquery dialog box working?

I've been trying to figure out how to get a jquery dialog box to work. For the life of me, I can't get it to work. Here is some html with in-line javascript I've written:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function showDialog() {
$('#dialogBox').dialog();
}
</script>
</head>
<body>
<input type="button" value="Click me" onclick="showDialog();" />
<div id="dialogBox">
<p>This is the text of my dialog box.</p>
</div>
</body>
</html>
When I click the button in Internet Explorer, it says Object doesn't support this property of method. What am I doing wrong?
As far as I know, the dialog() function is part of jQuery UI, and it doesn't look like your code references the UI library. Try adding something like
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>
in the <head> below where you reference the jQuery library. This will pull in the Google-hosted version of the source.
I would imagine that the Google-hosted version includes lots of things you don't need, so you might be able to speed up loading times by downloading your own copy and only selecting the components that you need.
you can try to use this to open,
function showDialog() {
jq('#dialogBox').dialog('open');
}
or to close
function showDialog() {
jq('#dialogBox').dialog('close');
}

Display FCKeditor input data in HTML format on same page, as user types?

I am currently playing around with the FCKEditor, and I am trying to replicate how stack overflow shows exactly how your post will look in HTML as you type it up. My FCKEditor creates just fine, I just don't know how to go about accessing the editor data once it is created. What I want to do is get the html from the editor and then put it into the <p id="inputText"></p>. Trying to access it with jQuery using $("#fckEdtr") doesn't work, which I expect is because it's created on the fly with javascript. I am aware of the IsDirty() method in the FCKeditor JavaScript API, I just haven't seen any solid examples of how to get the current instance of the editor and use the method. Can anyone help? My code is below:
<html>
<head>
<title>FCKeditor Test</title>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
...code to output editor data as user types
});
</script>
</head>
<body>
<form>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('fckEdtr');
oFCKeditor.BasePath = "./fckeditor/";
oFCKeditor.ToolbarSet = 'Default';
oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<p id="inputText">
</p>
</form>
</body>
</html>
I just found the answer to this in another question on SO:
How can I enable live preview for FCKeditor in an ASP.Net site?
Also, when I use a div element instead of a paragraph element, it works. Here's my final working code for anyone it might help:
<html>
<head>
<title>FCKeditor - Sample</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
function FCKeditor_OnComplete( oFCKeditor )
{
oFCKeditor.Events.AttachEvent( 'OnSelectionChange', function() {
document.getElementById("postText").innerHTML =
oFCKeditor.GetHTML(true);
}) ;
}
</script>
</head>
<body>
<form method="post" action="process.php">
<script type="text/javascript">
var oFCKeditor = new FCKeditor('fckEdtr');
oFCKeditor.BasePath = "./fckeditor/";
oFCKeditor.ToolbarSet = 'Custom' ;
oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<div id="postText">
</div>
</form>
</body>
</html>
It's good that you found the answer already, but I wonder why do you need preview window when you are dealing with WYSIWYG editor. My guess is that the look you are getting in the editor is different from the resulting look because of CSS applied to the latter. If I am wrong, disregard the advice that follows.
If that is the case, you may think of copying the most relevant parts of your CSS to \fckeditor\editor\css\fck_editorarea.css so that they are applied in the editor window. Of course, sometimes you do want the difference. For example, spoilers should be hidden when posted but visible in the editor.

Categories

Resources