Jak uzyskać wartość pola tekstowego w JavaScript

97

Próbuję użyć JavaScript, aby uzyskać wartość z pola tekstowego HTML, ale wartość nie pojawia się po spacji

Na przykład:

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

Dostaję tylko: "oprogramowanie" z powyższego. Używam takiego skryptu:

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

Jak uzyskać pełną wartość: „inżynier oprogramowania”?

javascript html Gnaniyar Zubair
źródło

Odpowiedzi:

63

+1 Gumbo: „identyfikator” to najłatwiejszy sposób na dostęp do elementów strony. IE (przed wersją 8) zwróci rzeczy o pasującej nazwie, jeśli nie może znaleźć niczego o podanym identyfikatorze, ale jest to błąd.

dostaję tylko „oprogramowanie”.

id-vs-name nie wpłynie na to; Podejrzewam, że doszło do tego, że (w przeciwieństwie do przykładowego kodu) zapomniałeś podać atrybut „wartość”:

<input type="text" name="txtJob" value=software engineer>
bobince
źródło
77

Twój element nie ma identyfikatora, ale tylko nazwę. Możesz więc użyć getElementsByName()metody, aby uzyskać listę wszystkich elementów o tej nazwie:

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

Lub przypisujesz identyfikator do elementu:

<input type="text" name="txtJob" id="txtJob" value="software engineer">
Gumbo
źródło
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);

problem, że nie używasz kodowania dla wartości wejściowych z formularza, więc przeglądarka nie dodaje je do ...

ontop ma pewne problemy związane z operacjami kodowania / dekodowania Unicode, więc użyj tej funkcji do kodowania łańcuchów / tablic

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
źródło
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
źródło
4

Ustaw idatrybut inputto txtJob. Twoja przeglądarka działa dziwacznie, kiedy dzwonisz getElementById.

Daniel A. White
źródło
4

Jeśli korzystasz z programu ASP.NET, tagi kodu po stronie serwera w poniższych przykładach podają dokładny identyfikator kontrolki, nawet jeśli używasz stron wzorcowych.

JavaScript:

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

JQuery:

$("#<%= MyControlName.ClientID %>").val();
Pozorny
źródło
3

Jeśli jest w formie, to byłoby:

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

Następnie powiedziałbyś w javascript:

var val= document.jojo.jobtitle.value

document.formname.elementname
Jim
źródło
3

Podawany, gdy chcesz uzyskać wartość pola tekstowego. Prosty:

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

var result = document.getElementById("textbox").value;
Vicky Chaudhary
źródło
0

Jeśli używasz dowolnej kontrolki użytkownika i chcesz uzyskać dowolne wartości pola tekstowego, możesz użyć poniższego kodu:

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

Tutaj LE_OtherCostsDetailsjest nazwą kontrolki użytkownika i txtHomeOwnerInsurancejest identyfikatorem pola tekstowego.

Ranjan Srivastava
źródło
0



Problem w tym, że zrobiłeś mały błąd!

Oto kod JS, którego używam:

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

Nie powinieneś używać name = "". zamiast tego użyj id = "".

1010
źródło
0

Musisz zmienić swój kod jak poniżej: -

<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
źródło
0

ponieważ użyłeś spacji między inżynierem oprogramowania html / php nie będzie wspierać spacji między wartością pod polem tekstowym, musisz użyć tego kodu <input type="text" name="txtJob" value=software_engineer> To zadziała

Vikas Sharma
źródło
0 
 var jobValue=document.FormName.txtJob.value;

Wypróbuj ten kod powyżej.

jobValue: nazwa zmiennej.
FormName: nazwa formularza w html.
txtJob: nazwa pola tekstowego

27px
źródło
0

Powinno to być proste przy użyciu 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
źródło
0

Ustaw identyfikator dla pola tekstowego. to znaczy,

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

W javascript 

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

W Jquery

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

źródło