This question already has answers here:
How to cause a form to be submitted automatically on page load in JavaScript?
(3 answers)
Closed 8 years ago.
I need the button with the ID of "clickButton" to be automatically clicked or "activated" just by someone loading the page:
<html>
<head>
</head>
<body>
<center>
<form method="post" action="http://web.com/">
<input type='hidden' value="test" id="chatbox" name='content' />
<!-- The Button -->
<input id="submitButton" class="button" name="accept" type="submit" value="Send"/>
</form>
</center>
</body>
</html>
What I have tried:
<html>
<head>
<script type="text/javascript">
//In here I would use several Javascript codes,
//including all the ones I have been given
//here
</script>
</head>
<body>
<center>
<form method="post" action="http://web.com/">
<input type='hidden' value="test" id="chatbox" name='content' />
<!-- The Button -->
<input id="submitButton" class="button" name="accept" type="submit" value="Send"/>
</form>
</center>
</body>
</html>
Also if I wanted a javascript code to repeat it self, what command would I use?
Thank you for your help in advance.
I see what you really want to auto submit the form. This would do it:
window.onload = function(){
var button = document.getElementById('clickButton');
button.form.submit();
}
EDIT
If what you want is really auto submit the form automatically n times, each second, whis would do:
window.onload = function(){
var button = document.getElementById('clickButton'),
form = button.form;
form.addEventListener('submit', function(){
return false;
})
var times = 100; //Here put the number of times you want to auto submit
(function submit(){
if(times == 0) return;
form.submit();
times--;
setTimeout(submit, 1000); //Each second
})();
}
Cheers
window.onload = function(){
document.getElementById('clickButton').click();
}
I try to make a habit of explaining my code, but I think this is pretty self-explanatory. If you want it to repeat, just call the function that's set to the click listener of clickButton. Unless you mean over and over, in which case use setInterval or setTimeout (less recommended).
I think clicking without being user triggered is not so good practice, you can achieve the same without needing to triggers click, but you can try this
window.onload = function(){
var button = document.getElementById('clickButton');
setInterval(function(){
button.click();
},1000); // this will make it click again every 1000 miliseconds
};
As an alternative, you can directly send the form instead of clicking the button:
window.onload = function(){
document.forms[0].submit();
}
But my best advice would be to let the user know what you are doing... users really don't like it when a wizard is playing with their page.
<label for="accept">Click here to continue</label>
Related
I am rather new to Javascript and am currently trying some stuff out with it.
I stumbled upon a tutorial in w3schools on how to change the color of a button after pressing it.
I wanted to do something similar, but instead load another page with some search query results when the button is pressed.
My html code for this is the following:
<html>
<head>
<meta charset = "utf-8">
<title>Test</title>
<script type="text/javascript" src="search.js" defer></script>
</head>
<body>
<header>
<h1>Test</h1>
</header>
<main>
<form>
<input type="search" id="query" placeholder="Search...">
<button id="submit">Search</button>
</form>
</main>
</body>
</html>
And here is the corresponding javascript code:
const searchbutton = document.getElementById("submit");
searchbutton.addEventListener("click", testmethod);
function testmethod() {
window.location.href="search.html";
}
The code itself seems to be working, but whenever the button is pressed, the search.html page loads for a split second before reverting back. I even copied the code from the w3schools tutorial directly but it's still not working.
Any idea what causes the page to get changed back after the button is pressed?
Thanks in advance!
Change location or submitting a form will (re)load the (target) page - you are doing BOTH.
You can start by passing in the event and using event.preventDefault() in the testmethod and then do something else than changing location
I strongly suggest to NOT assign events to a submit button, instead use the submit event
You also need to wrap in a page load event listener or move the script to after the form
ALSO never call anything submit in a form
function testmethod(e) {
e.preventDefault(); // stop submission
console.log(this.query.value);
this.subbut.style.color = "red";
}
window.addEventListener("load", function() {
document.getElementById("myForm").addEventListener("submit", testmethod);
});
<main>
<form id="myForm">
<input type="search" name="query" id="query" placeholder="Search...">
<button name="subbut">Search</button>
</form>
</main>
If you do not need to submit the form, use a type="button" and no form
function testmethod(e) {
console.log(document.getElementById("query").value)
this.style.color = "red";
}
window.addEventListener("load", function() {
document.getElementById("subbut").addEventListener("click", testmethod);
});
<main>
<input type="search" id="query" placeholder="Search...">
<button type="button" id="subbut">Search</button>
</main>
I've searched around both stackoverflow and the web for answers to my question, but can't find the right solution.
I am trying to create a text field and button, so that a user can enter a number in the text field and when they click the button it takes them to a URL with that number added to the end of the URL.
For example http://www.website.com/trackingid/NUMBERHERE
If the user typed 000000 in the text field and then hit the button the URL navigated would be http://www.website.com/trackingid/000000
Any help much appreciated.
Thanks
There are two ways of addressing this:
You could use JavaScript's window.location
You could make the button a link and change it's href
Using window.location
Let's assume your html structure looks like this:
<form>
<!-- The field in which the user types the number -->
<input type="text" id="number" placeholder="Enter number here" />
<!-- The button -->
<button onclick="forward();">Send</button>
</form>
When you click the button, the forward() javascript method gets called. This method looks like this:
function forward() {
// select the input field
number = document.getElementById("number");
// forward to the new page
window.location = "http://www.website.com/trackingid/" + number.value;
}
Changing the link's href
Now the structure looks like this:
<form>
<!-- The field in which the user types the number -->
<input type="text" oninput="changeLink(this.value);" placeholder="Enter number here" />
<!-- The button -->
<a id="buttonLink"><button>Send</button></a>
</form>
Notice that the <a>-tag is still completely empty except it's id.
The oninput= calls the JavaScript function changeLink(); with it's current value as a parameter whenever something is written or deleted in it.
This function should look like this;
function changeLink(value) {
// select the link
link = document.getElementById("buttonLink");
// change it's href
link.href = "http://www.website.com/trackingid/" + value
}
I hope this helps. If you have any questions, feel free to ask.
You need JavaScript to do this.
HTML:
<input type="text" id="inputId">
<button type="button" id="buttonId">Click me</button>
JavaScript:
document.getElementById('buttonId').addEventListener('click', function() {
window.location.href = "http://www.website.com/trackingid/" + document.getElementById('inputId').value;
});
Solved your issue please check my solution
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<title>nirajpatel.mdl#gmail.com</title>
</head>
<body>
<input type="text" id="num" name="num">
<button id="button">Go Url</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
url = "http://www.website.com/trackingid/";
$("#button").click(function(){
var num = $("#num").val();
window.location.replace(url+num);
});
});
</script>
</html>
I did a new tab function if I click a submit button using java script. The problem is the location of the parent page, if I click submit button there's a new tab but if I insert a code of location changing it doesn't work . Please help me.
<script type="text/javascript">
$("form").submit(function() {
$("form").attr('target', '_blank');
return true;
});
</script>
<form action="test.php" method="POST" target="_blank">
<input type="submit" name="submit" value="Submit" onclick="document.location.href='home.php';"/>
</form>
Although I'm not really sure why you want to do this, it seems that mixing up the change of the document.location.href while the submit event is happening generates some kind of conflict.
In order to separate those two I came up with the following approach by postponing the setting of document.location.href using setTimeout. Here's a working DEMO.
HTML
<form action="test.php" method="POST" target="_blank">
<input type="button" id="submit-btn" value="Submit" />
</form>
JS
$('#submit-btn').on('click', function () {
setTimeout(function () { document.location.href = 'test.php'; }, 100);
$("form").attr('target', '_blank');
$("form").submit();
});
I would set the attributes like:
attr("action", "location.php");
Then edit the onclick like window.location.href
Don't know if this is what you wanted and if helped
I am trying to learn a little Javascript. I wrote the code below expecting to see the contents of the text box written to the page when the button is clicked. This does happen but very briefly as the page seems to redraw back to it's original values.
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<script>
function getData() {
var x = document.getElementById("name").value;
document.getElementById("space").innerHTML = x;
}
</script>
</head>
<body>
<h1>Playing with Javascript and Forms</h1>
<form id="myForm">
Name: <input type="input" id="name">
<input type="submit" value="Submit" id="submit" onClick = "getData()">
</form>
<p id="space"></p>
</body>
</html>
It does this because the form is being fully submitted and the page reloads. To stop it, change the onclick to:
onClick = "return getData()"
and your function to return false with:
function getData() {
var x = document.getElementById("name").value;
document.getElementById("space").innerHTML = x;
return false;
}
jsFiddle example
This will prevent the form from submitting and allow your code to run.
Your form submits. To avoid it try adding return false at the end of "getData" function and change onClick = "getData()" to onClick = "return getData()"
Demo: http://jsfiddle.net/6gAkL/
Your javascript seems to be working fine.
The problem is after the JS is ran the HTML kicks in and submits the form POSTing it's data to the POST target (None as currently set).
If you don't want the form to be posted when you click that input you probably should remove the: type="submit"
Edit:
This would be most appropiate:
< input type="button" value="Submit" id="submit" onClick = "getData()" >
I had to take my working example here. For some reason, it does not work as easily as the initial example.
New Example
Suppose I want to see M5s every time the page loads. So how can I fire the same query for M5 every time the page load?
I copied the critical part here:
<body>
<div id="search">
<form onSubmit="makeRequest(1); return false;" style="margin: 2px; padding: 2px; font-size: 1.2em;">
<input id="searchinput" type="text" name="tags" size="20" value="">
<input id="searchbutton" type="button" onClick="makeRequest(1);" value="Create VideoWall"><br />
...
</form>
</div>
Response to the idea in MiffTheFox's and Tom's reply
So I added the command before the form above:
<body onload="document.getElementById('myform').submit();">
However, the wall stays black. It should be full of M5s.
Emerged problem to the initial Question: Why does it not work? Why does the wall stay black?
makeRequest asked by Tom
function makeRequest(page){
startrequest = 0;
for(i =1; i < 4; i++){
clearList('ul'+i);
var tags = encodeURI(document.getElementById('searchinput').value);
if(i == 1 || i == 2){
quantity = 45;
}
if(i == 3){
quantity = 36;
}
insertVideos('ul'+i,'search',tags,quantity,startrequest);
startrequest = startrequest + quantity;
}
}
Please, see the url at the top and press CTRL+U to see the code.
Well, there´s on load attribute inside the body element
<body onload = "javascript:doSubmit()">
...
</body>
<script>
function doSubmit(){
var form = document.getElementById("myform");
if (form !=null)
form.submit();
}
</script>
Also, you could add javascript at the end of your html page. This is not as portable as the first option
<html>
<body>
<form id="myForm" ...>
...
</form>
<script>
//this executes when the page finishes loading
var form = document.getElementById("myForm");
if (form!=null) form.submit();
</script>
</body>
</html>
First add an ID to the form, then add an onLoad handler that submits it.
<body onload="myForm.submit();">
<form id="myForm" name="input" action="form_action.asp" method="get">
...
Not sure what you're trying to accomplish, but you can certainly use jQuery to do
$(document).ready( function() {
$("#submitButton").click();
});
The problem is ensuring that this only happens the first time the document is submitted; you will need to keep track of that on the server-side and remove the submission code after the first time.
A better approach is probably to compose your HTML on the server side so that whatever initial state you want to display is displayed. Many web applications have a form to submit a query of some kind (say, a search) but start with some initial sample result below the form. This is just created on the server side before loading, not by "pre-submitting".