Question

I am searching for a possibility to replace the lowre input text field with a button like: <input type="button" class="button" name="search" value="Urban" onclick="">.

HTML CODE:

<form method="post" action="search.php" id="search_form">
    <input type="text" name="search" value="<?php echo $_POST['search']; ?>" class="search_sounds"/>
    <input type="submit" value="" class="submit" /> 
</form> 

The whole script is supposed to search the sounds of a database:

PHP CODE:

<?php if(isset($_POST['search']) && !empty($_POST['search']))
    {
        include('searchfunction.php');

        if(count($data) > 0)
        {
?>
                    <script type="text/javascript"> 
                    $(document).ready(function(){

                    var description = ''; 
                    var myPlaylist = [ 
<?php
                        echo(implode(',', $data));
?>
             ]; 

                    $('#main').ttwMusicPlayer(myPlaylist, { 
                    autoPlay:false, 
                    description:description, }
                    );

                    }); 
                    </script>
<?php
        }
        else
        {
            echo ('No sounds found.');
        }
    }
?>

Answer 1

add an id element to your button, like this (I removed the onclick=”” code)

<input type="button" class="button" name="search" value="Urban" id="search_button">

Then use some simple jQuery:

$('#search_button').click(function() {
  $('#search_form').submit();
});