Passing Jquery value to PHP form - php

Question

I have that simple form in a php page:
<form role="form" method="post" action="send-message.php">
<input type="text" id="SendTo" name="SendTo" value="">
<textarea class="form-control text-input" name="Message"></textarea>
<button type="submit" class="btn btn-primary">Send</button>
</form>
The value of SendTo input is set by a JQuery script from the same page:
$("button").click(function() {
$("#SendTo").val($(this).siblings('.username').val());
});
Then I have PHP script in send-message.php:
<?php
$message = $_POST["Message"];
$sendTo = $_POST["SendTo"];
echo $sendTo; //nothing here!
Now, why the value of SendTo is not passing from the form to send-message.php?
It's weird because in the form, I can clearly see the value of the input but it's not passed to send-message.php.
I tried with GET method and it's the same thing...
Thank you for your help!
The missing code:
<?php foreach($mostCompatibleUsers as $otherUser => $score): ?>
<?php $compatibilityScore = getCompatibilityScore($score, $maxScore); ?>
<div class='col-sm-4 col-xs-6'>
<div class='box-info full'>
<div class='img-wrap'>
<img src='images/default-profile-pic.png' alt='Image small'>
</div>
<div class='des-thumbnail'>
<h4><b><?php echo $otherUser; ?></b> <small>Niveau de compatibilité: <b><?php echo $compatibilityScore; ?>%</b></small></h4>
<div class='progress progress-striped active'>
<div class='progress-bar progress-bar-success' role='progressbar' aria-valuenow='<?php echo $compatibilityScore; ?>' aria-valuemin='0' aria-valuemax='100' style='width: <?php echo $compatibilityScore; ?>%'></div>
</div>
<div class='row'>
<div class='col-md-6'>
<input type="hidden" class='username' value="<?php echo $otherUser;?>">
<button type='button' class='btn btn-success btn-sm btn-block' data-toggle='modal' data-target='#myModal'><i class='fa fa-envelope'></i> Send a message</button>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
More details
As you can see with the last added code, there is a foreach loop that display some users information and a button allow to send a message to that particular user.
When we press a button to send a message, it pops out a modal window containing a form where we can write and send the message. It's not a regular architecture! I think this is not simplifying the situation..

Answer 1

There is no .username class in your code.
By calling $(this).siblings('.username') you are basically just getting the other elements of the form as $(this) is actually the submit button.
Providing more code would be useful. Especially where the .username class is.

Answer 2

$("button").click(function() {
$("#SendTo").val($(this).siblings('.username').val());
$.post( "send-message.php", $( "form" ).serialize() );
});

Answer 3

If you do in fact have an input with a username class, your code would not work anyway because the form will have already submitted by the time you try to read the inputs with javascript.
give your form an id
<form role="form" id="form" method="post" action="send-message.php">
and instead attach to its submit event
$("#form").submit(function(e) {
e.preventDefault(); //prevent the form from submitting
$("#SendTo").val($(this).siblings('.username').val()); //process the inputs
$(this).submit(); // then submit the form
});

Answer 4

First of all, in this case, You have to cancel the default submit of the form when clicking the submit button, the easiest way is to set its type to be button.
Second perform submitting manually using the Jquery as follows:
<form id="myForm" role="form" method="post" action="send-message.php">
<input type="text" id="SendTo" name="SendTo" value="">
<textarea class="form-control text-input" name="Message"></textarea>
<input type="button" id="myButton" value="send">
</form>
<script>
$("#myButton").click(function() {
$("#SendTo").val($(this).siblings('.username').val());
$("#myForm").submit();
});
</script>