JQuery .val is not working with input tag (not passing the value to the server)

This tutorial require knowledge in PHP html javascript and jquery,

The issue:
from the server side in myserver.php when I echo $_POST['username'] I got empty string instead of "my value"

my code was:

<form action="myserver.php" method="POST">

    <input type="text" id="userid" name="username"/>
   <input type="button" id="mybutton" />
</form>


<script>
$("mybutton").click(function (){

$('#userid').val("my value"); //won't work 

});

</script>

The solution:

<form action="myserver.php" method="POST">

    <input type="text" id="userid" name="username"/>
   <input type="button" id="mybutton" />
</form>


<script>
$("mybutton").click(function (){

$('#userid').val("my value"); //won't work
$('#userid').attr('value',"myvalue");// correct

});

</script>