Simulate click with jQuery

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?
Jonathan GreenbergAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ryan ChongCommented:
try this instead:

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

Open in new window

0
Jonathan GreenbergAuthor 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.
0
Ryan ChongCommented:
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

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Jonathan GreenbergAuthor 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?
0
Ryan ChongCommented:
try change:

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

to:

https://code.jquery.com/jquery-3.2.1.js
0
Ryan ChongCommented:
you can go to the browser's "Inspect" feature for debugging.

Untitled.png
0
Jonathan GreenbergAuthor 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.
0
Jonathan GreenbergAuthor Commented:
I hope I'm being clear. I want to click on the link, and have the cursor appear in the text field.
0
Ryan ChongCommented:
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?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Chris StanyonWebDevCommented:
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

0
Jonathan GreenbergAuthor 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.
0
Jonathan GreenbergAuthor 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!
0
Chris StanyonWebDevCommented:
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

0
Jonathan GreenbergAuthor Commented:
Thanks, Chris - that's fantastic!
0
Jonathan GreenbergAuthor Commented:
Thanks to you both!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.