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".
Related
(Question edited for clarity and updates). I am building a flask app game in which the user inputs a guess in the web browser, the guess is checked on the back end (with python), and then the user is told if the guess is correct or incorrect. I also have some JavaScript running to display the previous guesses on the page, using local storage. These two code snippets are interfering with each other. In my play.html, I have:
<form action="/play" method ="POST">
<div class = "form-group">
<label>This is the input</label>
<label>
<input class ="form control" type="text" name="guess" placeholder="Type guess!">
</label></div>
<div class="container>"><button type="submit" id="submit">Check Answer</button></div>
Then, in app.py, I have:
# gets guess and checks against answers, flashes appropriate message
if request.method == "POST":
req = request.form
guess = req.get("guess")
if guess == ans.next():
flash("Correct", "success")
return redirect(request.url)
flash("Incorrect", "secondary")
return redirect(request.url)
Then, in my display_guesses.js, I have (along with a lot of other stuff for storing and displaying, which has no problems):
const input = document.getElementsByName('guess');
form.addEventListener('submit', function () {
displayGuesses.push(input[0].value);
localStorage.setItem('my_guesses', JSON.stringify(displayGuesses));
liMaker(input[0].value);
input[0].value = "";
form.submit();
});
In theory, this should display the guesses after they are submitted (and it does under certain conditions, see below).
The problem is that only one of these things can work at a time. If I run the code as-is, then the guesses get displayed on the page, but the answer-checking mechanism fails. If I remove the code for displaying guesses, then the answer-checking mechanism works.
It appears that there is some kind of conflict between having JavaScript and Python both trying to do something with the user's guess on the form. Any ideas on how to solve? I am very new to coding and building the plane as I fly it.
As already mentioned, python delivers the page and the browser receives and displays it. From then on, JavaScript runs and executes your instructions.
The problem arises in my opinion in your event listener for the submit event. You catch this event, but don't pay attention to the fact that the form is still submitted by default to the server. Now the browser tries to execute your code on the one hand and to send the form on the other hand. Take a look at the preventDefault() command to prevent the default behavior and run your code.
form.addEventListener('submit', function (event) {
event.preventDefault();
// ...
});
The second problem is that you try to change the content of the page and then submit the form, which results in a complete reload of the page, causing the post-injected JavaScript content to disappear. Don't add the saved guesses until the page reloads.
A possible solution could look like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Play</title>
</head>
<body>
<form method="post">
<div>
<label for="guess">This is the input</label>
<input type="text" name="guess" id="guess" placeholder="Type guess!" />
</div>
<button type="submit">Check Answer</button>
</form>
<ul id="guesses"></ul>
<script type="text/javascript" src="{{ url_for('static', filename='display_guesses.js') }}" defer></script>
</body>
</html>
(function() {
let elem, guesses = JSON.parse(localStorage.getItem('my_guesses')) || [];
elem = document.getElementById('guesses');
elem.innerHTML = guesses.map(guess => `<li>${guess}</li>`).join('');
elem = document.querySelector('form');
elem.addEventListener('submit', function(evt) {
evt.preventDefault();
const guess = this['guess'].value.trim();
if (guess != '') {
guesses.push(guess);
localStorage.setItem('my_guesses', JSON.stringify(guesses));
this.submit();
}
});
})();
At some point you will wonder how to remove the saved data from memory and probably run into another problem. You store your guesses inside the client. The server is the one who decides whether the assumption was correct. So at some point the server has to tell the client when to move on to a new round and discard the previous guesses. In order to solve this problem, you have to rethink your application structure and consider, for example, whether the page really needs to be reloaded or whether the storage location is the right one.
Detlef's solution above seems to work, but so does just making sure that what is inputted in the form is actually being caught; solution below
const form = document.querySelector('form');
const ul = document.getElementById('show_guesses');
const input = document.getElementsByName('guess');
let displayGuesses = localStorage.getItem('my_guesses') ? JSON.parse(localStorage.getItem('my_guesses')) : [];
const liMaker = (text) => {
const li = document.createElement('li');
li.textContent = text;
ul.appendChild(li);
}
form.addEventListener('submit', function () {
displayGuesses.push(input[0].value);
localStorage.setItem('my_guesses', JSON.stringify(displayGuesses));
liMaker(input[0].value);
});
data.forEach(guess => {
liMaker(guess);
});
button.addEventListener('click', function () {
localStorage.removeItem('my_guesses');
while (ul.firstChild) {
ul.removeChild(ul.firstChild);
}
displayGuesses = [];
});
The main thing was deleting the input[0].value=" "; which was passing an answer consisting of nothing to be checked agains what's on the backend.
Play.html, not including a bunch of other code that currently has a "clear guesses" button:
<div class="container">
<form action="/play" method ="POST">
<div class = "form-group">
<label><b>What's on your Bookshelf today?</b></label>
<label>
<input class ="form control" type="text" name="guess" placeholder="Type your guess here!"></label></div>
<div class="container>"><button type="submit" class="btn btn-secondary" id="submit">Check Answer</button></div>
<div class="container">
<p><b>Your Guesses So Far</b></p>
<ul id="show_guesses"></ul>
</div>
(Edited to remove some irrelevant code that is related to other things going on in the app, but not to the question at hand).
Let me Clear what title means:
In my code for a validation purpose of one field dependent on field "t1" I need to auto submit my form once (Just Once). But my below code is submitting it infinite times and I know the reason why its happening.
I guess Reason is everytime the form submits again JS in header runs. Please help me avoid this. Following is my code:
<html>
<head>
<script>
window.onload = function()
{
var f = document.getElementById("CheckForm");
var temp = document.getElementById("CheckForm.t1");
if(f.name == "CheckForm")
{
var temp1 = document.getElementById("t1");
temp1.value = "Task";
}
document.CheckForm.submit();
}
</script>
</head>
<body>
<form name="CheckForm" id="CheckForm" method="Post">
<input type="text" id="t1" name="t1"/>
</form>
</body>
</html>
I tried stopping it using variable like flag and static variables like arguments.callee.count = ++arguments.callee.count || 1 and placing my CheckForm.submit() line in if clause. But nothing worked. Any advice or help is appreciable.
<html>
<head>
<script>
window.onload = function()
{
var f = document.getElementById("t1");
var temp = document.getElementById("CheckForm.t1");
if(f.name == "CheckForm")
{
var temp1 = document.getElementById("CheckForm.t1");
temp1.value = "Task";
}
if(window.location.search=="")document.CheckForm.submit();
}
</script>
</head>
<body>
<form name="CheckForm">
<input type="text" id="t1"/>
</form>
</body>
</html>
Surely your form is more complex than:
<form name="CheckForm">
<input type="text" id="t1">
</form>
That will not submit anything to the server since there are no successful controls (the only control doesn't have a name).
Since the form is just submitting to the same page, you can submit a hidden value like:
<form name="CheckForm">
<input type="text" id="t1">
<input type="hidden" name="hasBeenSubmitted" value="yes">
</form>
Now when the form submits the URL of the new page will include ...?hasBeenSubmitted=yes so you can look for that value in the URL, e.g.
if (/hasBeenSubmitted=yes/.test(window.location.search)) {
// this page loaded because the form was submitted
}
If it exists, don't submit the form again.
So since you are using a post method the easiest way's to handle this is to ubmitted to a new url , however you seem set on keeping the form submitted to the same url in which case is you are using php (or really any other language) you can check if the http request has a post attribute with a value t1
<?php
if(isset($_POST['t1']){
$your_text=$_POST['t1'];
/*do some string checking to make safe and the throw into your database or mdo whatever you please with data
if you wanted to include the ip address of the user you can get a basic and most likely client ip address like so
$ip_address= $_SERVER['REMOTE_ADDR'];
if you are handing a mulitpage form look into php session or similar tech ... cookies is kind of over kill for this scenario
then include a succes page as the form has been submitted
or you could end php with this tag ?> and then have your html and start again with <?
*/
include 'form_submitted.php';
}else{
//this would be the html page that you included in your question and can be handle in same ways as form submitted
include 'my_form.php'
}
?>
Ip address may not be best included as it would stop 2 user from filling out the form if they are in the same LAN for eg. 2 people in same office or same house (if your page is acttual on the worldwide web).
I would take a look at #RobG answer as it he is basically suggesting the same type of thing with a get instead of post
ANyways hope this helps
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()" >
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>
I am a noob to programming, so I'd appreciate any advice from you more knowledgeable folks out there. I am working on a bit of javascript for a web page and I need the javascript to print to that current HTML page, preferably in the div tag I have set up for that purpose. Here's what I have so far:
<html>
<head>
<title>Tardy Reporting</title>
<script src="students.js" type="text/javascript">
</script>
</head>
<body>
<h1>Scan in Student ID</h1>
<form method="POST" name="idForm" onSubmit="getId(parseInt(document.idForm.studentId.value));">
<input type="text" name="studentId" id="studentId"/>
<input type="Submit" name="Submit" />
</form>
<div id="div1"></div>
<p>
</body>
</html>
and my JS file:
var studentNumberArray = [50011234, 50012345, 50013456];
var studentNameArray = ["Mike Simpson", "Greg Pollard", "Jason Vigil"];
var studentLastPeriodArray = ["George Washington", "Darth Vadar", "Obi Wan Kenobi"];
var tardyArray = [0, 0, 0];
function getId(studentId) {
for (i = 0; i < studentNumberArray.length; i++){
if(studentId === studentNumberArray[i]){
tardyArray[i] += tardyArray[i] + 1;
document.getElementById('div1').innerHTML='test';
}
}
}
Mind you, this is just the basic framework, so it's not nearly done yet, but the thing that is bugging me is that it'll go through the code correctly and print it out, but the result only lasts a fraction of a second on my browsers (chromium and firefox). Any help would be appreciated.
Here is an easier/better way to accomplish what you are trying to do
var students = {};
// Add students to object
students[50011234] = { 'id': '50011234', 'name':"Mike Simpson", 'lastPeriod':"George Washington", 'tardy':0 };
students[50012345] = { 'id': '50012345', 'name':"Greg Pollard", 'lastPeriod':"Darth Vadar", 'tardy':0 };
students[50013456] = { 'id': '50013456', 'name':"Jason Vigil", 'lastPeriod':"Obi Wan Kenobi", 'tardy':0 };
function getId(studentId) {
students[ studentId ].tardy += 1;
document.getElementById('div1').innerHTML='test';
}
Also, as pointed out below, you should change your button to not submit if that is not what you are intending to happen:
<form method="POST" name="idForm">
<input type="text" name="studentId" id="studentId"/>
<input type="button" onclick="getId(parseInt(document.idForm.studentId.value));" name="Mark Tardy" />
</form>
The reason why you see it only for a fraction of a second is that you are actually causing a submit. A submit is a full call back to the server which returns the page to its initial status.
To fix this simply make the function call on the onclick event of the button:
<html>
<head><title>Tardy Reporting</title>
<script src="students.js" type="text/javascript"> </script>
</head>
<body>
<h1>Scan in Student ID</h1>
<form method="POST" name="idForm" >
<input type="text" name="studentId" id="studentId" />
<input type="button" onclick="getId(parseInt(document.idForm.studentId.value));" value="submit" />
</form>
<div id="div1"></div>
<p>
</body>
</html>
What do you mean by "result"? It appears that you are setting the innerHTML of div1 to "test" over and over again.
Perhaps you mean to write
document.getElementById('div1').innerHTML += 'test';
Doing this is not efficient and it is preferable you concatenate on a string, or even better, join an array, before assigning the innerHTML.
but the result only lasts a fraction of a second on my browsers (chromium and firefox).
That is because you are submitting the page, so the page gets refreshed. You need to change the button type to button from submit. Also add a onclick to the button and call the js function getId
Forms are a special construct that allows communication with a server:
When a form is submitted, the form data is "POSTED" to a server via an HTTP request.
Typically, the browser displays the server's response as a new web page.
Forms use the action attribute to specify which server page should process the request
In your case, no action is specified, so the form POSTS to the current page, which is equivalent to refreshing the page. This means that all client-side (JavaScript) changes are wiped out, which is why you only see them for a split-second.
To achieve your desired result, change the input type from submit to button:
<input type="button" onclick=".." value="submit" />
Ideally, the student data exists in a database that is manipulated by code on a server. Your form would POST a request that returns an HTML page containing the desired data.
References
HTTP
Forms