Pasar selección a Input y otros retos JavaScript

[KATHYU]

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 

Quizas ustedes que ven de otra forma el script me den la luz de donde esta mi problema. GRACIAS.

[el-mago]

Aqui te lo dejo mira: https://jsfiddle.net/6bpuksp5/

[KATHYU]

En efecto, funciona a la perfeccion mago 
Pero que es lo que falla en los dos scripts anteriores, que por cierto en otra ocasión ya los he hecho trabajar ??

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 

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

[rdoggsv]

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


[KATHYU]

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 

[el-mago]

tambien podes ver este ejemplo: https://jsfiddle.net/uLy7qtzb/

var opcion = document.getElementById("grupo").selectedIndex;
var texto = document.getElementById("grupo").options[opcion].text;
document.getElementById("name_grupo").value = texto;

[KATHYU]

tambien podes ver este ejemplo: https://jsfiddle.net/uLy7qtzb/

En efecto muy bueno 

Les agradezco a ambos la lección

[rdoggsv]

 

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.

[KATHYU]

Este tema se puso bonito por eso les tengo otro reto 

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 

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 

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

[KATHYU]

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 

[KATHYU]

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