Come ottenere il valore della casella di testo in JavaScript

97

Sto cercando di utilizzare JavaScript per ottenere il valore da una casella di testo HTML ma il valore non viene dopo lo spazio bianco

Per esempio:

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

Ottengo solo: "software" da quanto sopra. Sto usando uno script come questo:

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

Come ottengo il valore completo: "ingegnere del software"?

javascript html

— Gnaniyar Zubair
fonte

63

+1 Gumbo: "id" è il modo più semplice per accedere agli elementi della pagina. IE (pre versione 8) restituirà cose con un "nome" corrispondente se non riesce a trovare nulla con l'ID dato, ma questo è un bug.

ricevo solo "software".

id-vs-name non influirà su questo; Sospetto che quello che è successo sia che (contrariamente al codice di esempio) ti sei dimenticato di citare l'attributo "valore":

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

— bobince
fonte

77

Il tuo elemento non ha un ID ma solo un nome. Quindi puoi utilizzare il getElementsByName()metodo per ottenere un elenco di tutti gli elementi con questo nome:

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

Oppure assegni un ID all'elemento:

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

— Gumbo
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);

il problema che non stai usando la codifica per i valori di input dal modulo, quindi non il browser aggiunge quelli a ...

ontop ha alcuni problemi come le operazioni di codifica / decodifica Unicode quindi usa questa funzione codifica stringhe / array

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

Imposta l' idattributo di inputa txtJob. Il tuo browser si comporta in modo strano quando chiami getElementById.

— Daniel A. White
fonte

4

Se si utilizza ASP.NET, i tag di codice lato server in questi esempi di seguito forniranno l'ID di controllo esatto, anche se si utilizzano pagine master.

Javascript:

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

JQuery:

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

— Sham
fonte

3

Se è in una forma, allora sarebbe:

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

Quindi diresti in javascript:

var val= document.jojo.jobtitle.value

document.formname.elementname

— Jim
fonte

3

Fornito quando si desidera il valore della casella di testo. Semplice:

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

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

— Vicky Chaudhary
fonte

0

Se stai utilizzando un controllo utente e desideri ottenere i valori della casella di testo, puoi utilizzare il codice seguente:

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

Qui, LE_OtherCostsDetailsè il nome del controllo utente ed txtHomeOwnerInsuranceè l'ID della casella di testo.

— Ranjan Srivastava
fonte

0

Il problema è che hai fatto un piccolo errore!

Questo è il codice JS che utilizzo:

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

Non dovresti usare name = "". usa invece id = "".

— 1010
fonte

0

È necessario modificare il codice come di seguito: -

<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

perché hai usato lo spazio tra il software engineer html / php non supporterà lo spazio tra il valore sotto la casella di testo, devi usare questo codice <input type="text" name="txtJob" value=software_engineer> Funzionerà

— Vikas Sharma
fonte

0

 var jobValue=document.FormName.txtJob.value;

Prova il codice sopra.

jobValue: nome della variabile.
FormName: nome del modulo in html.
txtJob: nome della casella di testo

— 27px
fonte

0

Questo dovrebbe essere semplice 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

Imposta l'ID per la casella di testo. cioè

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

In javascript

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

In Jquery

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