Como obter o valor da caixa de texto em JavaScript

97

Estou tentando usar JavaScript para obter o valor de uma caixa de texto HTML, mas o valor não vem depois do espaço em branco

Por exemplo:

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

Eu só recebo: "software" do acima. Estou usando um script como este:

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

Como obtenho o valor total: "engenheiro de software"?

javascript html Gnaniyar Zubair
fonte

Respostas:

63

+1 Gumbo: 'id' é a maneira mais fácil de acessar os elementos da página. O IE (pré-versão 8) retornará coisas com um 'nome' correspondente se não puder encontrar nada com o ID fornecido, mas isso é um bug.

estou recebendo apenas "software".

id-vs-name não afetará isso; Suspeito que o que aconteceu é que (ao contrário do código de exemplo) você se esqueceu de citar seu atributo 'valor':

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

Seu elemento não tem um ID, mas apenas um nome. Portanto, você pode usar o getElementsByName()método para obter uma lista de todos os elementos com este nome:

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

Ou você atribui um ID ao elemento:

<input type="text" name="txtJob" id="txtJob" value="software engineer">
quiabo
fonte
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);

o problema é que você não está usando codificação para valores de entrada do formulário, portanto, o navegador não os adiciona a ...

Ontop tem alguns problemas como operações de codificação / decodificação Unicode, então use esta função codificando strings / matrizes

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);
ferit
fonte
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
fonte
4

Defina o idatributo de inputpara txtJob. Seu navegador está agindo de forma estranha quando você liga getElementById.

Daniel A. White
fonte
4

Se você estiver usando ASP.NET, as marcas de código do lado do servidor nos exemplos abaixo fornecerão a ID de controle exata, mesmo se você estiver usando páginas mestras.

Javascript:

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

JQuery:

$("#<%= MyControlName.ClientID %>").val();
Farsa, falso
fonte
3

Se estiver em um formulário, seria:

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

Então você diria em javascript:

var val= document.jojo.jobtitle.value

document.formname.elementname
Jim
fonte
3

Fornecido quando você deseja o valor da caixa de texto. Simples:

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

var result = document.getElementById("textbox").value;
Vicky Chaudhary
fonte
0

Se você estiver usando qualquer controle de usuário e quiser obter quaisquer valores de caixa de texto, poderá usar o código a seguir:

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

Aqui,, LE_OtherCostsDetailsé o nome do controle do usuário e txtHomeOwnerInsuranceé o id da caixa de texto.

Ranjan Srivastava
fonte
0



O problema é que você cometeu um pequeno erro!

Este é o código JS que uso:

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

Você não deve usar name = "". em vez disso, use id = "".

1010
fonte
0

Você precisa alterar seu código conforme abaixo: -

<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
fonte
0

porque você usou espaço entre o engenheiro de software html / php não suportará o espaço entre o valor sob a caixa de texto, você deve usar este código. <input type="text" name="txtJob" value=software_engineer> Funcionará

Vikas Sharma
fonte
0 
 var jobValue=document.FormName.txtJob.value;

Experimente o código acima.

jobValue: nome da variável.
FormName: Nome do formulário em html.
txtJob: Nome da caixa de texto

27px
fonte
0

Isso deve ser simples 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
fonte
0

Defina o id para a caixa de texto. ie,

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

Em javascript 

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

Em Jquery

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

fonte