ฉันจะรับค่าฟิลด์ป้อนข้อความโดยใช้ JavaScript ได้อย่างไร

ฉันทำงานกับการค้นหาด้วย JavaScript ฉันจะใช้แบบฟอร์ม แต่มันทำให้อย่างอื่นในหน้าของฉัน ฉันมีช่องป้อนข้อความนี้:

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

และนี่คือรหัส JavaScript ของฉัน:

<script type="text/javascript">
  function searchURL(){
    window.location = "http://www.myurl.com/search/" + (input text value);
  }
</script>

ฉันจะรับค่าจากฟิลด์ข้อความใน JavaScript ได้อย่างไร

มีวิธีการมากมายในการรับค่ากล่องข้อความเข้าโดยตรง (โดยไม่ต้องห่อองค์ประกอบอินพุตภายในองค์ประกอบของแบบฟอร์ม):

วิธีที่ 1:

document.getElementById('textbox_id').value เพื่อรับค่าของกล่องที่ต้องการ

ตัวอย่างเช่น, document.getElementById("searchTxt").value;

หมายเหตุ:วิธี 2,3,4 และ 6 ส่งคืนชุดขององค์ประกอบดังนั้นให้ใช้ [whole_number] เพื่อรับสิ่งที่ต้องการ สำหรับองค์ประกอบแรกใช้ [0] สำหรับองค์ประกอบที่สองใช้1และอื่น ๆ ...

วิธีที่ 2:

ใช้ document.getElementsByClassName('class_name')[whole_number].valueที่ส่งคืน Live HTMLCollection

ตัวอย่างเช่น document.getElementsByClassName("searchField")[0].value;หากนี่คือกล่องข้อความแรกในหน้าของคุณ

วิธีที่ 3:

ใช้document.getElementsByTagName('tag_name')[whole_number].valueซึ่งยังส่งคืน HTMLCollection แบบสด

ตัวอย่างเช่น document.getElementsByTagName("input")[0].value;หากนี่คือกล่องข้อความแรกในหน้าของคุณ

วิธีที่ 4:

document.getElementsByName('name')[whole_number].value ซึ่งยัง> ส่งคืน live NodeList

ตัวอย่างเช่น document.getElementsByName("searchTxt")[0].value;หากนี่คือกล่องข้อความแรกที่มีชื่อ 'searchtext' ในหน้าของคุณ

วิธีที่ 5:

ใช้อันทรงพลังdocument.querySelector('selector').valueซึ่งใช้ตัวเลือก CSS เพื่อเลือกองค์ประกอบ

ตัวอย่างเช่น document.querySelector('#searchTxt').value;เลือกโดย id
document.querySelector('.searchField').value;เลือกโดยคลาสที่
document.querySelector('input').value;เลือกโดย tagname ที่
document.querySelector('[name="searchTxt"]').value;เลือกตามชื่อ

วิธีที่ 6:

document.querySelectorAll('selector')[whole_number].value ซึ่งใช้ตัวเลือก CSS เพื่อเลือกองค์ประกอบ แต่จะส่งคืนองค์ประกอบทั้งหมดด้วยตัวเลือกนั้นเป็น Nodelist แบบคงที่

ตัวอย่างเช่น document.querySelectorAll('#searchTxt')[0].value; เลือกโดย id
document.querySelectorAll('.searchField')[0].value;เลือกโดยคลาสที่
document.querySelectorAll('input')[0].value; เลือกโดย tagname ที่
document.querySelectorAll('[name="searchTxt"]')[0].value;เลือกตามชื่อ

สนับสนุน

Browser          Method1   Method2  Method3  Method4    Method5/6
IE6              Y(Buggy)   N        Y        Y(Buggy)   N
IE7              Y(Buggy)   N        Y        Y(Buggy)   N
IE8              Y          N        Y        Y(Buggy)   Y
IE9              Y          Y        Y        Y(Buggy)   Y
IE10             Y          Y        Y        Y          Y
FF3.0            Y          Y        Y        Y          N    IE=Internet Explorer
FF3.5/FF3.6      Y          Y        Y        Y          Y    FF=Mozilla Firefox
FF4b1            Y          Y        Y        Y          Y    GC=Google Chrome
GC4/GC5          Y          Y        Y        Y          Y    Y=YES,N=NO
Safari4/Safari5  Y          Y        Y        Y          Y
Opera10.10/
Opera10.53/      Y          Y        Y        Y(Buggy)   Y
Opera10.60
Opera 12         Y          Y        Y        Y          Y

ลิงค์ที่มีประโยชน์

1. หากต้องการดูการสนับสนุนวิธีการเหล่านี้พร้อมข้อบกพร่องทั้งหมดรวมถึงรายละเอียดเพิ่มเติมคลิกที่นี่
2. ความแตกต่างระหว่างชุดรวมคงและชุดรวมสดคลิกที่นี่
3. ความแตกต่างระหว่าง NodeList และ HTMLCollection คลิกที่นี่

//creates a listener for when you press a key
window.onkeyup = keyup;

//creates a global Javascript variable
var inputTextValue;

function keyup(e) {
  //setting your input text to the global Javascript Variable for every key press
  inputTextValue = e.target.value;

  //listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
  if (e.keyCode == 13) {
    window.location = "http://www.myurl.com/search/" + inputTextValue;
  }
}

ดูการทำงานนี้เป็น codepen

ฉันจะสร้างตัวแปรเพื่อเก็บอินพุตเช่นนี้

var input = document.getElementById("input_id").value;

แล้วฉันจะใช้ตัวแปรเพื่อเพิ่มค่าอินพุตให้กับสตริง

