CODEWITHSUNDEEP
javascriptjqueryajax
Brian
Brian

Reputation: 313

INPUT type Image with onclick doesn't work with JS

Newbie coder here. I'm making a rating website, and am trying to make it so that when user click "Yes" as an image, it invoke a JS which display an Ajax loader gif and then shows the results. Problem is that onclick here doesn't seem to trigger the function:

<form action="" method="get" id="myform">

<script>
    $(document).ready(function(){
         $("#myform").submit(function(){
         $('#chart1').hide();
         $('.ajax-load').show();
         var data = $("#myform").serialize();
         submitRating(data, false, function(){});
         setTimeout($('.ajax-load').hide(),1000);
         $('#chart1').show();
         return false;
         });
    });
</script>

    <div id="chart1"><div>
    <input type="image" src="images/yes.png" name="yes" value="0" onclick="$('#myform').submit();"/>

</form>

Instead of $('#myform').submit(), if I try an alert(), it works, so I'm puzzled as to why this doesn't work.

Thanks!!

Upvotes: 0

Views: 886

Answers (2)

mitchellhislop
mitchellhislop

Reputation: 445

It might have to do with the fact that type=image has a default behavior of submitting when clicked. This could cause interference with your submit() function.

Upvotes: 0

thinkdevcode
thinkdevcode

Reputation: 931

try using: .trigger("submit")

more info: http://api.jquery.com/trigger/

And if that doesnt work the only thing I can think of is having a blank action attribute in your form tag...

Upvotes: 2

Related Questions