วิธีรับค่ากล่องข้อความใน JavaScript


98

ฉันพยายามใช้ JavaScript เพื่อรับค่าจากกล่องข้อความ HTML แต่ค่าไม่ได้มาหลังจากช่องว่าง

ตัวอย่างเช่น:

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

ฉันได้รับ: "ซอฟต์แวร์" จากข้างต้นเท่านั้น ฉันใช้สคริปต์เช่นนี้:

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

ฉันจะได้รับมูลค่าเต็ม: "วิศวกรซอฟต์แวร์" ได้อย่างไร?

คำตอบ:


63

+1 Gumbo: '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

หากคุณกำลังใช้ ASP.NET แท็กโค้ดฝั่งเซิร์ฟเวอร์ในตัวอย่างด้านล่างนี้จะให้รหัสควบคุมที่แน่นอนแม้ว่าคุณจะใช้มาสเตอร์เพจก็ตาม

Javascript:

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

jQuery:

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

3

หากอยู่ในรูปแบบจะเป็น:

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

จากนั้นคุณจะพูดในจาวาสคริปต์:

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เป็นรหัสของกล่องข้อความ


0



ปัญหาคือคุณทำผิดพลาดเล็กน้อย!

นี่คือรหัส JS ที่ฉันใช้:

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

คุณไม่ควรใช้ name = "" ใช้ id = "" แทน


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: ชื่อกล่องข้อความ


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

0

ตั้งรหัสสำหรับกล่องข้อความ กล่าวคือ

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

ในจาวาสคริปต์

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

ใน Jquery

 var jobValue =  $("#txtJob").val();
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.