How to get the form data without refreshing the page - php

Question

I have created the form below to ask what the visitor wants so I can indicate in a modal window how to get there. So I need to get the visitor's choices in the modal window without refreshing the page.
Here are my codes below.
<form id="wantedForm" method="POST">
<div class="wanted-opt">
<div class="wantoptiontitle">Je veux</div>
<div class="wanted-options input-field">
<select id="wanted-1" name="wanted-1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
<div class="wanted-opt">
<div class="wantoptiontitle">comme ça je peux</div>
<div class="wanted-options input-field">
<select id="wanted-2" name="wanted-2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
<button class="btn-default btn modal-trigger" type="submit">Comment faire ?
</button>
</form>
<div id="wantedModal" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
<p><?php var_dump($_POST) ?></p>
</div>
</div>
Le script
$('#wantedForm').on('submit', function(e){
e.preventDefault();
$('#wantedModal').modal('open');
});
When I do a var_dump($_POST) in the modal, it returns a null result. Can someone please tell me what I need to correct? Thank you for your help.
Please tell me what I need to change. Thank you.
EDIT
I had tried to do with ajax also with the code below. It hadn't worked either.
$('#wantedSubmit').click(function(e){
e.preventDefault();
var wanted_1 = $('#wanted-1').val();
var wanted_2 = $('#wanted-2').val();
$.post(location.href, {wanted_1: wanted_1});
$.post(location.href, {wanted_2: wanted_2});
$('#wantedModal').modal('open');
});

Answer 1

Here is a solution which gets your form data directly in your modal on submit:
$('#wantedForm').on('submit', function(e){
e.preventDefault();
var wanted_1 = $('#wanted-1 option:selected').text();
var wanted_2 = $('#wanted-2 option:selected').text();
$('#choices')
.empty()
.append('<p>wanted 1: '+wanted_1+'</p>')
.append('<p>wanted 2: '+wanted_2+'</p>');
$('#wantedModal').modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form id="wantedForm" method="POST">
<div class="wanted-opt">
<div class="wantoptiontitle">Je veux</div>
<div class="wanted-options input-field">
<select id="wanted-1" name="wanted-1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
<div class="wanted-opt">
<div class="wantoptiontitle">comme ça je peux</div>
<div class="wanted-options input-field">
<select id="wanted-2" name="wanted-2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
<button class="btn-default btn modal-trigger" type="submit">Comment faire ?
</button>
</form>
<div id="wantedModal" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
<div id="choices"></div>
</div>
</div>

Answer 2

Your are not posting the request by using e.preventDefault(); that`s why $_POST is empty. You should collect submited values in JS like this.
var x = $('#wanted-1').val();
var y = $('#wanted-2').val();
and then you can open insert this values in modal elements like
$("#modal-element1").html(x);