How to call a JS function before a jquery button click(click through selector)

Question

I want to call a JS function when a button is clicked and then continue execution of below jquery script

Form :

<form id="my_form">
  <button type="button" id="Bshift" onclick="validation()">Clear</button>
</form>

Pure JS Function:

function validation(){
    // this has to be executed  first
    // do something here..
}

Jquery:

$(document).ready(function(){
    $('#Bshift').submit(function(){
    // this has to be executed  second
    // do something here.
    }
});

I would like to know is how I execute my function before my jquery submit.

This is a very common error. You want to assign the function validation to yourr click handler. What you instead do is assign whatever the execution of that function returns by assigning the function execution validation() to the onclick handler. — connexo
– connexo, Commented Sep 1, 2015 at 6:06

aldrin27 · Accepted Answer · 2015-09-01 06:13:47Z

1

HTML:

  <form id="my_form">
    <button type="button" id="Bshift">Clear</button>
  </form>

JS:

$(document).ready(function(){
   $('#Bshift').on('click', function(){ // I think this should be click event because you're not submitting your page you're just clearing it based on "CLEAR"
     validation();
   }

   function validation(){
    do something here..
   }
 }

Note: Your function must be outside the event triggers.

edited Sep 1, 2015 at 6:13

answered Sep 1, 2015 at 6:06

aldrin27

3,4184 gold badges31 silver badges44 bronze badges

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

Comments

Kishore Indraganti · Accepted Answer · 2015-09-01 06:02:58Z

0

Call your validation function inside submit call.

$(document).ready(function(){

        $('#Bshift').submit(function(){
        validation()
        do something here.
        }
    }

HTML Code

<button type="button" id="Bshift" >Clear</button>

answered Sep 1, 2015 at 6:02

Kishore Indraganti

1,3224 gold badges19 silver badges34 bronze badges

Comments

Sachin I · Accepted Answer · 2015-09-01 06:05:51Z

0

You have one more option to submit the form through ajax after validation.

$('my_form').on('submit', function(e) {
    e.preventDefault();
    if (validation()){
        $.ajax({...});
    }
});

answered Sep 1, 2015 at 6:05

Sachin I

1,5163 gold badges10 silver badges29 bronze badges

Comments

Mohammed Safeer · Accepted Answer · 2015-09-01 06:17:29Z

0

Invoke validation function on form submit event

$(document).ready(function(){
    validation(); // function call

    $('#my_form').submit(function(){  //form submit event
    // do something here.
    }

});


function validation(){
 // do something here..
}

answered Sep 1, 2015 at 6:17

Mohammed Safeer

21.6k8 gold badges79 silver badges81 bronze badges

Comments

Jakir Hossain · Accepted Answer · 2015-09-01 06:26:33Z

0

Edited code, please test my code.

<script>
function validation(){
    alert('How are you?');
}

$(document).ready(function(){
     $('#Bshift').click(function(){
         validation(); 
         alert('Fine and you?');           
     });
 });
</script>

<form id="my_form">
<button type="button" id="Bshift">Clear</button>
</form>

Demo

edited Sep 1, 2015 at 6:26

answered Sep 1, 2015 at 6:11

Jakir Hossain

2,51720 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to call a JS function before a jquery button click(click through selector)

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related