Fire button click via JavaScript

Question

I need to 'click' one button using JavaScript, when the user clicks another button.

In Chrome on Mac, the following works fine. However, in Safari on Mac, clicking the button simply reloads the current page, rather than triggering the expected behaviour.

JS

$( 'document' ).ready( function() {
    var $myForm = $('#my-form');
    $('#button-fake').on('click', function(){
        console.log("FAKE CLICKED");
        if ($myForm[0].checkValidity()){
            console.log("FORM VALID");
            $('#button-real').click();
            console.log("FORM SUBMITTED");
        }
    });              
});

HTML

<input type="submit" id="button-fake" value="Fake button" />

<input type="submit" id="button-real" value="Real button" />

PS: Not my idea, I just need to get it working.

Why can't you extrapolate the code to a common function and call that? — ChatterOne
– ChatterOne, Commented Mar 1, 2019 at 9:57

brk · Accepted Answer · 2019-03-01 09:59:47Z

2

You may need to add e.preventDefault();

var $myForm = $('#my-form');
$('#button-fake').on('click', function(e) {
  e.preventDefault();
  console.log("FAKE CLICKED");
  if ($myForm[0].checkValidity()) {
    console.log("FORM VALID");
    $('#button-real').click();
    console.log("FORM SUBMITTED");
  }
});

$('#button-real').on('click', function(e) {
  console.log('button-real clicked')

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='my-form'>
  <input type='text' required>
  <button type='submit' id='button-fake'>Submit</button>
  <button type='button' id='button-real'>Real</button>

</form>

answered Mar 1, 2019 at 9:59

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Over a year ago

Just realised: If I add e.preventDefault(), it no longer triggers the HTML 5 form validation messages. So that's not an option

JensV · Accepted Answer · 2019-03-01 09:56:48Z

1

The button will trigger a form submit. The form submit will reload the page. To prevent this, call preventDefault().

$( 'document' ).ready( function() {
        var $myForm = $('#my-form');
        $('#button-fake').on('click', function(e){
                e.preventDefault(); // <- This
                console.log("FAKE CLICKED");
                if ($myForm[0].checkValidity()){
                        console.log("FORM VALID");
                        $('#button-real').click();
                        console.log("FORM SUBMITTED");
                }
        });              
});

answered Mar 1, 2019 at 9:56

JensV

4,6692 gold badges22 silver badges50 bronze badges

3 Comments

Ben Over a year ago

Thank you, I completely missed that! PS: Same answer as @brk, but more explanatory detail, therefore I am accepting this solution.

Ben Over a year ago

Just realised: If I add e.preventDefault(), it no longer triggers the HTML 5 form validation messages. So that's not an option.

JensV Over a year ago

I don't feel there is a way to actually circumvent that... You could try replace the HTML5 validation with a javascript based one

Collectives™ on Stack Overflow

Fire button click via JavaScript

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related