Cambiare valore attributo tramite DOM

[mazza094]

Salve a tutti, ho un problema con il seguente codice

<input type="text" name="serbaud" value="<?php print($recch1['T001SERBAUD']); ?>"/>
                <h3><small>Serial</small></h3>
                <input id="s" type="text" name="serial" value="<?php print($recch1['T001SERCH']); ?>"/>
                <h3><small>Description</small></h3>
                <input type="text" name="desc" value="<?php print($recch1['T001DESCRIPTION']); ?>"/>
                <script Language="JavaScript">
                                var serch;
                                function FormSerial(id)
                                        {
                                            serch=prompt("Inserisci seriale:");
                                            document.getElementById(id).value=serch; 
     
                                        }

                </script>
                <button class="button tiny radius" name="canale1" onClick="FormSerial('s')">modifica</button>

Il mio intento è quello di richiamare una funzione javascript quando viene cliccato il bottone modifica, chiedere il valore di un campo e sostituirlo al valore dell'imput testuale che avevo precedentemente.

Il problema sorge appunto quando viene eseguita la funzione, o meglio quando termina, poichè il valore del campo cambia per una frazione di secondo ma subito dopo viene sostituito dalla print in php nuovamente.
Ho notato però che se io eseguo il codice javascript senza chiamare una funzione il campo viene editato permanentemente.

Sapreste aiutarmi?
Grazie in anticipo.

Edit. Il problema è dato dal fatto che dopo l'esecuzione della funzione la pagina si refresha e quindi il campo viene ripopolato con i dati del database.
Edit2. Semplicemente aggiungendo l'attributo type="button" al tag button il problema si è risolto!