I can't insert data of select from modal? - php

Question

I tried to do the same for the input but With no chance however I did not understand if I has to be done with the change function should it be inserted seperately from the rest of the rest of the modal data
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" name="TypeCo" id="TypeCo">
<option selected name="TypeCo" id="TypeCo">Type de concentrateur</option>
<option value="Concentrateur Fixe">Concentrateur Fixe</option>
<option value="Concentrateur transportable">Concentrateur transportable</option>
</select>
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" name="CapCo">
<option selected name="CapCo" id="CapCo">Capacité de concentrateur</option>
<option value="5L">5L</option>
<option value="7L">7L</option>
<option value="10L">10L</option>
<option value="15L">15L</option>
</select>
and here is my script
$(document).ready(function() {
$(document).on('click', '#save', function() {
var fname = $('#fname').val();
var lname = $('#lname').val();
var tel = $('#tel').val();
var email = $('#email').val();
var TypeCo = $('#TypeCo').val();
var CapC = $('#CapCo').val();
alert(fname + lname + tel + email + TypeCo);
$.ajax({
url: "insert.php",
type: "post",
data: {
fname: fname,
lname: lname,
email: email,
tel: tel,
TypeCo: TypeCo,
CapCo = CapCo
},
success: function(data) {
$("#save").modal('hide');
alert('jj');
location.reload();
}
});
});
});
any help please ? it's my first project with ajax and I cannot really find a vid that can help me

Answer 1

This is indeed how you get the value from a form element in jQuery:
var TypeCo = $('#TypeCo').val();
However, you are targeting the wrong element. #TypeCo is currently targeting an <option> element:
<option selected name="TypeCo" id="TypeCo">Type de concentrateur</option>
You want to get the value of the <select> element itself (which contains <option> elements for the user to select that value). Move the name and id there:
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" name="TypeCo" id="TypeCo">
<option selected>Type de concentrateur</option>
<option value="Concentrateur Fixe">Concentrateur Fixe</option>
<option value="Concentrateur transportable">Concentrateur transportable</option>
</select>
Then you can use .val() exactly like you already do:
$('#TypeCo').on('change', function () {
let value = $('#TypeCo').val();
console.log(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" name="TypeCo" id="TypeCo">
<option selected>Type de concentrateur</option>
<option value="Concentrateur Fixe">Concentrateur Fixe</option>
<option value="Concentrateur transportable">Concentrateur transportable</option>
</select>