Simulate click with jQuery

Jonathan Greenberg
Jonathan Greenberg used Ask the Experts™
on
I'm trying to simulate a mouse click in a text field when clicking on an <a> element with a class but no id. But what I've written isn't doing it:

$( '.ui-state-default' ).click(function() {
      $( '#jform_extra_3' ).click();
});

So, the idea is that clicking on <a class="ui-state-default">link</a>
should result in a click in <input type="text" id="jform_extra_3">.

Am I close?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Ryan ChongSoftware Team Lead

Commented:
try this instead:

<a href="#" class="ui-state-default">link</a>

Open in new window

Author

Commented:
Thanks. That's actually the way it already is - I was just trying to show the relationship between the elements and the class and id.

Is my jQuery script written correctly to accomplish this? That's really what I'm looking to know.
Ryan ChongSoftware Team Lead

Commented:
Is my jQuery script written correctly to accomplish this?
depends on where you added the script of .click(function() ...), which you must load it when your page is loading.

this sample working fine for me:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript">
      $(function(){

      $( '.ui-state-default' ).click(function() {
      $( '#jform_extra_3' ).click();
      });

      $('#jform_extra_3').click(function(){
      alert("hello world");
      });
      
      });
    </script>
  </head>
  <body>
    <form>
      <a href="#" class="ui-state-default">link</a>
      <input type="text" id="jform_extra_3"></input>
    </form>
  </body>
</html>

Open in new window

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Ryan, thanks so much for taking the time to put that together, but it's not working for me at all.

I've posted it to one of my sites: https://dev.insuranceforstudents.com/_click.html

I'm not getting the alert, and the text field is not getting focus. Do you get different results?
Ryan ChongSoftware Team Lead

Commented:
try change:

http://code.jquery.com/jquery-3.2.1.js

to:

https://code.jquery.com/jquery-3.2.1.js
Ryan ChongSoftware Team Lead

Commented:
you can go to the browser's "Inspect" feature for debugging.

Untitled.png

Author

Commented:
Yes, thanks, of course.

But I'm still not getting a click simulation in the text field. I've eliminated the alert, but still no focus to the text field. That's my goal.

Author

Commented:
I hope I'm being clear. I want to click on the link, and have the cursor appear in the text field.
Software Team Lead
Commented:
I want to click on the link, and have the cursor appear in the text field.
using my example, try:

<script type="text/javascript">
      $(function(){

      $( '.ui-state-default' ).click(function() {
      $( '#jform_extra_3' ).click();
      });

      $('#jform_extra_3').click(function(){
      alert("hello world");
      $('#jform_extra_3').focus();
      });

      });
    </script>

is this what you trying to do?
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Are you really wanting to simulate a click or are you just wanting to set focus. The code in the page you posted has the click event for the textbox commented out so it will never fire.

//Just focus:
$('.ui-state-default').click(function(e) {
    e.preventDefault();
    $('#jform_extra_3').focus();
});

Open in new window

Author

Commented:
Chris, thanks, but click is what I'm after. The only thing I mean to comment out was the "hello world" alert.

My actual reason for this is that I'm using a popup calendar in a date field, but the date data doesn't get submitted with the rest of the form (and therefore fails verification) unless I click in the field after selecting the date in the popup calendar. I'm therefore automating the final click. It's possible that focus would have the same effect, but click is what I know works.

The last code posted by Ryan does the trick.

Author

Commented:
Ryan, thanks, that last bit of JavaScript does it.

All good here, but just wondering - if you have a few more minutes to spend on this (and if not, no worries - I'm grateful for what you've already done).

Is there some graceful way to fold the 2nd bit of code into the first? In other words, what we now have is:

$(function() {

	$( '.ui-state-default' ).click(function() {
		$( '#jform_extra_3' ).click();
	});

	$( '#jform_extra_3' ).click(function() {
		$( '#jform_extra_3' ).focus();
	});

});

Open in new window


I've tried placing the 2nd function inside the 1st, but it doesn't work:

$(function() {

	$( '.ui-state-default' ).click(function() {
		$( '#jform_extra_3' ).click(function() {
			$( '#jform_extra_3' ).focus();
		});
	});

});

Open in new window


Can it be written like this with some adjustment that I'm not catching, or is this just the wrong way to go?

Thanks, and like I said, if you're too busy to answer this, no worries!
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
You can wrap it up in one function call similar to what you have. Currently what you have basically says ' When I click the ui-state element, bind a new click handler to the jform_extra element. You still need to trigger that click:

$('.ui-state-default').click(function() {
    $('#jform_extra_3').click(function() {
        $( '#jform_extra_3' ).focus();
    });
    $('#jform_extra_3').click();
});

Open in new window

Although, if you already have the pop-up bound to the input, then you may not need to bind a new click event to it as it may already have one. In which case, you'd just fire off the click event directly:

$('.ui-state-default').click(function() {
    $('#jform_extra_3').click();
});

Open in new window

Author

Commented:
Thanks, Chris - that's fantastic!

Author

Commented:
Thanks to you both!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial