Cómo obtener el valor del cuadro de texto en JavaScript

97

Estoy tratando de usar JavaScript para obtener el valor de un cuadro de texto HTML, pero el valor no viene después del espacio en blanco

Por ejemplo:

<input type="text" name="txtJob" value="software engineer">

Solo obtengo: "software" de lo anterior. Estoy usando un script como este:

var jobValue = document.getElementById('txtJob').value

¿Cómo obtengo el valor total: "ingeniero de software"?

javascript html

— Gnaniyar Zubair
fuente

63

+1 Gumbo: 'id' es la forma más fácil de acceder a los elementos de la página. IE (versión anterior a 8) devolverá cosas con un 'nombre' coincidente si no puede encontrar nada con la ID dada, pero esto es un error.

obtengo sólo "software".

id-vs-name no afectará esto; Sospecho que lo que sucedió es que (al contrario del código de ejemplo) se olvidó de citar su atributo 'valor':

<input type="text" name="txtJob" value=software engineer>

— bobince
fuente

77

Tu elemento no tiene una identificación, solo un nombre. Entonces puede usar el getElementsByName()método para obtener una lista de todos los elementos con este nombre:

var jobValue = document.getElementsByName('txtJob')[0].value  // first element in DOM  (index 0) with name="txtJob"

O le asigna un ID al elemento:

<input type="text" name="txtJob" id="txtJob" value="software engineer">

— Gumbo
fuente

11

var word = document.getElementById("word").value;//by id
or
var word = document.forms[0].elements[0].value;//by index
//word = a word from form input
var kodlandi = escape(word);//apply url encoding

alert(escape(word));
or
alert(kodlandi);

el problema es que no está utilizando la codificación para los valores de entrada desde el formulario, por lo que el navegador no agrega unos a ...

ontop tiene algunos problemas como operaciones de codificación / decodificación Unicode, así que use esta función para codificar cadenas / matrices

function urlencode( str ) 
{
// http://kevin.vanzonneveld.net3.    
// +   original by: Philip Peterson4.    
// +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)5.    
// *     example 1: urlencode('Kevin van Zonneveld!');
// *     returns 1: 'Kevin+van+Zonneveld%21'7. 
   var ret = str; 
   ret = ret.toString();
   ret = encodeURIComponent(ret);
   ret = ret.replace(/%20/g, '+');
   return ret;
}


ex.
var word = "some word";
word = urlencode(word);

— feritar
fuente

7

<!DOCTYPE html>
<html>
<body>
<label>Enter your Name here: </label><br>
<input type= text id="namehere" onchange="displayname()"><br>


<script>
function displayname() {
    document.getElementById("demo").innerHTML = 
document.getElementById("namehere").value;
}

</script>


<p id="demo"></p>

</body>
</html>

— zakara
fuente

4

Establezca el idatributo de inputa txtJob. Su navegador se comporta de forma extraña cuando llama getElementById.

— Daniel A. White
fuente

4

Si está utilizando ASP.NET, las etiquetas de código del lado del servidor en estos ejemplos a continuación proporcionarán el ID de control exacto, incluso si está utilizando páginas maestras.

Javascript:

document.getElementById("<%=MyControlName.ClientID%>").value;

JQuery:

$("#<%= MyControlName.ClientID %>").val();

— Impostor
fuente

3

Si está en una forma, entonces sería:

<form name="jojo">
<input name="jobtitle">
</form>

Entonces dirías en javascript:

var val= document.jojo.jobtitle.value

document.formname.elementname

— Jim
fuente

3

Se proporciona cuando desea el valor del cuadro de texto. Uno simple:

<input type="text" value="software engineer" id="textbox">

var result = document.getElementById("textbox").value;

— Vicky Chaudhary
fuente

0

Si está usando cualquier control de usuario y desea obtener valores de cuadro de texto, puede usar el siguiente código:

var result = document.getElementById('LE_OtherCostsDetails_txtHomeOwnerInsurance').value;

Aquí,, LE_OtherCostsDetailses el nombre del control de usuario y txtHomeOwnerInsurancees la identificación del cuadro de texto.

— Ranjan Srivastava
fuente

0

¡El problema es que cometiste un pequeño error!

Este es el código JS que uso:

var jobName = document.getElementById("txtJob").value;

No debe utilizar name = "". en su lugar use id = "".

— 1010
fuente

0

Necesita cambiar su código de la siguiente manera: -

<html>
<body>
<div>
<form align="center" method=post>
    <input id="mainText" type="text" align="center"placeholder="Search">

    <input type="submit" onclick="myFunction()" style="position: absolute; left: 450px"/>
</form>
</div>
<script>
function myFunction(){
    $a= document.getElementById("mainText").value;
    alert($a);
        }
</script>
</body>
</html>

— Vishal Thakur
fuente

0

debido a que usó espacio entre el ingeniero de software html / php no admitirá el espacio entre el valor en el cuadro de texto, debe usar este código <input type="text" name="txtJob" value=software_engineer> Funcionará

— Vikas Sharma
fuente

0

 var jobValue=document.FormName.txtJob.value;

Prueba ese código de arriba.

jobValue: nombre de la variable.
FormName: Nombre del formulario en html.
txtJob: nombre del cuadro de texto

— 27px
fuente

0

Esto debería ser simple usando jquery:

HTML:

  <input type="text" name="txtJob" value="software engineer">

JS:

  var jobValue = $('#txtJob').val(); //Get the text field value
  $('#txtJob').val(jobValue);        //Set the text field value

— JamesC
fuente

0

Establecer id para el cuadro de texto. es decir,

<input type="text" name="txtJob" value="software engineer" id="txtJob">

En javascript

var jobValue = document.getElementById('txtJob').value

En Jquery

 var jobValue =  $("#txtJob").val();