• 0

[Javascript] How to simulate a click on Firefox?


Question

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

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

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

<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

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

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

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

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

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

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.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Oddly, there was a time that UFC games were culturally relevant, largely because of the graphics and gameplay that was different than the norm. But it seems like as the sport grew in popularity, gaming outlets stopped talking about the games.
    • Microsoft Edge 149.0.4022.69 by Razvan Serea Microsoft Edge is a super fast and secure web browser from Microsoft. It works on almost any device, including PCs, iPhones and Androids. It keeps you safe online, protects your privacy, and lets you browse the web quickly. You can even use it on all your devices and keep your browsing history and favorites synced up. Built on the same technology as Chrome, Microsoft Edge has additional built-in features like Startup boost and Sleeping tabs, which boost your browsing experience with world class performance and speed that are optimized to work best with Windows. Microsoft Edge security and privacy features such as Microsoft Defender SmartScreen, Password Monitor, InPrivate search, and Kids Mode help keep you and your loved ones protected and secure online. Microsoft Edge has features to keep both you and your family protected. Enable content filters and access activity reports with your Microsoft Family Safety account and experience a kid-friendly web with Kids Mode. The new Microsoft Edge is now compatible with your favorite extensions, so it’s easy to personalize your browsing experience. Microsoft Edge 149.0.4022.69 changelog: Fixed an issue that caused the Downloads dialog to continue displaying the "Keep/Delete" prompt for .rdp files after the download completed. Stable channel security updates are listed here. Download: Microsoft Edge (64-bit) | 193.0 MB (Freeware) Download: Microsoft Edge (32-bit) | 170.0 MB Download: Microsoft Edge (ARM64) | 188.0 MB View: Microsoft Edge Website | Release History Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Save 44% on Intuit QuickBooks Desktop Pro Plus 2024 (1 User for 1-Year) by Steven Parker Today's highlighted deal comes via our Apps + Software section of the Neowin Deals store, where for only a limited time, you can save 44% on Intuit QuickBooks Desktop Pro Plus 2024 (1 User + 1 Year) for Windows. Take control of your business finances with Intuit® QuickBooks® Desktop Pro Plus 2024 Lifetime Activation for Windows. This powerful accounting software simplifies bookkeeping, expense tracking, invoicing, and financial management—all in one intuitive platform. Designed for small business owners, freelancers, and accountants, QuickBooks® Desktop Pro Plus 2024 ensures accuracy, efficiency, and seamless transaction tracking. Stay organized, save time, and manage your finances with confidence—no subscriptions, just lifetime access! Financial and business management Comprehensive Financial Management: Gain access to a full suite of features designed to handle everything from creating invoices & managing expenses to generating reports and tracking sales. Enhanced Reporting Tools: Generate professional reports & insights to make informed financial decisions and help you stay ahead of your business goals. Job Costing: Track the profitability of specific jobs or projects. Fixed Asset Management: Track the depreciation & value of fixed assets. Customer & Vendor Management: Organize information, streamline communication & enhance customer relations. Sales Order Processing: Create & manage sales orders from start to finish. Purchase Order Processing: Create & manage purchase orders to streamline vendor payments. Improved Inventory Management: Enhanced features for tracking inventory levels & costs. Automation, integration, and support Enhanced Bank Feeds: Web Connect (manual QBO imports), works on all licenses for easier bank reconciliation Time Tracking: Track employee time to accurately calculate payroll and project costs Easy Data Import: Quickly transfer financial data from Excel or older QuickBooks® versions Why choose Intuit® QuickBooks® Desktop Pro Plus 2024? Effortless Installation: Quick and easy setup with step-by-step guidance. No Hidden Costs: One-time payment—no subscriptions or recurring fees. Direct Official Download: Access the software securely from the official QuickBooks® website. Stay Up to Date: Get the latest updates and features for optimal performance. Multilingual Support: Available in multiple languages to suit your needs. Lifetime Access: A one-time purchase means no ongoing costs. IMPORTANT: Cloud integrations (QuickBooks Payments, TurboTax, and Online logins) are NOT included. Good to know: Length of access: lifetime Redemption deadline: redeem your code within 30 days of purchase Access options: Windows Max number of device(s): 2 (for 1 user only and can't be used simultaneously) Version: 2024 (United States) 64-bit Available to both NEW and EXISTING users For US customers only Updates included An Intuit QuickBooks Desktop Pro Plus 2024 (1 User + 1-Year) for Windows: Lifetime License normally costs $536, but it can be yours for just $299.99 for a limited time, a saving of $236. There are also other plans available. For specifications, and license info please click the link below. Get Intuit QuickBooks Desktop Pro Plus 2024 for just $299.99 This is a time limited deal For US customers only. Support queries If you have queries or need support for any of the Neowin Deals, please use the contact form here. Neowin Deals are managed and sold by StackCommerce who represent Neowin on an affiliate basis. Why we post these deals We post these because we earn commission on each sale so as not to rely solely on advertising, which many of our readers block. It all helps toward paying staff reporters, servers and hosting costs. So for those that keep moaning and complaining, be thankful we're still online for you to even do that. Other ways to support Neowin Whitelist Neowin by not blocking our ads Create a free member account to see fewer ads Make a donation to support our day to day running costs Subscribe to Neowin - for $14 a year, or $28 a year for an ad-free experience Disclosure: Neowin benefits from revenue of each sale made through our branded deals site powered by StackCommerce.
    • AFAIK you shouldn't be getting a consent popup at all from Canada, so I think it is to do with a VPN or private/secure DNS.
    • From what I see it's only for Insider - preview builds. Not for everybody. So...
  • Recent Achievements

    • Week One Done
      agatameier earned a badge
      Week One Done
    • One Month Later
      agatameier earned a badge
      One Month Later
    • Week One Done
      ssd21345 earned a badge
      Week One Done
    • Contributor
      MarkHughes4096 went up a rank
      Contributor
    • Dedicated
      jordanspringer earned a badge
      Dedicated
  • Popular Contributors

    1. 1
      +primortal
      507
    2. 2
      +Edouard
      175
    3. 3
      PsYcHoKiLLa
      139
    4. 4
      ATLien_0
      90
    5. 5
      Steven P.
      76
  • Tell a friend

    Love Neowin? Tell a friend!