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

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

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

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].valueque 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].valueque 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').valueque 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

1. Para ver la compatibilidad de estos métodos con todos los errores, incluidos más detalles, haga clic aquí
2. Diferencia entre colecciones estáticas y colecciones en vivo, haga clic aquí
3. Diferencia entre NodeList y HTMLCollection haga clic aquí

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

Vea este funcionamiento en codepen.

Crearía una variable para almacenar la entrada de esta manera:

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

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

= "Your string" + input;

Debería poder escribir:

var input = document.getElementById("searchTxt");

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

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

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.

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.

Prueba este

<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
    window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>

Probado en Chrome y Firefox:

Obtener valor por elemento id:

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

Establecer valor en 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: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

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

Puede usar onkeyup cuando tenga más campo de entrada. Supongamos que tiene cuatro o input.then document.getElementById('something').valuees 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:

<div class="container">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</div>

javascript:

<script>
    const data={ };
    function handleInput(e){
        data[e.name] = e.value;
    }
    function submitData(){
        console.log(data.fname); //get first name from object
        console.log(data); //return object
    }
</script>

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:

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

Fuente: w3schools

Si inputestá en un formy desea obtener valor después de enviar, puede hacer como

<form onsubmit="submitLoginForm(event)">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

<script type="text/javascript">

    function submitLoginForm(event){
        event.preventDefault();

        console.log(event.target['name'].value);
        console.log(event.target['password'].value);
    }
</script>

Beneficio de esta manera: Ejemplo, su página tiene 2 form para entrada sendere receiverinformación.

Si no se utiliza formpara el valor get a continuación
- Puede configurar 2 diferente id(o tag, o name...) para cada campo como sender-namey receiver-name, sender-addressy receiver-address, ...
- Si configura mismo valor para la entrada 2, a continuación, después getElementsByName(o getElementsByTagName.. .) necesita recordar 0 o 1 es sendero receiver. Más adelante, si cambia el orden de 2 formen html, debe verificar este código nuevamente

Si se utiliza form, a continuación, se puede utilizar name, address...

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

js simple

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}

Puedes leer el valor por

searchTxt.value

function searchURL() {
   let txt = searchTxt.value;
   console.log(txt);
   // window.location = "http://www.myurl.com/search/" + txt; ...
}

document.querySelector('.search').addEventListener("click", ()=>searchURL());

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

<button class="search">Search</button>

Si está utilizando jQuery, entonces utilizando 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 incluya este archivo de complemento y escriba 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 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.