I have a textarea and I want its text to have the focus and selected-all when the page is loaded. This is my code, but it is not working. Any ideas?
<body onload="document.formIn.originalScript.select();document.formIn.originalScript.focus();">
<form action="servlet" method="POST" name="formIn">
<textarea name="originalScript" cols="52" rows="30">This is my text</textarea>
Thanks
FIXED: See my answer below. Works on the server.
try paste this in the end of body tag:
<script type="text/javascript" language="javascript">
onLoad();
function onLoad() {
document.getElementsByName('originalScript')[0].select();
}
</script>
Once I upload the code on the original question to the server, it works. It is only locally where I get these issues.
Related
I am testing a view WYSIWYG editors (ckeditor, sceditor, wysibb). They work all same. A textarea with a ID is the anchor and holds the entire dom-object.
Example in the source:
<textarea id="example"></texarea>
Becomes in DOM to:
<textarea id="example" style="display:none"></texarea>
<div id="editor">
<head>
</head>
<body>
Content of the Editor
</body>
</div>
Question:
How is it possible to write something inside of the body, when the body is not in the source?
The reason is, I have a to sync everything from the textarea (example ID) to the editor body, when something is added to the textarea.
I tried:
$("#example, #editor.body").on("change keyup", function(){
$("textarea").not($(this)).val($(this).val());
});
You could do something like this.
$(window).bind("load", function() {
Your stuff
});
This loads callback only after the whole page has finished loading.
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(){
I've a project where I scan a QR code, and it will then automatically print out information based on which code was scanned.
I have the scanner, and a printer. Each QR code is to correspond to a URL. I can get the scanner to fill an input field, and I can get an alert to show the information that was scanned. However, whenever I try to assign the URL it simply appends the information to the current URL, instead of replacing it.
I need it to replace the current URL. Does anyone know why it is doing this, and how to fix it?
<html>
<head><title>QR Printing</title></head>
<body onload="document.myform.mytextfield.focus();">
<form name="myform">
<input type="text" name="mytextfield" onchange="checkForm()">
</form>
<script type="text/javascript" language="JavaScript">
function checkForm() {
var field1 = document.forms['myform'].elements['mytextfield'].value;
alert(field1);
window.location.assign(field1);
}
</script>
</body>
</html>
Looks like the form is submitting. Cancel it.
<form name="myform" onsubmit="return false">
You want:
window.location = field1;
add return false; after window.location.assign(field1);
<html>
<head><title>QR Printing</title></head>
<body onload="document.myform.mytextfield.focus();">
<form name="myform">
<input type="text" name="mytextfield" onchange="checkForm()">
</form>
<script type="text/javascript" language="JavaScript">
function checkForm() {
var field1 = document.forms['myform'].elements['mytextfield'].value;
alert(field1);
window.location.assign(field1);
return false;
}
</script>
</body>
</html>
Neither of the solutions worked for me in chrome browser.
I have resolved this using:
setTimeout(function () { document.location.href = YourUrlLink }, 500);
Hope this helps who are seeking a solution for chrome browser issue.
I encounter a very strange problem!
I wrote the following code:
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<textarea id="code">
<div id="hello">Hello world!</div>
<script type="text/javascript">
$(function(){
$("#hello").css({"border":"solid 3px red"});
alert($("#hello").size());
});
</script>
</textarea>
<iframe src="iframe.html"></iframe>
<script type="text/javascript">
$(function(){
$("iframe").on("load",function(){
$(this).contents().find("body").append($("#code").val());
});
});
</script>
The "iframe.html" file contains only a call to the jQuery library.
The result is that "Hello world!" is displayed in the iframe but without red border! It seems that $("#hello") does not work. In fact, if I do alert($("#hello").size()), I get "0".
Do you have any idea?
Thanks!
Edit: Add "alert".
$(this).contents().find("body").append($("#code").val());
Only gets the current value so probably it wont copy over any css value that is linked to it.
http://api.jquery.com/val/
What I suggest is testing it in 1 file first to see what it does so remove the iframe part for now and check the .size() on 1 file. that way you know how the .val and .size() behave on your #hello.
Try this as the script under the :
<script type="text/javascript">
$(function(){
$("iframe").on("load",function(){
alert($("#code").val());
var scriptx = $("#code").val();
$(this).contents().find("body")[0].innerHTML = scriptx;
});
});
</script>
});
</script>
I think the html format is wrong. You are putting the div inside the text area and inside any text area if you put some html elements then those are simply taken as some text and that html elements are not going to render in browser.
So you can put the the div element out side the text area.
<textarea id="code"></textarea>
<div id="hello">Hello world!</div>
I hope this will work.. :)
I have a form with only one file input and I want to auto submit the form every time when someone selects file. Now I use this code:
$(function(){
$("#fil1").change(function(){
$("#form1").submit();
});
});
but it works only for the first selection. When I select some other file the form is't submitted again! It seems the change function is called only for the first time! Can anyone help? I use jquery...
What version of jQuery are you using? I just tried the code below and it worked multiple times. Also wonder if it's your browser. I tried Chrome and IE 8.
<html>
<head>
<title>index.html</title>
<script type="text/javascript" src="js/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
alert('hit');
$(function(){
$("#fil1").change(function(){
$("#form1").submit();
});
});
</script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<label for="fileField"></label>
<input type="file" name="fileField" id="fil1">
</form>
</body>
</html>
hope this helps...