How to pass the value of a form select input to a php file using AJAX without submitting it?

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?

$("#userDomicilioProvincia")means select the element with attribute id="userDomicilioProvincia ". If you want to get your select element that have the name attribute set, use this selector : $('select[name="userDomicilioProvincia"]') — RafH
– RafH, Commented May 12, 2017 at 22:31
But it's better to set the id attribute to the select element rather than using the (select) tag to find the element. The id selector is MUCH faster. You can read something about selector performance here — Mike Bovenlander
– Mike Bovenlander, Commented May 13, 2017 at 9:06

Jamiec · Accepted Answer · 2017-05-13 16:29:26Z

3

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>

edited May 13, 2017 at 16:29

Jamiec

136k15 gold badges143 silver badges202 bronze badges

answered May 12, 2017 at 22:00

Mike Bovenlander

5,4645 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rosamunda Over a year ago

Thank you for your reply!! How may I access that value in php? I'm trying with var_dump($_POST['provincia']); and it's null.

Mike Bovenlander Over a year ago

@Rosamunda sorry, there is an other mistake in the jQuery code. I corrected it. I changed provincia: {text:$(this).val()} to: data: { provincia: $(this).val() }. data is a javascript object which you send as POST to the server (PHP). Try again, var_dump($_POST['provincia']); should work now.

Collectives™ on Stack Overflow

How to pass the value of a form select input to a php file using AJAX without submitting it?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related