Javascript onclick函数未触发

Question

I have a rating system which I've used for several things on my website which doesn't seem to be working now. It reloads the page instead of passing the values to my other php file.

Can be seen there:

http://broadcasted.tv/show/96/graceland/4213/season/1/episode/3/

<form class="episoderating" id="4213">
    <div class="your-score">
        <div class="" style="float:left">Your Score:</div> <span class="star-rating-control"><div class="rating-cancel" style=""><a title="Cancel Rating"></a></div><div role="text" aria-label="1" class="star-rating rater-0 hover-star star-rating-applied star-rating-live"><a title="1">1</a></div><div role="text" aria-label="2" class="star-rating rater-0 hover-star star-rating-applied star-rating-live"><a title="2">2</a></div><div role="text" aria-label="3" class="star-rating rater-0 hover-star star-rating-applied star-rating-live"><a title="3">3</a></div><div role="text" aria-label="4" class="star-rating rater-0 hover-star star-rating-applied star-rating-live"><a title="4">4</a></div><div role="text" aria-label="5" class="star-rating rater-0 hover-star star-rating-applied star-rating-live"><a title="5">5</a></div><div role="text" aria-label="6" class="star-rating rater-0 hover-star star-rating-applied star-rating-live"><a title="6">6</a></div><div role="text" aria-label="7" class="star-rating rater-0 hover-star star-rating-applied star-rating-live"><a title="7">7</a></div><div role="text" aria-label="8" class="star-rating rater-0 hover-star star-rating-applied star-rating-live"><a title="8">8</a></div><div role="text" aria-label="9" class="star-rating rater-0 hover-star star-rating-applied star-rating-live"><a title="9">9</a></div><div role="text" aria-label="10" class="star-rating rater-0 hover-star star-rating-applied star-rating-live"><a title="10">10</a></div></span>
        <input style="float: left; display: none;" class="hover-star star-rating-applied" type="radio" name="episoderating-4213" value="1" title="1">
        <input style="float: left; display: none;" class="hover-star star-rating-applied" type="radio" name="episoderating-4213" value="2" title="2">
        <input style="float: left; display: none;" class="hover-star star-rating-applied" type="radio" name="episoderating-4213" value="3" title="3">
        <input style="float: left; display: none;" class="hover-star star-rating-applied" type="radio" name="episoderating-4213" value="4" title="4">
        <input style="float: left; display: none;" class="hover-star star-rating-applied" type="radio" name="episoderating-4213" value="5" title="5">
        <input style="float: left; display: none;" class="hover-star star-rating-applied" type="radio" name="episoderating-4213" value="6" title="6">
        <input style="float: left; display: none;" class="hover-star star-rating-applied" type="radio" name="episoderating-4213" value="7" title="7">
        <input style="float: left; display: none;" class="hover-star star-rating-applied" type="radio" name="episoderating-4213" value="8" title="8">
        <input style="float: left; display: none;" class="hover-star star-rating-applied" type="radio" name="episoderating-4213" value="9" title="9">
        <input style="float: left; display: none;" class="hover-star star-rating-applied" type="radio" name="episoderating-4213" value="10" title="10">
        <input type="hidden" id="episode_id-4213" value="96">
        <input type="hidden" id="user_id-4213" value="2">
        <input id="submitscore-4213" type="submit" class="small button" value="Score!" onclick="EpisodeFunction(4213);">
    </div>
</form>

And the javascript

function EpisodeFunction(formId) {
    var show_id = $('#episode_id-' + formId).val();
    var user_id = $('#user_id-' + formId).val();
    var episode_id = formId;
    var score = $('input[name="episoderating-' + formId + '"]:checked').val();
    if (!score)
    {
        alert('Score this show');
    }
    else
    {
      $('#show_id-' + formId).addClass('success');
        $.ajax({
            type: "POST",
            url: "/ajax/episodescoreajax.php",
            data: {
                "show_id": show_id,
                "user_id": user_id,
                "episode_id":episode_id,
                "score": score          //we are passing the name value in URL
            },
            cache: false,
            success: function(html)                {
                    if (html === "") {
                       $('#submitscore-' + formId).addClass('success');
                       $('#submitscore-' + formId).val('Scored!');
                       $('#submitscore-' + formId).attr('onclick', 'removeEpisodeScore(' + formId + ')');
                    }
                }
        });
    }
    return false;
};

I've used the function in other parts of the website without issue.

Answer 1

Try to make your submit button to

<input id="submitscore-4213" type="button" class="small button" value="Score!" onclick="EpisodeFunction(4213);">

OR use form onsubmit

<form class="episoderating" id="4213" onsubmit="return EpisodeFunction(4213);">

AND remove onclick

<input id="submitscore-4213" type="submit" class="small button" value="Score!">

Hopefully this helps..