How can I make an HTML form be submitted as soon as the page loads, and sent the form a couple of times?

Question

0.00/5 (No votes)

See more:

I want to make the page submit the form as soon as it loads.This is how the code looks right now. I have tried to use a click function to click on the 'submit form' button. There is another function that gives that activates the click function at a given interval and stops after a given numeber of intervals. The problem is that the page does submit the form when it loads, but it never stops.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>


</head>
<body>

<input type="text" value="0" id="count_id">

<form   method="post" >
    {% csrf_token %}
    {{ form2 }}
<button id="sebutton"   type="submit">Submit</button>

</form>



<script>
function myFunction() {
	
	var data = document.getElementById("count_id").value;
	var  datacount = (parseInt(data) + 1);
	document.getElementById("count_id").value = datacount;	
	document.getElementById("sebutton").value = "Clicked";
	
}


var timesRun =0;
var interval = setInterval(function(){
    timesRun += 1;
    if(timesRun === 10){
        clearInterval(interval);
    }	
document.getElementById("sebutton").click();
}, 1000);
</script>



</body>
</html>

What I have tried:

I have figured out that the button of the form is not calling my function to update the number of times the button was cliced.
That is why I have tried to insert 2 other buttons. One would press on 2 other buttons:the button of the function and the button that calls the intervl function, but that didn't work either. The code is shown bellow:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>


</head>
<body>

<input type="text" value="0" id="count_id">
<input type="button" value="Click Me" id="button1" onclick="twoFunction()">
<input type="button" value="Click Me" id="button3" onclick="myFunction()">
<form   method="post" >
    {% csrf_token %}
    {{ form2 }}
<button id="button2"   type="submit">Submit</button>

</form>



<script>
function  twoFunction(){
  	
document.getElementById("button3").click();

document.getElementById("button2").click();
}
function myFunction() {
	
	var data = document.getElementById("count_id").value;
	var  datacount = (parseInt(data) + 1);
	document.getElementById("count_id").value = datacount;	
	document.getElementById("button3").value = "Clicked";
	
}


var timer = (functionseb){
    var link = false;
    setTimeout(functionseb(){ link = true; }, 5000);

    return functionseb() {
       alert(link);
    };
}());


var interval = setInterval(function(){
   
    if(link = true ){
        clearInterval(interval);
    }	
document.getElementById("button1").click();
}, 1000);
</script>



</body>
</html>

Where did I go wrong?
Any help is really appreciated.

Posted 21-Apr-22 0:03am

sebastian m 2022

Updated 21-Apr-22 23:07pm

v4

Add a Solution

Comments

Chris Copeland 21-Apr-22 6:09am

This code that you've submitted looks incomplete and incoherent. Can you use the Improve question button to properly submit any code you're using, and also use the <pre> tag to correctly format the code so it's more readable? I can't see any code there for the actual form itself.

sebastian m 2022 21-Apr-22 11:35am

Thank you for pointing that out. I am a newbie. I have now uploaded properly the code I wrote.

gggustafson 21-Apr-22 13:18pm

Have you looked into window.onload?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Accepted Answer · 2022-04-21T23:07:00

To make a form submit immediately your best bet is to bind a function to when the document has finished loading the DOM (HTML elements) and submit the form then:

JavaScript

document.addEventListener('DOMContentLoaded', function () {
  const button = document.getElementById('sebutton');
  button.click();
});

But I will also say that from looking at the code you're provided, I'm not sure what it is you're trying to achieve. If you're expecting the page to do some "counting" (incrementing a number when the form is submitted) then it's not going to work, once a form is submitted (without overriding the onsubmit event) then the page JS is going to stop working and the page will navigate. Just thought I'd mention this just in case!