मुझे जावास्क्रिप्ट का उपयोग करके टेक्स्ट इनपुट फ़ील्ड का मूल्य कैसे मिलेगा?

Question

मैं जावास्क्रिप्ट के साथ एक खोज पर काम कर रहा हूं। मैं एक फ़ॉर्म का उपयोग करूंगा, लेकिन यह मेरे पृष्ठ पर कुछ और गड़बड़ करता है। मैं इस लेख इनपुट करें फ़ील्ड है:

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

और यह मेरा जावास्क्रिप्ट कोड है:

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

मैं जावास्क्रिप्ट में पाठ क्षेत्र से मूल्य कैसे मिलता है?

Answer 1

सीधे इनपुट टेक्स्टबॉक्स मान प्राप्त करने के लिए विभिन्न विधियाँ हैं (बिना फार्म तत्व के इनपुट तत्व को लपेटे बिना)

विधि 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लाइव 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 जो भी> एक जीवित नोडलिस्ट लौटाता है

उदाहरण के लिए, document.getElementsByName("searchTxt")[0].value; यदि यह आपके पेज में 'सर्चटेक्स्ट' नाम का पहला टेक्स्टबॉक्स है।

विधि 5:

document.querySelector('selector').valueतत्व का चयन करने के लिए सीएसएस चयनकर्ता का उपयोग करने वाले शक्तिशाली का उपयोग करें

उदाहरण के लिए, document.querySelector('#searchTxt').value; आईडी द्वारा चयनित
document.querySelector('.searchField').value;वर्ग द्वारा चयनित
document.querySelector('input').value;टैगनाम द्वारा चयनित
document.querySelector('[name="searchTxt"]').value;नाम से चयनित

विधि 6:

document.querySelectorAll('selector')[whole_number].value जो तत्वों का चयन करने के लिए CSS चयनकर्ता का भी उपयोग करता है, लेकिन यह उस चयनकर्ता के साथ सभी तत्वों को एक स्थैतिक नोडेलिस्ट के रूप में लौटाता है।

उदाहरण के लिए, document.querySelectorAll('#searchTxt')[0].value; आईडी द्वारा चयनित
document.querySelectorAll('.searchField')[0].value;वर्ग द्वारा चयनित
document.querySelectorAll('input')[0].value; टैगनाम द्वारा चयनित
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 के बीच अंतर के लिए यहाँ क्लिक

Comments

IE8 QSA का समर्थन करता है जहाँ तक मैं देख सकता हूँ, यह चयनकर्ता स्ट्रिंग में CSS3 चयनकर्ताओं का समर्थन नहीं करता है।

— फेब्रीको मट्टे

@ FabrícioMatté मैंने अभी यहाँ quirksmode.org/dom/tests/basics.html#querySelectorAll की जाँच की और इसने मुझे बताया कि यह नहीं है

— Bugwheels94

दिलचस्प। कि Win7 शो के लिए IE8 में साधारण परीक्षण querySelectorसमर्थित है jsfiddle.net/syNvz/show और QSA भी jsfiddle.net/syNvz/2/show

— फ़ेब्रिकियो मैट

अत्यंत उपयोगी दस्तावेज़, संदर्भ के लिए सहेजा गया। धन्यवाद।

— एंडी

@ गिस्कलिन आह! समझा। अच्छा लगा कि मुझे इसके बारे में पता नहीं था। लेकिन इसे पढ़ने के बाद , मैं इस संपादन को अभी उत्तर में जोड़ने में संकोच महसूस कर रहा हूं। हो सकता है कि किसी दिन बाद में, मैं इसे बचने के लिए चेतावनी के साथ जोड़ दूंगा। चेतावनी के सभी कारणों में से एक यह होगा । यदि आपको ऐसा लगता है कि यह वास्तव में अच्छा है, तो या तो एक चेतावनी के साथ एक संपादन करें या अपनी इच्छा पर एक और उत्तर जोड़ें :)

— Bugwheels94

Answer 2

//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;
  }
}

कोडपेन में इस कार्यप्रणाली को देखें।

Comments

जब मैं स्वीकार किए गए उत्तर की पूर्णता की सराहना करता हूं, तो मुझे यह उत्तर पुनः उपयोग करने के लिए मिला: जेएस कोड में, DOM टेक्स्ट इनपुट तत्व (टेक्स्ट बॉक्स) में दर्ज किया गया मान। विवरण के लिए, कहीं और इस प्रश्न में, मेरा उत्तर देखें।

