停止表单刷新，但发布

I am working on a radio website, with a player, and a bunch of banners where you can click on to play a radio.

The ideal behavior in my opinion would be that if i click on the button to play a radio, it'll jump to the player. But now its refreshing the page, and jumping to the top of the page. which is a bit annoying.

1. I got an form with multiple buttons, those buttons contain the ID of the radio from the database.
2. Then i got my player, without the form being posted, printing a default player, on submit of the form, it'll load all the information needed from the database with the ID that's being posted to the player.

Now my question is, how to stop the form from refreshing and jumping back to the top of the page, while it does post to the player.

if you guys need any code, i am wiling to post it here, but since it a shitload of code on my index.php i need a site where i can put this on.

You're going to want to use Javascript (and more specifically: AJAX) for this. It may seem daunting, but especially when used in combination with jQuery, it's quite doable.

The idea is basically to send requests to a different page on the background, without reloading the page, and to use Javascript to update the current page with the newly received information. There are plenty resources on the subject that do a much better job of explaining the details than I could here, but I hope this gives you sufficient keywords :)

Web based radio players are usually SPAs (Single Page Applications) because reloading the page interrupts the radio player. That means the page loads only once, and all other content is loaded via AJAX requests that do not require reloading the whole page.

There are several libraries that you can use to achieve this architecture (like Angular.JS for example). Building such an architecture from the ground up with plain JS can easily get too difficult to maintain.

Here you can use ajax and then call your radio player which is not in form... Find below example.

$("button").click(function(){
    $.ajax({url: "demo_test.txt", 
            success: function(result){
                     $("#div1").html(result);
            }
    });
});

Hope this wil help.