• 0

[Javascript] How to simulate a click on Firefox?

Asked by Bazenga,

 Share

Question

Experienced

Bazenga

Posted
Posted

Hello,

I need to click a button using Javascript. I searched the Internets and I found the following code:

	<script type="text/javascript">
		function buttonClick() {
			if (document.getElementById('send').dispatchEvent)
			{
				var mine = document.createEvent("MouseEvents");
				mine.initEvent("click", true, true);
				document.getElementById('send').dispatchEvent(mine);
			}
			else
			{
				document.getElementById('send').click();
			}
		}
	</script>

//body

<body onload="buttonClick();" onunload="buttonClick();">
</body>

At first, I was using: document.MyForm.Button.click(), it turned out that it only works with IE and throws an error in Firefox.

The above code is still working with IE, but not in Firefox and it doesn't throw an error or anything like that. It's like it's not there at all.

Any help is appreciated, thanks.

15 answers to this question

Recommended Posts

  • 0
Grand Master

+Nik Louch Subscriber²

Posted
  • Subscriber²
Posted

Do not put the code you want in the button click event, put it into a function. Then call that function from the click - and you can call the function from whenever else you want too.

Or is there a situation that this would not allow?

  • 0
Experienced

Bazenga

Posted
  • Author
Posted

I'm not sure if I understood you correctly. The problem is that the button must be clicked programmatically. I have a form that I need to submit at runtime, and it requires that "button click". I'm trying to simulate a user clicking that button.

Could you give me an example please?

  • 0
Grand Master

+Nik Louch Subscriber²

Posted
  • Subscriber²
Posted 

<input type="button" onclick="alert('click')" />

Would become

function doClick(){
alert('click');
}

<input type="button" onclick="doClick()" />

Or even... If you want the sender to be available...

function doClick(sender){
alert(sender);
}

function simulateClick(objectId){
objMyButton = document.getElementById(objectId);
doClick(objMyButton);
}
<body onload="simulateClick('myButton')">
<input id="myButton" type="button" onclick="doClick(this)" />

  • 0
Experienced

Bazenga

Posted
  • Author
Posted

Thanks for your input, but that's not the problem I'm facing. The main issue is doing the click itself on the button, and not "onclick" or whatever. onclick implies that the button was clicked. I need to do the clicking before, right?

<body onload="simulateClick('myButton')">

That's not a click simulation, you're just calling alert(). I need a something like alert() that actually clicks the buttom (submitting the form).

  • 0
Grand Master

+Nik Louch Subscriber²

Posted
  • Subscriber²
Posted

Yes and what I am saying is this:

Why do you need the physical button to be clicked?

Surely when clicked you want "something" to happen? Fine...

But shift this "something" out, and call it when the button is clicked.

You can then call it at another time also - simulating the same action as the button being clicked...

OR

Look into using jQuery? I believe this may help: http://stackoverflow.com/questions/343811/...ry-click-method

  • 0
Experienced

Bazenga

Posted
  • Author
Posted

I really appreciate your help, really. However :p, all I want is to click the button, nothing more. There is no logic, there are no routines ... nothing. It's just a matter of click that damned button !

<form id="MyForm" name="MyForm" method="post" action="https://linkgoeshere" enctype="multipart/form-data">
<input field><input field><input field>

<input type="submit" value="login" name="send" id="send" />
</form>

That's the form I have, and that's the button that must be clicked without the user actually clicking it.

Do you have *any* idea why Firefox does not allow this: document.MyForm.send.click() ? It's so simple, it works on IE but not on firefox ;(.

  • 0
Experienced

Bazenga

Posted
  • Author
Posted

I'm not sure why, but if I do form.submit() the user will be redirected to the actual form, with the fileds all filled up with the information, but he still have to click login.

The application I have at hand tried to hide all this overhead from the user. So he goes to our application, clicks a link (for example, to a specific provider), and continues without him logging in to every single provider.