= "Your string" + input;

คุณควรจะพิมพ์:

var input = document.getElementById("searchTxt");

function searchURL() {
     window.location = "http://www.myurl.com/search/" + input.value;
}

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

ฉันแน่ใจว่ามีวิธีที่ดีกว่าในการทำเช่นนี้ แต่วิธีนี้ดูเหมือนจะใช้ได้กับทุกเบราว์เซอร์และต้องใช้ความเข้าใจขั้นต่ำของ JavaScript ในการสร้างปรับปรุงและแก้ไข

นอกจากนี้คุณยังสามารถโทรด้วยชื่อแท็กเช่นนี้form_name.input_name.value; ดังนั้นคุณจะมีค่าเฉพาะของอินพุตที่กำหนดในรูปแบบเฉพาะ

ลองอันนี้

<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
    window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>

ทดสอบใน Chrome และ Firefox:

รับค่าตามรหัสองค์ประกอบ:

<input type="text" maxlength="512" id="searchTxt" class="searchField"/>
<input type="button" value="Get Value" onclick="alert(searchTxt.value)">

กำหนดค่าในองค์ประกอบแบบฟอร์ม:

<form name="calc" id="calculator">
  <input type="text" name="input">
  <input type="button" value="Set Value" onclick="calc.input.value='Set Value'">
</form>

https://jsfiddle.net/tuq79821/

ดูการใช้งานเครื่องคิดเลข JavaScript ได้ที่: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

อัปเดตจาก @ bugwheels94: เมื่อใช้วิธีนี้ให้ระวังปัญหานี้

คุณสามารถใช้ onkeyup เมื่อคุณมีช่องใส่เพิ่มเติม สมมติว่าคุณมีสี่หรืออินพุตจาก document.getElementById('something').valueนั้นเป็นที่น่ารำคาญ เราจำเป็นต้องเขียน 4 บรรทัดเพื่อดึงค่าของฟิลด์อินพุต

ดังนั้นคุณสามารถสร้างฟังก์ชั่นที่จัดเก็บค่าในวัตถุในเหตุการณ์คีย์อัพหรือคีย์ดาวน์

ตัวอย่าง:

<div class="container">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</div>

จาวาสคริปต์:

<script>
    const data={ };
    function handleInput(e){
        data[e.name] = e.value;
    }
    function submitData(){
        console.log(data.fname); //get first name from object
        console.log(data); //return object
    }
</script>

หนึ่งสามารถใช้ form.elements เพื่อรับองค์ประกอบทั้งหมดในแบบฟอร์ม หากองค์ประกอบมีรหัสจะสามารถพบกับ .namedItem ("id") ตัวอย่าง:

var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;

ที่มา: w3schools

หากคุณinputอยู่ในformและคุณต้องการรับค่าหลังจากส่งคุณสามารถทำได้

<form onsubmit="submitLoginForm(event)">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

<script type="text/javascript">

    function submitLoginForm(event){
        event.preventDefault();

        console.log(event.target['name'].value);
        console.log(event.target['password'].value);
    }
</script>

ประโยชน์ของวิธีนี้: ตัวอย่างหน้าเว็บของคุณมี2 formสำหรับการป้อนข้อมูลsenderและreceiverข้อมูล

หากคุณไม่ได้ใช้formเพื่อรับค่า
- คุณสามารถตั้งค่าที่แตกต่างกัน 2 id(หรือtagหรือname... ) สำหรับแต่ละฟิลด์เช่นsender-nameและreceiver-name, sender-addressและreceiver-address, ...
- หากคุณตั้งค่าเดียวกันสำหรับอินพุต 2 จากนั้นหลังจากgetElementsByName(หรือgetElementsByTagName.. .) คุณต้องจำไว้เป็น 0 หรือ 1 หรือsender receiverในภายหลังหากคุณเปลี่ยนลำดับที่ 2 formใน html คุณจะต้องตรวจสอบรหัสนี้อีกครั้ง

หากคุณใช้formแล้วคุณสามารถใช้name, address...

<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>

js ง่าย ๆ

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}

คุณสามารถอ่านค่าโดย

searchTxt.value

function searchURL() {
   let txt = searchTxt.value;
   console.log(txt);
   // window.location = "http://www.myurl.com/search/" + txt; ...
}

document.querySelector('.search').addEventListener("click", ()=>searchURL());

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

<button class="search">Search</button>

หากคุณใช้ jQuery โดยใช้ปลั๊กอิน formInteract คุณต้องทำสิ่งนี้:

// Just keep the HTML as it is.

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

ที่ด้านล่างของหน้าเพียงรวมไฟล์ปลั๊กอินนี้และเขียนรหัสนี้:

// Initialize one time at the bottom of the page.
var search= $("#searchTxt).formInteract();

search.getAjax("http://www.myurl.com/search/", function(rsp){
    // Now do whatever you want to with your response
});

หรือหากใช้ URL ที่กำหนดพารามิเตอร์ให้ใช้สิ่งนี้:

$.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){
    // Now do work with your response;
})

นี่คือลิงค์ไปยังโครงการhttps://bitbucket.org/ranjeet1985/forminteract

คุณสามารถใช้ปลั๊กอินนี้เพื่อวัตถุประสงค์ต่าง ๆ เช่นรับค่าของฟอร์มใส่ค่าลงในฟอร์มการตรวจสอบความถูกต้องของฟอร์มและอีกมากมาย คุณสามารถดูตัวอย่างของรหัสในไฟล์ index.html ของโครงการ

แน่นอนฉันเป็นผู้เขียนโครงการนี้และยินดีต้อนรับทุกคนให้ดีขึ้น