I want send a form as soon as the page is loaded. All variables in the form are written dynamically and there is no button for submitting.
Does following JS script work in all browsers ?
<script type='text/javascript'> window.onload = function(){ window.document.forms[0].submit(); }; </script>
I doubt window.onload will work in all without any problems.
Thanks in advance...
If you're worried about compatibility in all browsers, how about using jQuery's ready function?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
window.document.forms[0].submit();
});
</script>
Whilst I would agree that Ken's answer is perfectly acceptable, I don't believe it is correct to include a full-fat JS library just for its .ready() functionality.
For what it's worth, I'd recommend docReady. The size of docReady is 322 bytes gzipped (548 bytes uncompressed).
docReady(function() {
window.document.forms[0].submit();
});
I love jQuery, and I'd even say that there's not much of a perf impact in Ken's answer because it's likely that, if you're using the Google CDN, you've probably already downloaded it during your time on that site or others. But still, it's an unnecessary overhead on what should be a simple page IMO.
Don't use the window.onload (I mean, you can, but is easier/ more logical to do it differently). What you should do is print the form in a hidden div tag, assign an id to the submit button and then use javascript to 'click' it. Here is an example:
<div style="display: hidden;">
<form action="page/site" method="get/post">
<input type="hidden" name="name" value="value" />
<input type="submit" id="formButton" />
</form>
<script language="javascript">
document.getElementById("formButton").click();
</script>
</div>
I hope that helps.
Related
I need build code such : http://fiddle.jshell.net/bwKZt/152/
but my code dosen't work ! I am a beginner. Please help me.
index.php:
<!DOCTYPE html><html>
<head>
<script>
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
Some of the JavaScript here isn't native JavaScript , but is using a plugin called jQuery that makes searching and manipulating HTML elements easier.
When you see $(), that's the jQuery way of finding elements. But it won't work because you don't have jQuery referenced at all.
If you don't want to use jQuery, you can find elements with something like document.getElementById('label').
But lots of people use jQuery to make referencing page elements short and sweet, as with $('#label').
Try to reference jQuery first, like:
<!DOCTYPE html><html>
<head>
<!-- The below line references an externally hosted copy of jQuery 2.2.4 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
// The below chunk is telling it to bind to the keyup event only AFTER the document has fully loaded.
// Sometimes when your binding code is executed, the elements you wish to bind to aren't loaded yet.
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
});
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
The first problem is because you haven't include jquery with a script tag to solve that add this code in the head of you html file if you have the Internet connection to load Jquery from CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
or you can download Jquery file from Jquery site and you will have it locally
after that you must execute this code after the executing the jquery ready function
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
})
Here is my Jquery code.Please have a look through it and do help me?
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$("#rec").click(function() {
$("#tab1").toggle();
});
</script>
<input type="button" class="button" id="rec" value="Sample"/>
<div id="tab1">
Hello this is a sample jquery toggling function.
</div>
Just wrap your Jquery code inside $(document).ready(function(){}) as shown below :-
<script type="text/javascript">
$(document).ready(function(){
$("#rec").click(function(event) {
event.preventDefault();
$("#tab1").toggle();
});
});
</script>
Read More on $(document).ready() here.
Working Demo
It seems that there is an error while loading JQuery try this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Use $(document).ready(function(){}, to execute the js code when then document will be loaded or put your scripts just before the </body> tag.
I ll take a guess here. (I'm feeling lucky!) (update:seems i wasn't lucky but read this anyway it's usefull)
Your code does not work because you say "do something when the html element with id="rec" is clicked" and "do something to the html element with id="tab1""
My guess is, you have more than one html element with id="rec" and/or more than one html element with id="tab1" in your code.
id value of html elements must be unique across a webpage! If there are more than one html elements with the same id then the jquery selector doesn't know when to fire, and also browsers behavior can be unexpected. This may be the cause of internet explorer nagging.
You need to add compatibility meta just after <head> tag:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
I'm new in Chrome packaged apps and have two questions (that actually solves one problem).
I'm trying to do a simple form to send some data to a remote server, using Ajax and POST. As I understand, I can't use inline javascript ( tags) and also, I can't use events on the HTML button element. So, I've no idea where to put my javascript and what to execute when the button is clicked. My forms is as simple as this:
<!DOCTYPE html>
<html>
<head>
<script>
function send(){
//do some ajax
}
</script>
</head>
<body>
<img id="headerImage" name="headerImage" src="logo_main.gif"/>
<div>
<form>
<table>
<tr>
<td>Send:</td>
<td><input type="text" size="32" id="send" name="send"/>
</tr>
<tr>
<td colspan="2"><button id="send">Send</button>
</tr>
</table>
</form>
</div>
</body>
</html>
So my two questions are: where do I put my javascript? and how do I execute a javascript function from my HTML button element?
Thanks a lot!
P.D. I've searched for complete documentation about this, but can't find it. I'll very thankfull if some one posts a link with the complete documentation.
Your question's title does not really correspond to your question (edit it, maybe?). Answering your questions as quoted:
So my two questions are: where do I put my javascript? and how do I
execute a javascript function from my HTML button element?
Both of those questions are answered in documentation on Content Security Policy, with an example. Your JavaScript code should go in a separate file that you include with a <script> tag, and you need to bind event listeners from within that code.
To make this a proper answer, here's how to do it in your case, with jQuery (for non-jQuery solution see docs mentioned). To use, add jQuery as "jquery.js" in your app's files.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src="form.js"></script>
</head>
<body>
<!-- ... -->
<button id="send">Send</button>
<!-- ... -->
</body>
</html>
form.js:
function send(){
//do some ajax
}
// Use document ready to wait for DOM to be created
$(document).ready(function(){
$('#send').click(send); // Binds a listener for onclick event
});
I have a button:
<input class="formatButton verInfo2" type="button" value="Aceptar" id="btnAceptar" />
That when clicked calls a whole bunch of fun-ctions that in turn call PHP etc, the problem is that all this magic happens on another page, this button is a mere trigger. I wanted to load such other page when the button is clicked and onclick=window.location was doing the job, expect that when used like this:
<input class="formatButton verInfo2" type="button" value="Aceptar" id="btnAceptar" onclick="window.location='somepage.php';" />
It totally ignored the scripts that I have at the end of my document, I specially need it to trigger the last one because it uses the button's id:
<script src="js/jquery.js"></script>
<script type="text/javascript" src = "js/agregarPcLogic.js"></script>
<script src="js/addLab.js"></script>
I figure that such thing happens because it read the code in order and once the button is pressed and it loads the other page it just ignores the rest, so I figure that adding such scripts somewhere before could fix that but I think it would look bulky, so my question is, is there any other method or technique I could use to load a page?
Or is the best solution?
<input class="formatButton verInfo2" type="button" value="Aceptar" id="btnAceptar"
<script src="js/jquery.js"></script>
<script type="text/javascript" src = "js/agregarPcLogic.js"></script>
<script src="js/addLab.js"></script>
onclick="window.location='somepage.php';" />
Thanks alot in advance for your kind words of wisdom.
Decided to just add another script with:
$("id of button").click(function(){
window.location.href='link to page .php';
})
I am doing this first time. I have created an iframe on my page and I want the text from the iframe through jquery.
Here is my code :
<html>
<head><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function copyIframeContent(iframe){
var iframeContent = $(iframe).contents(); //alert(iframeContent);
//$("#result").text("Hello World");
$("#result").html(iframeContent.find('body').html);alert(iframeContent.find('body').html());
}
</script>
</head>
<body>
<iframe id="myIframe" onload="copyIframeContent(this);" name="myIframe" src="text.php"></iframe><br />
Result:<br />
<textarea id='result'></textarea>
<input type="button" value="click" id="btn" onclick="aa()">
<script type="text/javascript">
function aa(){ alert("Fdf");
alert(document.getElementById('myIframe').contentWindow.document.body.innerHTML);
}
</script>
</body>
</html>
text.php:
text to change
I tried a lot in all browsers but still this is not working.
Can anyone help me to get this content?
The contentWindow works in both FF and chrome
document.getElementById('myFrame').contentWindow.document.body
Would give you a DOM element body
You can also try something like
window.frames['myIframe'].document.body
That might do the trick for you also
You might have problems with your browsers built in security. If you run this on a local machine. There is a way to disable browsers security.
var content=$("iframe").contents().find('body').html();
alert(content);
Use .contents() to get to iFrame's DOM.
$('#myIframe').contents()
UPDATE:
In the OP:
$("#result").html(iframeContent.find('body').html);
Should say:
$("#result").html(iframeContent.find('body').html());
Doing with jquery will be a little easier:
$('Your Selector', frames['myIframe'].document)
The above example will get anything from myIframe. But the iframe MUST be from the same domain as the parent document. If not from the same domain, a security violation occurs (You can't add content from foreign sites to your page and change that content.)
If no security violation, you can do anything with the selection. For example you can use the jquery append() method to insert new html inside the iFrame, you can use the html() method to replace html or any other function that jquery/pure javascript allows.