Autor Tema: Pasar selección a Input y otros retos JavaScript  (Leído 1962 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado KATHYU

  • Trade Count: (0)
  • Sv Member
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Mensajes: 180
  • Welcome to the real world. It sucks !!!
Pasar selección a Input y otros retos JavaScript
« : noviembre 21, 2016, 09:28:27 am »
Fíjense que ya ratos me estoy dando duro con un script que en otras ocasiones lo he usado. Trata sobre pasar el valor de un select a un textbox.

mi select dinámico y que funciona es asi:
Código: [Seleccionar]
<select class="form-control" name='grupo' id='grupo' onChange="modifica();">
   <option value=''>Seleccione Planilla...</option>
     <?php
        
while ($row $payroll_names->fetch_array(MYSQLI_ASSOC)) {
            echo 
" <option value='".$row['ID']."'>".$row['NOMBRE']."</option>";
         }
      
?>

</select>

Y por medio de un form quiero pasar los datos a otro lado
Código: [Seleccionar]
<form name="imprimir" action="" method="POST">
<input type="text" id="id_grupo" name="id_grupo" >
<input type="text" id="name_grupo" name="id_grupo" >
<input type="submit" class="btn btn-danger" value="IMPRIMIR">
</form>

Tengo y he probado varios scripts sin obtener el resultado deseado. Por el momento los que se que tendrían que funcionar son estos  :-/
Código: [Seleccionar]
<script type="text/javascript">
       //Primer Forma
var element = document.getElementById('grupo');
element.addEventListener("change", function(){
    var id_grupo = document.getElementById('id_grupo'),
        name_grupo = document.getElementById('name_grupo');
   
    name_grupo.value = this.options[this.selectedIndex].text;
    id_grupo.value = this.options[this.selectedIndex].value;
});
     //SegundaForma
function modifica(){
valor = document.forms[0].getElementbyId("grupo").value;
document.forms[0].id_grupo.value = valor;
}
  </script>

Pero con ninguna forma logro pasar el valor seleccionado a mi input  :cry:

Quizas ustedes que ven de otra forma el script me den la luz de donde esta mi problema. GRACIAS.
« Última Modificación: noviembre 24, 2016, 02:07:31 pm por KATHYU »

Desconectado el-mago

  • Trade Count: (2)
  • The Communiter-
  • *
  • Thank You
  • -Given: 19
  • -Receive: 83
  • Mensajes: 1962
Re:Pasar selección a Input
« Respuesta #1 : noviembre 21, 2016, 10:00:55 am »
Aqui te lo dejo mira: https://jsfiddle.net/6bpuksp5/
Dominio .com + WebHosting desde US$35.00/año cPanel y DirectAdmin || Planes Reseller cPanel/WHM || Consulta sin compromiso!

Desconectado KATHYU

  • Trade Count: (0)
  • Sv Member
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Mensajes: 180
  • Welcome to the real world. It sucks !!!
Re:Pasar selección a Input
« Respuesta #2 : noviembre 21, 2016, 10:33:35 am »
En efecto, funciona a la perfeccion mago  :drinks:
Pero que es lo que falla en los dos scripts anteriores, que por cierto en otra ocasión ya los he hecho trabajar ?? :dntknow:

Tambien me gustaría que en otro input me pusiera el texto del combo, se supone que con .text puedo pasar el valor, modifique a lo rápido el script suyo mago y lo que me da en el textbox es undefined  :phew:
Código: [Seleccionar]
function modifica(){
document.getElementById("id_grupo").value = document.getElementById("grupo").value;
document.getElementById("name_grupo").value = document.getElementById("grupo").text;
}

PD: JS, No es mi fuerte

Conectado rdoggsv

  • Administrator
  • Trade Count: (3)
  • The Communiter-
  • *
  • Thank You
  • -Given: 299
  • -Receive: 486
  • Mensajes: 6458
  • "Once you go arch , u never go back"
    • SV CommunitY
Re:Pasar selección a Input
« Respuesta #3 : noviembre 21, 2016, 11:41:18 am »
El event que se envía en el onchange ya tiene la info.

Mira modificando un poco el ejemplo que puso el mago

https://jsfiddle.net/6bpuksp5/4/

Código: [Seleccionar]
function modifica(event){
  if(event.target.selectedIndex == 0){
    document.getElementById("id_grupo").value = "";
    document.getElementById("name_grupo").value = "";
  }else{
    document.getElementById("id_grupo").value = event.target.value;
    document.getElementById("name_grupo").value = event.target.options[event.target.selectedIndex].text;
  }
}

Desconectado KATHYU

  • Trade Count: (0)
  • Sv Member
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Mensajes: 180
  • Welcome to the real world. It sucks !!!
Re:Pasar selección a Input
« Respuesta #4 : noviembre 21, 2016, 12:00:51 pm »
El event que se envía en el onchange ya tiene la info.

Mira modificando un poco el ejemplo que puso el mago

https://jsfiddle.net/6bpuksp5/4/

Código: [Seleccionar]
function modifica(event){
  if(event.target.selectedIndex == 0){
    document.getElementById("id_grupo").value = "";
    document.getElementById("name_grupo").value = "";
  }else{
    document.getElementById("id_grupo").value = event.target.value;
    document.getElementById("name_grupo").value = event.target.options[event.target.selectedIndex].text;
  }
}

Esa del event.target.options[event.target.selectedIndex] no me la podia  :sur: :sur:

Desconectado el-mago

  • Trade Count: (2)
  • The Communiter-
  • *
  • Thank You
  • -Given: 19
  • -Receive: 83
  • Mensajes: 1962
Re:Pasar selección a Input
« Respuesta #5 : noviembre 21, 2016, 01:23:38 pm »
tambien podes ver este ejemplo: https://jsfiddle.net/uLy7qtzb/

Citar
var opcion = document.getElementById("grupo").selectedIndex;
var texto = document.getElementById("grupo").options[opcion].text;
document.getElementById("name_grupo").value = texto;
Dominio .com + WebHosting desde US$35.00/año cPanel y DirectAdmin || Planes Reseller cPanel/WHM || Consulta sin compromiso!

Desconectado KATHYU

  • Trade Count: (0)
  • Sv Member
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Mensajes: 180
  • Welcome to the real world. It sucks !!!
Re:Pasar selección a Input
« Respuesta #6 : noviembre 21, 2016, 01:33:42 pm »
tambien podes ver este ejemplo: https://jsfiddle.net/uLy7qtzb/

En efecto muy bueno  :drinks:

Les agradezco a ambos la lección

Conectado rdoggsv

  • Administrator
  • Trade Count: (3)
  • The Communiter-
  • *
  • Thank You
  • -Given: 299
  • -Receive: 486
  • Mensajes: 6458
  • "Once you go arch , u never go back"
    • SV CommunitY
Re:Pasar selección a Input
« Respuesta #7 : noviembre 21, 2016, 03:15:01 pm »
 :thumbsup:
tambien podes ver este ejemplo: https://jsfiddle.net/uLy7qtzb/


Lo ideal es que evites si es posible hacer tantos document.getElementById por que cada uno dispara otro search en el DOM, si lo vas hacer manual sin usar el event envíado en el onchange lo mejor sería al principio hacer un element = document.... para obtener el select solo 1 vez.


Desconectado KATHYU

  • Trade Count: (0)
  • Sv Member
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Mensajes: 180
  • Welcome to the real world. It sucks !!!
Re:Pasar selección a Input y otros retos Javascript
« Respuesta #8 : noviembre 24, 2016, 02:07:10 pm »
Este tema se puso bonito por eso les tengo otro reto  :phew:

Resulta que tengo un form que hace un proceso, pero dentro de el hay una celda (porque el form abarca toda una tabla) que tiene una opción de eliminar un registro. Bien lo que quiero es un form dentro de otro form, si eso no se puede lo se, pero hay ciertas formas con JS que se supone funcionan. Lo que tengo ahorita y que funciona es un link donde por medio de GET envío la variable y puedo realizar el proceso, pero yo quiero algo mejor y no me gusta para nada usar GET sino que POST.

Codigo que funciona perfecto
Código: [Seleccionar]
<input type="hidden" name="delete" value="<?php echo $id?>">
<a href="../db/delete.php?id=<?php echo $id?>" class="btn btn-danger">1</a>

Pero yo quiero hacerlo como que fuera un form asi que por medio de JS quiero cambiar el action del form, pero no lo he logrado  :sad:

Primer forma
Código: [Seleccionar]
<input type="submit" class="btn btn-danger" Value="2" name="2" id="2" onClick="document.ver.action='../db/delete.php'; document.ver.submit()";>
Segunda forma
Código: [Seleccionar]
<script type="text/javascript">
function myFunction() {
// alert('Hello world !!!');
    document.getElementById('ver').action = '../db/delete.php';
document.getElementById('ver').submit();
}
</script>

<input type="submit" value="3" id="3" name="3" onclick="myFunction()" class="btn btn-danger">

Alguien me puede decir en la segunda forma cual seria mi error  :-/ creo que al no saber bien bien JS no se si la forma de los eventos es la correcta.

Datos, el form se llama "ver" y en la segunda forma el alert si funciona  :phew:

Si se fijan, primero me doy duro yo, y luego cuando ya no mas, les pido ayuda, para que no salga alguien diciendo que quiero que me hagan todo, por cierto he vista que se puede tambien usar AJAX, pero por el momento prefiero trabajarlo con JS
« Última Modificación: noviembre 24, 2016, 02:09:15 pm por KATHYU »

Desconectado KATHYU

  • Trade Count: (0)
  • Sv Member
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Mensajes: 180
  • Welcome to the real world. It sucks !!!
Re:Pasar selección a Input y otros retos JavaScript
« Respuesta #9 : noviembre 24, 2016, 03:06:35 pm »
Actualizo

La forma correcta de hacer submit es así
Código: [Seleccionar]
<script type="text/javascript">
function myFunction() {
// alert('Hello world !!!');
// document.getElementById('ver').action = '../db/delete.php';
// document.getElementById('ver').submit();
document.getElementById("ver").action= "../db/delete.php";
document.getElementById("ver").method= 'POST';
//document.ver.submit();
document.getElementById("ver").submit();
}
</script>

Lo único es que ahorita el $_POST me envía solo el numero 4, quien sabe porque pero lo estoy averiguando  :thumbsup:

Desconectado KATHYU

  • Trade Count: (0)
  • Sv Member
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Mensajes: 180
  • Welcome to the real world. It sucks !!!
Re:Pasar selección a Input y otros retos JavaScript
« Respuesta #10 : noviembre 24, 2016, 04:03:40 pm »
Perdón por tanto repost y ojo que no soy el niño de la colita de la Ñ

El problema ahora es que me toma el ultimo id de toda mi tabla en este caso era "4" asi que hice otro intento

Código: [Seleccionar]
<script type="text/javascript">
function myFunction() {
// alert('Hello world !!!');
document.getElementById("ver").action = "../db/delete.php";
document.getElementById("ver").method = 'POST';
var id = document.getElementById("delete").value; // Linea 1
var dato = document.getElementsByName("delete"); // Linea 2
for(var i=0; i<dato.length; i  ) { // Linea 3
alert(" Elemento: "   dato[i].value); // Linea 4
}
document.getElementById("ver").submit();
}
</script>

Les explico,
La linea 1 toma el id del ultimo input, esta linea es digamos mi clavo ahorita.
La linea 2 guarda todos los value del input llamado delete
La linea 3 hace un for
La linea 4 me imprime en un alert todos los value, y lo hace bien

Mi problema ahorita es que no encuentro la forma de decirle al JS, mira si yo presiono el botón ELIMINAR eliminame o mejor dicho mandame el id del input que tenes a la par  :-/

Sera que tengo esperanza o mejor desisto ??