Cómo puedo recuperar el valor texto de un select
y almacenar en $_POST
para luego guardarlo en bd
:
echo "<option value=".$row['id'].".>".$row['concat']."</option>";
Quiero guardar el valor que viene en concat
, mediante POST
.
window.addEventListener('load', function(){
document.getElementById("ver").addEventListener('click', function(){
let htmlElement = document.getElementById('data');
let valor = htmlElement.value;
let i = htmlElement.length;
let elemento = document.getElementsByTagName('option');
var textoElemento;
while(i--){
if(valor == elemento[i].value){
textoElemento = elemento[i].textContent;
}
}
if(textoElemento == ''){
console.log('No ha selecionado ninguna opcion');
}else{
let http = new XMLHttpRequest();
let data = new FormData();
data.append('option', textoElemento);
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
let post = http.responseText;
alert(`Array de option: ${post}`);
}
}
http.open('POST','url',true);
http.send(data);
}
});
});
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<select id="data">
<option value="0" hidden>Seleccione una opción</option>
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
</select>
<br>
<button id="ver">TEST</button>
<body>
<html>
Para poder testear pones el fragmento de codigo en php
<?php print_r($_POST); ?>
En la parte del AJAX cambiar "url" por la direccion de tu fichero php para obtener la respuesta o confirmar el valor de tu select enviado, en esta parte:
http.open('POST','url',true)
De esta forma puedes obtener el texto de un select en $_POST
Para capturar el texto y no el valor de tu select
, te puedo sugerir jQuery
. En el siguiente snnipet te dejo un ejemplo de cómo funciona.
//al cambiar el valor del select
$('#opcion').change(function(){
//asigna lo que tengas en el texto del select a una variable
var opcionSeleccionada = $('#opcion option:selected').text();
//luego lleva ese valor al input con clase "opcion"
$('.opcion').val(opcionSeleccionada);
})
$('#numero').change(function(){
var numeroSeleccionado = $('#numero option:selected').text();
$('.numero').val(numeroSeleccionado);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" method="post" action="archivo.php">
<select id="opcion">
<option value="0" hidden>Seleccione una opción</option>
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
</select>
<!-- el siguiente input lo puedes ocultar agregando el atributo hidden -->
<input type="text" class="opcion" name="opcion" required><br>
<select id="numero">
<option value="0" hidden>Seleccione una opción</option>
<option value="100">Número 1</option>
<option value="200">Número 2</option>
<option value="300">Número 3</option>
</select>
<input type="text" class="numero" name="numero" required><br>
<button type="submit">Guardar</button>
</form>
Solo debes reemplazar el código HTML
con tu código PHP
, la siguiente línea por ejemplo:
<option value="1">Opción 1</option>
La reemplazas con tu código:
echo "<option value=".$row['id'].".>".$row['concat']."</option>";
Lo importante es que envías el valor del input
a tu archivo PHP
y en el, lo recuperas así:
$opcionSeleccionada = $_POST['opcion'];
Si tienes dudas, comenta.
Edición: Para dos o mas select
, lo que puedes hacer es diferenciarlos con un id
o con un class
como prefieras, lo demás es copiar el código y cambiar los id
ya que no deben existir dos elementos con el mismo identificador en el DOM.
select
.
name
tiene elselect
? Si tienename="miSelect"
entonces recuperas el valor con$_POST['miSelect']
en el servidor.