validar - validacion de formularios con javascript ejemplos

¿Cómo obtengo el valor del campo de entrada de texto usando JavaScript?

Question

Estoy trabajando en una búsqueda con JavaScript. Usaría un formulario, pero desordena otra cosa en mi página. Tengo este campo de entrada de texto:

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

Y este es mi código JavaScript:

<script type="text/javascript">
  function searchURL(){
    window.location = "http://www.myurl.com/search/" + (input text value);
  }
</script>

¿Cómo obtengo el valor del campo de texto en JavaScript?

Answer 1

Debes poder escribir:

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

<script>
    var input = document.getElementById("searchTxt");

    function searchURL() {
         window.location = "http://www.myurl.com/search/" + input.value;
    }
</script>

Estoy seguro de que hay mejores maneras de hacer esto, pero esta parece funcionar en todos los navegadores y requiere una comprensión mínima de JavaScript para crear, mejorar y editar.

Answer 2

Existen varios métodos para obtener un valor de cuadro de texto de entrada directamente (sin incluir el elemento de entrada dentro de un elemento de formulario):

Método 1:

document.getElementById(''textbox_id'').value para obtener el valor del cuadro deseado

Por ejemplo, document.getElementById("searchTxt").value;

Nota: los métodos 2,3,4 y 6 devuelven una colección de elementos, así que use [whole_number] para obtener la aparición deseada. Para el primer elemento, use [0], para el segundo use 1 , y así sucesivamente ...

Método 2:

Use document.getElementsByClassName(''class_name'')[whole_number].value que devuelve una colección HTMLC en vivo

Por ejemplo, document.getElementsByClassName("searchField")[0].value; Si este es el primer cuadro de texto en tu página.

Método 3:

Use 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 tu página.

Método 4:

document.getElementsByName(''name'')[whole_number].value que también> devuelve una NodeList activa

Por ejemplo, document.getElementsByName("searchTxt")[0].value; si este es el primer cuadro de texto con el nombre ''searchtext'' en tu página.

Método 5:

Utilice el potente document.querySelector(''selector'').value que utiliza 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 de 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

1. 1
2. Diferencia entre colecciones estáticas y colecciones en vivo, haga clic aquí
3. Diferencia entre NodeList y HTMLCollection haga clic aquí

Answer 3

Me gustaría crear una variable para almacenar la entrada de esta manera:

var input = document.getElementById("input_id").value;

Y luego solo usaría la variable para agregar el valor de entrada a la cadena.

= "Your string" + input;

Answer 4

Probado en Chrome y Firefox:

Obtener valor por id de elemento:

<input type="text" maxlength="512" id="searchTxt" class="searchField"/>
<input type="button" value="Get Value" onclick="alert(searchTxt.value)">

Establecer valor en el elemento de formulario:

<form name="calc" id="calculator">
  <input type="text" name="input">
  <input type="button" value="Set Value" onclick="calc.input.value=''Set Value''">
</form>

https://jsfiddle.net/tuq79821/

También eche un vistazo a la implementación de una calculadora de JavaScript: 4stud.info/web-programming/samples/dhtml-calculator.html

ACTUALIZACIÓN de @ bugwheels94: cuando use este método, tenga en cuenta este problema .

Answer 5

Prueba este

<input type="text" onKeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value)
{

window.open("http://www.google.co.in/search?output=search&q="+value)

}
</script>

Answer 6

Si está utilizando jQuery, mediante el uso de plugin formInteract, solo necesita hacer esto:

// Just keep the HTML as it is.

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

En la parte inferior de la página solo incluye este archivo de complemento y escribe este código:

// Initialize one time at the bottom of the page.
var search= $("#searchTxt).formInteract();

search.getAjax("http://www.myurl.com/search/", function(rsp){
    // Now do whatever you want to with your response
});

O si usa una URL parametrizada, use esto:

$.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){
    // Now do work with your response;
})

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 algunos ejemplos de código en el archivo index.html del proyecto.

Por supuesto, soy el autor de este proyecto y todos son bienvenidos para mejorarlo.

Answer 7

También puede, llamar por nombres de etiquetas, como este: form_name.input_name.value; Así tendrá el valor específico de la entrada determinada en una forma específica.

Answer 8

Uno puede usar los form.elements para obtener todos los elementos en un formulario. Si un elemento tiene id, se puede encontrar con .namedItem ("id"). Ejemplo:

var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;

Fuente: w3schools

Answer 9

<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>

Answer 10

//creates a listener for when you press a key
window.onkeyup = keyup;

//creates a global Javascript variable
var inputTextValue;

function keyup(e) {
  //setting your input text to the global Javascript Variable for every key press
  inputTextValue = e.target.value;

  //listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
  if (e.keyCode == 13) {
    window.location = "http://www.myurl.com/search/" + inputTextValue;
  }
}

Ver este funcionamiento en codepen.