Trying to perform a click function when an element appears

Question

Basically I'm working on a site that has a submit button appear after a form is completed. What I want is to create a function that will automatically click the submit button whenever it appears (there's no choice to go backwards and review work so I don't even know why it's there). I'm already using a userscript with Tampermonkey on chrome for this and want to add this final piece to speed things up a little.

So the code for that particular submit button in the html on this site is:

<form style="width:auto;" id="siteform" action="https://www.example.com" method="post">
        <!--
        <input type="hidden" id="numTags" name="numTags" value="< %= numTags %>" />
        <input type="hidden" id="numMaps" name="numMaps" value="< %= current_map_count %>" />
        <input type="hidden" id="numQuestions" name="numQuestions" value="< %= current_question_count %>" />
        <input type="hidden" id="challenge" name="challenge" value="< %= challenge %>" />
        -->
        <input type="hidden" id="assignmentId" name="assignmentId" value="3WSELTNVR4VI8OKXJT4767WDMN3ATT">
        <input type="hidden" id="hitId" name="hitId" value="3H1C3QRA01C1P014N961OWQHFGQCEF">
        <input type="hidden" id="workerId" name="workerId" value="id1">
        <button type="submit">Finished! Click here to submit HIT</button>
    </form>

The closest thing I've been able to find to what I need is using the function

if ($(#'element').is(':visible')){}

Although that is in theory what I want, it doesn't work. For instance I've tried

if ($("button[type='submit']").is(':visible')){
     $("button[type='submit']").click();

}

With no luck. I'm still really new to javascript and jQuery so it may be that my searches aren't turning anything up because I'm still learning the lingo. Any suggestions? Thanks

Ideally you'd submit it right after the logic that shows it. If not possible, there are Observers that are available, but they are not yet fully supported in all browsers. For the time being if you want to work in everything, I believe your best bet is to do some form of setTimeout or setInterval that periodically checks if it's visible and submits if it is. — Taplar, Jan 06 '16 at 03:40
are u already read this post ? http://stackoverflow.com/questions/20487472/jquery-when-element-becomes-visible — ruly anggriawan, Jan 06 '16 at 04:31

score 1 · Answer 1 · answered Jan 06 '16 at 03:39

1

document.getElementById('siteform').submit();

No need for dealing with clicking the button, just use the submit function.

answered Jan 06 '16 at 03:39

Holden Smith

44
4

Just adding that line of code at the end of this script isn't doing anything unfortunately. – DjH Jan 06 '16 at 04:10
@DjH Yea, that line submits the form i believe. It would do it as soon as it's called, so you would need to include it with the trigger that made the button appear. – Holden Smith Jan 07 '16 at 00:32

Esteban Rincon · Answer 2 · 2016-01-06T04:18:46.097

1

I bielieve your problem is not wrapping the js code in the document.ready for Jquery like this :

$(document).ready(function(){
   if ($("button[type='submit']").is(':visible')){ 
     $("button[type='submit']").click();
   }
});

or

$(function(){
   if($("button[type='submit']").is(':visible')){ 
        $("button[type='submit']").click();
   }
});

JSFiddle

Don't forget to add JQuery library to your html page:

<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

edited Jan 06 '16 at 04:18

answered Jan 06 '16 at 03:54

Esteban Rincon

2,040
3
27
44

Have you added the JQuery library ? look at the answer again – Esteban Rincon Jan 06 '16 at 04:16
If you loog at the JSFiddle you'll see that it works. – Esteban Rincon Jan 06 '16 at 04:22

score 0 · Accepted Answer · answered Jan 06 '16 at 04:13

0

you going in the right direction let's see if submitting the form directly works instead of trying to click the button...

$(document).ready(function(){
    var $form = $('#siteform');

    if ($form.find('button[type="submit"]').is(':visible')) {
        $form.trigger('submit');
    }

});

answered Jan 06 '16 at 04:13

Jah

26
2

This worked!!! Would you mind dumbing down the main difference between my code and this line is? " if ($form.find('button[type="submit"]').is(':visible')) { " also thanks! – DjH Jan 06 '16 at 04:27
No problem, the main difference between our scripts is the event type we are using. When you trigger a click event on a button it wont submit the form, because the submit event isn't called. You'll need to first get the form then trigger the submit event. – Jah Jan 06 '16 at 05:49

Trying to perform a click function when an element appears

3 Answers3