如何使用AJAX将表单选择输入的值传递给php文件而不提交? [英] How to pass the value of a form select input to a php file using AJAX without submitting it?

问题描述

我想将表单选择输入的值从HTML表单传递到php文件而不提交.

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

我该怎么办?

这是我的表格:

<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>

这是我的ajax调用:

And here's my ajax call:

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

我正在尝试使用浏览器的控制台对此进行测试，进入表单，选择一个选项，然后在控制台中键入var Provincia并返回undefined.

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.

我该怎么办?

推荐答案

您快到了.

将id属性放在select而不是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>

这篇关于如何使用AJAX将表单选择输入的值传递给php文件而不提交?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！