Existen varios métodos para obtener un valor de cuadro de texto de entrada directamente (sin envolver el elemento de entrada dentro de un elemento de formulario):
Método 1:
document.getElementById('textbox_id').value
para obtener el valor de la caja deseada
Por ejemplo, document.getElementById("searchTxt").value;
Nota: Los métodos 2, 3, 4 y 6 devuelven una colección de elementos, por lo tanto, use [número_ entero] para obtener la aparición deseada. Para el primer elemento, use [0], para el segundo use 1 , y así sucesivamente ...
Método 2:
Uso
document.getElementsByClassName('class_name')[whole_number].value
que devuelve una colección Live HTMLC
Por ejemplo, document.getElementsByClassName("searchField")[0].value;
si este es el primer cuadro de texto en su página.
Método 3:
Uso document.getElementsByTagName('tag_name')[whole_number].value
que también devuelve una colección HTMLC en vivo
Por ejemplo, document.getElementsByTagName("input")[0].value;
si este es el primer cuadro de texto en su página.
Método 4:
document.getElementsByName('name')[whole_number].value
que también> devuelve una NodeList en vivo
Por ejemplo, document.getElementsByName("searchTxt")[0].value;
si este es el primer cuadro de texto con el nombre 'searchtext' en su página.
Método 5:
Use el poderoso document.querySelector('selector').value
que usa un selector CSS para seleccionar el elemento
Por ejemplo, document.querySelector('#searchTxt').value;
seleccionado por id
document.querySelector('.searchField').value;
seleccionado por clase
document.querySelector('input').value;
seleccionado por tagname
document.querySelector('[name="searchTxt"]').value;
seleccionado por nombre
Método 6:
document.querySelectorAll('selector')[whole_number].value
que también usa un selector CSS para seleccionar elementos, pero devuelve todos los elementos con ese selector como una lista de nodos estática.
Por ejemplo, document.querySelectorAll('#searchTxt')[0].value;
seleccionado por id
document.querySelectorAll('.searchField')[0].value;
seleccionado por clase
document.querySelectorAll('input')[0].value;
seleccionado por tagname
document.querySelectorAll('[name="searchTxt"]')[0].value;
seleccionado por nombre
Apoyo
Browser Method1 Method2 Method3 Method4 Method5/6
IE6 Y(Buggy) N Y Y(Buggy) N
IE7 Y(Buggy) N Y Y(Buggy) N
IE8 Y N Y Y(Buggy) Y
IE9 Y Y Y Y(Buggy) Y
IE10 Y Y Y Y Y
FF3.0 Y Y Y Y N IE=Internet Explorer
FF3.5/FF3.6 Y Y Y Y Y FF=Mozilla Firefox
FF4b1 Y Y Y Y Y GC=Google Chrome
GC4/GC5 Y Y Y Y Y Y=YES,N=NO
Safari4/Safari5 Y Y Y Y Y
Opera10.10/
Opera10.53/ Y Y Y Y(Buggy) Y
Opera10.60
Opera 12 Y Y Y Y Y
Enlaces útiles
- Para ver la compatibilidad de estos métodos con todos los errores, incluidos más detalles, haga clic aquí
- Diferencia entre colecciones estáticas y colecciones en vivo, haga clic aquí
- Diferencia entre NodeList y HTMLCollection haga clic aquí
querySelector
es compatible jsfiddle.net/syNvz/show y QSA también jsfiddle.net/syNvz/2/showVea este funcionamiento en codepen.
fuente
Crearía una variable para almacenar la entrada de esta manera:
Y luego simplemente usaría la variable para agregar el valor de entrada a la cadena.
= "Your string" + input;
fuente
Debería poder escribir:
Estoy seguro de que hay mejores formas de hacerlo, pero parece que funciona en todos los navegadores, y requiere una comprensión mínima de JavaScript para crear, mejorar y editar.
fuente
También puede, llamar por nombres de etiquetas, de esta manera:
form_name.input_name.value;
Entonces tendrá el valor específico de la entrada determinada en una forma específica.fuente
Prueba este
fuente
Probado en Chrome y Firefox:
Obtener valor por elemento id:
Establecer valor en elemento de formulario:
https://jsfiddle.net/tuq79821/
También eche un vistazo a la implementación de una calculadora de JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html
ACTUALIZACIÓN de @ bugwheels94: al usar este método, tenga en cuenta este problema .
fuente
Puede usar onkeyup cuando tenga más campo de entrada. Supongamos que tiene cuatro o input.then
document.getElementById('something').value
es molesto. Necesitamos escribir 4 líneas para obtener el valor del campo de entrada.Por lo tanto, puede crear una función que almacene valor en el objeto en el evento keyup o keydown.
Ejemplo:
javascript:
fuente
Uno puede usar el form.elements para obtener todos los elementos en un formulario. Si un elemento tiene id, se puede encontrar con .namedItem ("id"). Ejemplo:
Fuente: w3schools
fuente
Si
input
está en unform
y desea obtener valor después de enviar, puede hacer comoBeneficio de esta manera: Ejemplo, su página tiene 2
form
para entradasender
ereceiver
información.Si no se utiliza
form
para el valor get a continuación- Puede configurar 2 diferente
id
(otag
, oname
...) para cada campo comosender-name
yreceiver-name
,sender-address
yreceiver-address
, ...- Si configura mismo valor para la entrada 2, a continuación, después
getElementsByName
(ogetElementsByTagName
.. .) necesita recordar 0 o 1 essender
oreceiver
. Más adelante, si cambia el orden de 2form
en html, debe verificar este código nuevamenteSi se utiliza
form
, a continuación, se puede utilizarname
,address
...fuente
fuente
js simple
fuente
Puedes leer el valor por
Mostrar fragmento de código
fuente
Si está utilizando jQuery, entonces utilizando plugin formInteract, solo necesita hacer esto:
En la parte inferior de la página solo incluya este archivo de complemento y escriba este código:
O si usa una URL parametrizada, use esto:
Aquí está el enlace al proyecto https://bitbucket.org/ranjeet1985/forminteract
Puede usar este complemento para muchos propósitos, como obtener el valor de un formulario, poner valores en un formulario, validación de formularios y muchos más. Puede ver algún ejemplo de código en el archivo index.html del proyecto.
Por supuesto, soy el autor de este proyecto y todos son bienvenidos para mejorarlo.
fuente