For that reason, we submit that form (and all other forms) at runtime. There are some forms that works perfecty with the submit() function, and there are forms that oblige you to click the button. That's why I need to know how to click that button, or actually simulate the click as if the user actually clicked it.

Does that make any logical sense to anyone?

  • 0
Experienced

Bazenga

Posted
  • Author
Posted

Okay, lets take a form that submits a search term to Google.

<body onload="gForm.submit();">
	 <form name="gForm" method="get" action="http://www.google.com/search?hl=en&source=hp&aq=f&oq=&aqi="><input type="hidden" name="q" value="test" />
	 </form>
 </body>

That works perfectly fine, when you visit that page, you'll get redirected to Google with "test" as your search term.

I have almost the same forms, the information are coming from the database (username, password .. etc ..). As you can see, the form works fine with the submit() function. That's not the case when you have HTTPS.

I know that the form above works with the submit, but lets do it with a button, shall we?

<body>
	 <form name="gForm" method="get" action="http://www.google.com/search?hl=en&source=hp&aq=f&oq=&aqi="><input type="hidden" name="q" value="test" />
		 <input type="submit" value="submit" name="send" id="send" />
	 </form>
 </body>

How do I submit that form by clicking the button with Javascript?

If we did this:

<body[u][b] onload="gForm.send.click();"[/b][/u]>
	 <form name="gForm" method="get" action="http://www.google.com/search?hl=en&source=hp&aq=f&oq=&aqi="><input type="hidden" name="q" value="test" />
		 <input type="submit" value="submit" name="send" id="send" />
	 </form>
 </body>

It WILL work, but only in IE. Firefox throws an error.

I need to find a way to do it for both IE and Firefox.

  • 0
Grand Master

Antaris Veteran

Posted
  • Veteran
Posted

I'd recommend using JQuery, as it adds a nice transparency layer over the browser, so the same function call in JQuery will operate fine on both IE, Firefox, etc. Once you have referenced the JQuery library, do something like this:

$(function() {
  $("input.send").click);

Or, to just submit the form:

$(function() {
  $("form").submit();
});

The problem you will be seeing is that the click and submit actions are very different. A click event in javascript does not action a form, it literally is for clicking on the physical button. A submit event will actually do the form post.

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Politically funny images of the World

      By snowy owl · Posted

      I would love to see Musk's face! 🤣🤣🤣
    • UK government trial reveals Microsoft 365 Copilot's surprising impact on daily work

      By fingletmein · Posted

      I think each AI option has their ups and downs. For Copilot, I find it more personable in how it talks compared to GPT & Gemini. I also appreciate the open ended questions it often provides at the end of its responses to keep the conversation going.
    • Microsoft offers free access to AI video creation with Bing Video Creator

      By pradeepviswav · Posted

      Microsoft offers free access to AI video creation with Bing Video Creator by Pradeep Viswanathan Two years ago, Bing Image Creator became one of the first major online services that allowed users to create images from text using OpenAI’s DALL-E model. Today, Microsoft is introducing Bing Video Creator, powered by OpenAI’s Sora, allowing users to create videos with text prompts. Despite announcing Sora last year, OpenAI has not been able to expand its availability to millions of ChatGPT users due to huge AI infrastructure requirements. It is still only available to ChatGPT Pro subscription users, which costs about $200 per month. Recently, Google announced its Veo 3 video generation model, which performs significantly better than OpenAI’s Sora, to all Gemini paid subscribers, making video generation accessible to even Gemini Pro subscribers, which costs just $20 per month. Now, Microsoft is democratizing access to video generation models by making Bing Video Creator free for all Bing users. Bing Video Creator is rolling out today globally (excluding China and Russia) on the Bing Mobile App, and it will be coming soon to the Bing desktop experience within Copilot Search. Bing Video Creator users will have the ability to choose between Fast and Standard generation speeds. Each user will have 10 Fast creations; following that, users can redeem 100 Microsoft Rewards points for each Fast creation or continue with Standard creation speeds. Once you have downloaded the Bing mobile app, here’s how you can access the Video Creator feature: Open Video Creator within the Bing Mobile app by clicking on the menu in the bottom right corner and selecting “Video Creator.” Just type in a text description of the video you want to create in the prompt box. Once the prompt text is ready, just tap “Create.” Or you can also just type directly into the Bing mobile app search bar "Create a video of..." to create a video. You’ll receive a notification when your video is ready to view. If required, you can also download the video or share it via social media or email. You will also have the ability to copy a direct link to the video for easy sharing elsewhere. Microsoft will be storing the generated videos for up to 90 days in your account for easy access later. Microsoft noted that the Bing Video Creator videos are 5 seconds long and can be created only in 9:16 format for now. Microsoft will be adding the 16:9 format soon. When you are waiting for your video to be created, you can also queue up another two videos. Once one of the slots becomes available, you can add another one to the queue. When Bing Video Creator becomes available on desktop, you can visit Bing.com/create for both image and video creation needs.
    • AMD 9060 XT performance benchmarks vs Nvidia 5060 Ti, 5060, AMD 9070 XT, 7600 XT, leaks

      By hellowalkman · Posted

      AMD 9060 XT performance benchmarks vs Nvidia 5060 Ti, 5060, AMD 9070 XT, 7600 XT, leaks by Sayan Sen AMD is preparing to launch the RX 9060 XT next and it will be available in two variants, one with 16 GB VRAM and another with half of that at 8 GB. The company publicly defended the latter explaining how it felt there is still a huge market for it as many users do not actually need more than that. We recently wrapped up our review of the AMD Radeon 9070 series with the RX 9070 scoring a 9 out of 10 for AI testing and 7.5 out of 10 in gaming. If you read our reviews you will see that the performance of the is decent for the price but it is definitely more efficient than its XT counterpart. Thus we already have a fairly good idea of how it performs. With the RX 9060 XT launch scheduled for June 5 later this week, reviewers are starting to test the GPU. As such, one such review has accidentally leaked early and it has revealed the performance of the RX 9060 XT variant against the likes of AMD's own 9070 series, 7700 XT, 7600 XT, as well as Nvidia's RTX 5060 Ti, 5060, and more. On average at 1440p, the 9060 XT 16 GB model appears to be a bit slower than the 7700 XT as well as Nvidia's 5060 Ti 16GB. Interestingly though the Radeon GPU does seem to be offering better minimums so maybe we could see a smoother gaming experience overall despite a lower average. AMD says that it is expecting better than 5060 Ti 8GB performance with the 9060 XT 16 GB. The former has an MSRP of $379 while the latter is priced $349. Versus the $299 GeForce 5060 (8GB), the 9060 XT 16 GB is about 10% better but the minimums are a whopping 43% higher. AMD's 9060 XT is also showing excellent performance in case of ray tracing (RT) as you can see in Cyberpunk 2077 above where it is giving comparable throughput as the 7800 XT and is miles better than its preceeding 7600 XT with 63% boost. We see a similar situation in Black Myth: Wukong as well which is another RT heavy game. To understand how AMD achieved the ray tracing gains on RDNA 4, you can read our architecture overview article here. Source and images: BasedDaemonTargaryen (Reddit)
    • Politically funny images of the World

      By snowy owl · Posted

  • Recent Achievements

    • Week One Done
      Nullun earned a badge
      Week One Done
    • First Post
      sultangris earned a badge
      First Post
    • Reacting Well
      sultangris earned a badge
      Reacting Well
    • First Post
      ClarkB earned a badge
      First Post
    • Week One Done
      Epaminombas earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      149
    2. 2
      Xenon
      122
    3. 3
      ATLien_0
      122
    4. 4
      snowy owl
      99
    5. 5
      +Edouard
      95
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!