JavaScriptでテキストボックスの値を取得する方法

97

JavaScriptを使用してHTMLテキストボックスから値を取得しようとしていますが、空白の後に値がありません

例えば：

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

私は、「ソフトウェア」のみを取得しています。次のようなスクリプトを使用しています。

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

「ソフトウェアエンジニア」という完全な価値を得るにはどうすればよいですか？

javascript html

— グニャニヤルズバイル
ソース

63

+1ガンボ：「id」は、ページ要素にアクセスする最も簡単な方法です。IE（バージョン8より前）は、指定されたIDを持つものが見つからない場合、一致する「名前」を持つものを返しますが、これはバグです。

「ソフトウェア」のみを取得しています。

id-vs-nameはこれに影響しません。（例のコードとは逆に） 'value'属性を引用するのを忘れていたことが原因だと思います。

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

— ボビンス
ソース

77

要素にはIDはなく、名前だけがあります。したがってgetElementsByName()、メソッドを使用して、この名前のすべての要素のリストを取得できます。

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

または、要素にIDを割り当てます。

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

— ガンボ
ソース

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

フォームからの入力値にエンコーディングを使用していないため、ブラウザが値を追加しない問題...

ontopには、Unicodeエンコード/デコード操作としていくつかの問題があるため、文字列/配列をエンコードするこの関数を使用します

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

— 慈善
ソース

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>

— ザカラ
ソース

4

設定idの属性inputにしますtxtJob。あなたが呼び出すとき、あなたのブラウザは風変わりな振る舞いをしていますgetElementById。

— ダニエル・A・ホワイト
ソース

4

ASP.NETを使用している場合、以下の例のサーバー側コードタグは、マスターページを使用している場合でも、正確なコントロールIDを提供します。

JavaScript：

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

jQuery：

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

— シャム
ソース

3

フォームの場合は、次のようになります。

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

それからあなたはjavascriptで言うでしょう：

var val= document.jojo.jobtitle.value

document.formname.elementname

— ジム
ソース

3

テキストボックスの値が必要な場合に提供されます。単純なもの：

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

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

— ヴィッキー・チョーダリー
ソース

0

ユーザーコントロールを使用していて、テキストボックスの値を取得したい場合は、以下のコードを使用できます。

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

ここでLE_OtherCostsDetails、はユーザーコントロールの名前txtHomeOwnerInsuranceで、テキストボックスのIDです。

— ランジャンスリバスタヴァ
ソース

0

問題はあなたが小さな間違いを犯したことです！

これは私が使用するJSコードです：

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

name = ""は使用しないでください。代わりにid = ""を使用してください。

— 1010
ソース

0

以下のようにコードを変更する必要があります：-

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

— ヴィシャルタクル
ソース

0

あなたがソフトウェアエンジニアの間にスペースを使用しているため、HTML / PHPのテキストボックスの下に値の間にスペースをサポートしていませんが、あなたはこのコードを使用する必要があります <input type="text" name="txtJob" value=software_engineer> それは動作します

— ビカス・シャルマ
ソース

0

 var jobValue=document.FormName.txtJob.value;

上記のコードを試してください。

jobValue：変数名。
FormName：HTMLのフォームの名前。
txtJob：テキストボックス名

— 27px
ソース

0

これは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
ソース

0

テキストボックスのIDを設定します。つまり、

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

JavaScriptで

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

jqueryで

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