JavaScript ile bir arama biraz üzerinde çalışıyorum, bir form kullanmak istiyorum ama benim sayfada başka bir şey gelmiyor. Bu giriş metin alanı var:

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

ve bu benim JavaScript:

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

Nasıl JavaScript içine metin alanından değeri alabilirim?

Giriş textbox değeri doğrudan elde etmek için çeşitli yöntemler (form öğesi içinde giriş elemanı kaydırma olmadan) vardır:

Yöntem 1:

document.getElementById('textbox_id').value değerini almak için kutu istenilen

Örn.document.getElementById("searchTxt").value;

Not :Yöntem 2,3,4 ve istediğiniz geçtiği için öğeleri kullanın [whole_number] yani bir koleksiyon döndürür, ilk öğe için kullanma 6 [0] ve ikinci bir 1 vb... kullanın

Yöntem 2:

Kullanın Canlı bir HTMLCollection verir, document.getElementsByClassName('class_name')[whole_number].value

Örn.Eğer bu sayfanızı ilk textbox ise document.getElementsByClassName("searchField")[0].value;.

Yöntem 3:

Ayrıca canlı bir HTMLCollection döndüren document.getElementsByTagName('tag_name')[whole_number].value kullanın

Örn.Eğer bu sayfanızı ilk textbox ise document.getElementsByTagName("input")[0].value; ,.

Yöntem 4:

Ayrıca ^ document.getElementsByName('name')[whole_number].value. döner canlı bir NodeList

Örn.Eğer bu ise document.getElementsByName("searchTxt")[0].value; adı ile ilk textbox 'searchtext' sayfanızda.

Yöntem 5:

CSS seçici öğesi seçmek için kullandığı kullanın. document.querySelector('selector').value güçlü

Örn.document.querySelector('#searchTxt').value; kimliği tarafından seçilen document.querySelector('.searchField').value; Sınıf tarafından seçilen document.querySelector('input').value; tagname tarafından seçilen document.querySelector('[name="searchTxt"]').value; adı ile seçilir

Yöntem 6:

Ayrıca CSS seçici ama statik bir Nodelist olarak seçici ile tüm öğeleri döndürür öğeleri seçmek için kullandığı document.querySelectorAll('selector')[whole_number].value.

Örn.document.querySelectorAll('#searchTxt')[0].value; kimliği tarafından seçilen document.querySelectorAll('.searchField')[0].value; sınıf tarafından seçilen document.querySelectorAll('input')[0].value; tagname tarafından seçilmiş
document.querySelectorAll('[name="searchTxt"]')[0].value; adı ile seçilir

Destek

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

Yararlı bağlantılar

1. To see the support of these methods with all the bugs including more details click here
2. Difference Between Static collections and Live collections click Here
3. Difference Between NodeList and HTMLCollection click Here