2

Quiero cambiar el texto de la etiqueta a con JavaScript, obtengo dos valores de un formulario y quiero pasarlo a la barra de navegación, pero no puedo.

<body>      
    <<div class="topnav">
        <a>Inicio</a>           
    </div>


    <div id="container">
        <h1>&bull; Datos de Sesion &bull;</h1>
        <div class="underline"></div>

        <form action="#" method="post" id="loguin_form" onsubmit="myFunction()">
            <div class="nombre">
              <label for="nombre"></label>
              <input type="text" placeholder="Nombre" name="nombre" id="nombre_input" required>
            </div>
            <div class="apellido">
              <label for="apellido"></label>
              <input type="text" placeholder="Apellido" name="apellido" id="apellido_input" required>
            </div>

            <div class="submit">
              <input type="submit" value="Ingresar" id="form_button" />
            </div>
        </form><!-- // End form -->
    </div><!-- // End #container -->
</body>

este es el JavaScript:

function myFunction() {
var nom, ape;
nom = document.forms["loguin_form"]['nombre'].value;
ape = document.forms["loguin_form"]['apellido'].value;
document.getElementsByTagName('a')[0].innerHTML = "Usuario: " + nom + " " + ape;
}

y no hay ningún cambio, como si no hubiese hecho el código. si coloco un alert con los datos que obtengo del formulario ellos aparecen.

3
  • La parte de cambiar el texto del anchor luce bien, pero no incluyes tu formulario loguin_form, que es donde parece estar el error.
    – jachguate
    Commented el 5 jun. 2019 a las 1:21
  • el formulario esta debajo del la etiqueta <a>, mejor dicho, es independiente del formulario. Commented el 5 jun. 2019 a las 1:23
  • no pongas la etiqueta de C++, pues claramente no estas usando dicho lenguaje
    – user128299
    Commented el 5 jun. 2019 a las 1:37

1 respuesta 1

2

En general el código de tu función luce bien. Hay un par de cambios que realizar, Si no debe haber envío real del formulario y lo que quieres es ejecutar la función:

  • La función debe retornar false
  • El OnSubmit debe retornar el valor de la función.
  • Referencia a los elementos <input> por su id, no por su nombre.

Esos cambios, darían como resultado algo como:

function myFunction() {
  var nom, ape;
  nom = document.forms["login_form"]['nombre_input'].value;
  ape = document.forms["login_form"]['apellido_input'].value;
  document.getElementsByTagName('a')[0].innerHTML = "Usuario: " + nom + " " + ape;
  console.log(nom + " " + ape);
  return false;
}
<body>
  <div class="topnav">
     <a id="envio">Inicio</a>            
   </div>
   <form id="login_form" OnSubmit="return myFunction();">
     <label for"nombre" />
     <input type="text" placeholder="Nombre" name="nombre" id="nombre_input" required /><br />
     <label for"apellido" />
     <input type="text" placeholder="Apellido" name="apelido" id="apellido_input" required /><br />
     <button type="submit">Actualizar</button>
   </form>
</body>

7
  • hola, gracias por responder. te cuento que funciona por milisegundos lo que me propones, en detalle, se realiza el cambio pero de inmediato se vuelve a su valor anterior, que es "Inicio". Sabes porque? Commented el 5 jun. 2019 a las 1:42
  • Ahora que veo cómo está tu formulario, actualicé mi respuesta. La había escrito antes de tu edición. Un saludo.
    – jachguate
    Commented el 5 jun. 2019 a las 1:44
  • hola, gracias por responder. te cuento que funciona por milisegundos lo que me propones, en detalle, se realiza el cambio pero de inmediato se vuelve a su valor anterior, que es "Inicio". Sabes porque? Commented el 5 jun. 2019 a las 1:48
  • ¿Eso te pasa al darle clic al botón ejecutar en mi respuesta?
    – jachguate
    Commented el 5 jun. 2019 a las 1:50
  • Pregunto porque a mi me funciona bien, en Chrome, ¿qué navegador utilizas?
    – jachguate
    Commented el 5 jun. 2019 a las 1:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.