get value of a select from a jquery

Navigation
1

good evening I have the following script: 

    $(document).ready(function() {

         $.ajax({
             dataType: "json",
             data: [],
             url: "https://ubicaciones.paginasweb.cr/provincias.json",
            type: 'GET',
             crossDomain: true,
             success: function(data) {
                 agregarProvincias(data);
             }
         });


    $(document).on('change', '#provincia > select', function() {
        var provincia = this.value;
         $.ajax({
             dataType: "json",
             url: "https://ubicaciones.paginasweb.cr/provincia/" + provincia + "/cantones.json",
             data: {},
             success: function(data) {
                 agregarCantones(data);
             }
         });

    });

        $(document).on('change', '#canton > select', function() {
   var  provincia = $('select#provincia').val();
    var canton = this.value ;
         $.ajax({
             dataType: "json",
             url: "https://ubicaciones.paginasweb.cr/provincia/" + provincia + "/canton/" + canton + "/distritos.json",
             data: {},
             success: function(data) {
                 agregarDistritos(data);
             }
         });

    });

    function agregarProvincias(data) {
        var html = "<select id='provincia'>";
        for (key in data) {
            html += "<option value='" + key + "'>" + data[key] + "</option>";
        }
        html += "</select";
        $('#provincia').html(html);
    }

    function agregarCantones(data) {
        var html = "<select>";
        for (key in data) {
            html += "<option value='" + key + "'>" + data[key] + "</option>";
        }
        html += "</select";
        $('#canton').html(html);
    }

    function agregarDistritos(data) {
        var html = "<select>";
        for (key in data) {
            html += "<option value='" + key + "'>" + data[key] + "</option>";
        }
        html += "</select";
        $('#distrito').html(html);
    }

    });

and I charge it in the following html: 

<html>

    <head>
        <title>Obteniendo las provincias</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/js_pronvincias_cantontes_distritos.js"></script>

    </head>
        <br>
        <div id="provincia"></div>
         <div id="canton"></div>
         <div id="distrito"></div>
    </body>
</html>

My question is how can I get the values of the div and then insert a database into a php.

    
asked by Francisco Araya 14.12.2017 в 06:21
source

1 answer

2

You need a function ajax that sends the data to a PHP, add your code in the functions Agregar* a id to the select to be able to identify them, add a button and its function .click as an example to send the data (do not forget to change the URL of your php). 

$(document).ready(function() {

$("#ok").click(function(){
	$.ajax({
		type: "POST",
		url: "agregar.php", //no olvides cambiar la ruta a tu php
		data: {"provincia":$("#provincias").val(),"canton":$("#cantones").val(),"distrito":$("#distritos").val()},
		success: function (datos) {
		    console.log('enviado a BD');							
		},
		error: function (er) {
		    console.log(er.error);
		}
	});
});

$.ajax({
	dataType: "json",
	data: [],
	url: "https://ubicaciones.paginasweb.cr/provincias.json",
	type: 'GET',
	crossDomain: true,
	success: function(data) {
		agregarProvincias(data);
	}
});


$(document).on('change', '#provincia > select', function() {
	var provincia = this.value;
	$.ajax({
		dataType: "json",
		url: "https://ubicaciones.paginasweb.cr/provincia/" + provincia + "/cantones.json",
		data: {},
		success: function(data) {
			agregarCantones(data);
		}
	});
});

$(document).on('change', '#canton > select', function() {
	var  provincia = $('select#provincia').val();
	var canton = this.value ;
	$.ajax({
		dataType: "json",
		url: "https://ubicaciones.paginasweb.cr/provincia/" + provincia + "/canton/" + canton + "/distritos.json",
		data: {},
		success: function(data) {
			agregarDistritos(data);
		}
	});
});

function agregarProvincias(data) {
	var html = "<select id='provincias'>";
	for (key in data) {
		html += "<option value='" + key + "'>" + data[key] + "</option>";
	}
	html += "</select";
	$('#provincia').html(html);
}

function agregarCantones(data) {
	var html = "<select id='cantones'>";
	for (key in data) {
		html += "<option value='" + key + "'>" + data[key] + "</option>";
	}
	html += "</select";
	$('#canton').html(html);
}

function agregarDistritos(data) {
	var html = "<select id='distritos'>";
	for (key in data) {
		html += "<option value='" + key + "'>" + data[key] + "</option>";
	}
	html += "</select";
	$('#distrito').html(html);
}

});
<html>

    <head>
        <title>Obteniendo las provincias</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/js_pronvincias_cantontes_distritos.js"></script>

    </head>
        <br>
        <div id="provincia"></div>
         <div id="canton"></div>
         <div id="distrito"></div>
         <br>
         <br>
         <button id="ok">Enviar a BD</button>
    </body>
</html>

In your PHP you need to get the values sent with Ajax using $_POST 

<?php
$sqli=mysqli_connect('tuhost', 'tuuser', 'tupass', 'tuBD');
// ojo los POST son los valores en ajax [data]
$provincia = $_POST["provincia"];
$canton = $_POST["canton"];
$distrito = $_POST["distrito"];
//puede cambiar la sintaxis de tu tabla
$query = mysqli_query($sqli,"INSERT INTO tuTabla VALUES ('$provincia','$canton','$distrito')");
?>
    
answered by 14.12.2017 / 06:53
source
Start / pause button Javascript TypeError: variable undefined