— विक्टोरिया स्टुअर्ट

Answer 3

मैं इस तरह से इनपुट को स्टोर करने के लिए एक वैरिएबल बनाऊंगा:

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

और फिर मैं स्ट्रिंग में इनपुट मान जोड़ने के लिए चर का उपयोग करूंगा।

= "Your string" + input;

Comments

यदि आप चाहते हैं कि यह एक उचित जावास्क्रिप्ट ऑब्जेक्ट हो, ताकि आप प्रत्येक प्रॉपर्टी को प्रोग्रामेटिक रूप से एक्सेस कर सकें, तो बस करें: var input = JSON.parse (document.getElementById ("input_id")। value);

— जेकज

Answer 4

आपको टाइप करने में सक्षम होना चाहिए:

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

मुझे यकीन है कि ऐसा करने के लिए बेहतर तरीके हैं, लेकिन यह एक सभी ब्राउज़रों पर काम करता है, और इसे बनाने, सुधारने और संपादित करने के लिए जावास्क्रिप्ट की न्यूनतम समझ की आवश्यकता होती है।

Answer 5

इसके अलावा, आप टैग नामों से कॉल कर सकते हैं, इस तरह से: form_name.input_name.value; तो आपके पास एक विशिष्ट रूप में निर्धारित इनपुट का विशिष्ट मूल्य होगा।

Comments

हाँ! मुझे इस सादगी पर आश्चर्य हुआ। साधारण कैलकुलेटर 4stud.info/web-programming/samples/dhtml-calculator.html की प्राप्ति पर एक नज़र डालें, क्या इस जावास्क्रिप्ट कार्यक्षमता के लिए कोई संदर्भ हैं, क्योंकि मैं हमेशा jQuery का उपयोग करता हूं या

— EElementById

Answer 6

इसको आजमाओ

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

Answer 7

क्रोम और फ़ायरफ़ॉक्स में परीक्षण किया गया:

तत्व आईडी द्वारा मान प्राप्त करें:

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

जावास्क्रिप्ट कैलकुलेटर कार्यान्वयन पर भी एक नज़र डालें: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

UPDATE @ Bugwheels94 से: इस पद्धति का उपयोग करते समय इस मुद्दे के बारे में पता होना चाहिए ।

Answer 8

जब आप अधिक इनपुट फ़ील्ड रखते हैं, तो आप onkeyup का उपयोग कर सकते हैं। मान लीजिए कि आपके पास चार या input.then 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>

Answer 9

सभी फॉर्म को प्राप्त करने के लिए फॉर्म का उपयोग कर सकते हैं। यदि किसी तत्व में id है तो उसे .ameem ("id") के साथ पाया जा सकता है। उदाहरण:

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

स्रोत: w3schools

Answer 10

यदि आपका 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 हैं। formsenderreceiver

यदि आप उपयोग नहीं करते formमूल्य तो प्राप्त के लिए
- आप 2 अलग सेट कर सकते हैं id(या tagया nameकी तरह प्रत्येक क्षेत्र के लिए ...) sender-nameऔर receiver-name, sender-addressऔर receiver-address...
- आप तो बाद 2 इनपुट के लिए एक ही मान सेट करते हैं, getElementsByName(या getElementsByTagName.. ।) आपको 0 या 1 याद रखने की आवश्यकता है senderया है receiver। बाद में यदि आप formHTML में 2 का क्रम बदलते हैं , तो आपको इस कोड को फिर से जांचना होगा

अगर आप का उपयोग करें form, तो आप उपयोग कर सकते हैं name, address...

Answer 11

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

Answer 12

सरल जे.एस.

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

Answer 13

आप मान पढ़ सकते हैं

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>

Answer 14

यदि आप jQuery का उपयोग कर रहे हैं तो प्लगइन फ़ॉर्म का उपयोग करके, आपको बस यह करने की आवश्यकता है:

// 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 फ़ाइल में कोड के कुछ उदाहरण देख सकते हैं।

बेशक मैं इस परियोजना का लेखक हूं और इसे बेहतर बनाने के लिए सभी का स्वागत है।

Comments

आपको शायद यह उल्लेख करना चाहिए कि यह आपका अपना व्यक्तिगत प्लगइन है।

— हन्ना १

कोड स्निपेट में एक टाइपो होता है। कोड के दूसरे भाग में, एक दोहरे उद्धरण गायब है।

— विन्केन्ज़ो