如何使用AJAX将表单选择输入的值传递给php文件而不提交？

Question

I want to pass the value of a form select input from an HTML form to a php file without submitting it.

How may I do that?

This is my form:

<div class="form-group">
<label>Provincia</label>
<select class="form-control" name="userDomicilioProvincia">
<option id ="userDomicilioProvincia" name="userDomicilioProvincia"> </option>
<option value="Capital Federal">Capital Federal</option>
<option value="Gran Buenos Aires">Gran Buenos Aires</option> 
<option value="Buenos Aires">Provincia de Buenos Aires</option> 
</select>
</div>

And here's my ajax call:

$('#userDomicilioProvincia').change(function(){
    $.ajax({
        type: "POST",
        url: "/ubicacion.php",
       provincia: {text:$(this).val()}
    });
});

I'm trying to test this using the browser's console, I got into the form, select one option and in the console I type var Provincia and it returns undefined .

How may I do that?

Answer 1

You're almost there.

Put the id attribute on the select and instead of the option .

 $(document).ready(function(){ $('#userDomicilioProvincia').change(function(){ $.ajax({ type: "POST", url: "/ubicacion.php", data: { provincia: $(this).val() } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label>Provincia</label> <select id="userDomicilioProvincia" class="form-control" name="userDomicilioProvincia"> <option> </option> <option value="Capital Federal">Capital Federal</option> <option value="Gran Buenos Aires">Gran Buenos Aires</option> <option value="Buenos Aires">Provincia de Buenos Aires</option> </select> </div>