আমি জাভাস্ক্রিপ্ট সহ একটি অনুসন্ধানে কাজ করছি। আমি একটি ফর্ম ব্যবহার করব, তবে এটি আমার পৃষ্ঠায় অন্য কিছু মিস করবে। আমার এই ইনপুট পাঠ্য ক্ষেত্রটি রয়েছে:
<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>
আমি কীভাবে জাভাস্ক্রিপ্টে পাঠ্য ক্ষেত্র থেকে মান পেতে পারি?
উত্তর:
সরাসরি একটি ইনপুট পাঠ্যবক্স মান পেতে বিভিন্ন পদ্ধতি রয়েছে (কোনও ফর্ম উপাদানটির অভ্যন্তরে ইনপুট উপাদানটি মোড়ানো না করে):
পদ্ধতি 1:
document.getElementById('textbox_id').valueপছন্দসই বাক্সের মান পেতেউদাহরণ স্বরূপ,
document.getElementById("searchTxt").value;
দ্রষ্টব্য: 2,3,4 এবং 6 পদ্ধতিটি উপাদানগুলির সংকলন প্রদান করে, তাই কাঙ্ক্ষিত ঘটনাটি পেতে [পুরো_সংখ্যক] ব্যবহার করুন। প্রথম উপাদানটির জন্য, [0] ব্যবহার করুন, দ্বিতীয়টির জন্য 1 ব্যবহার করুন এবং আরও ...
পদ্ধতি 2:
document.getElementsByClassName('class_name')[whole_number].valueএকটি লাইভ এইচটিএমএল সংগ্রহ সংগ্রহ করে যা ব্যবহার করুনউদাহরণস্বরূপ, এটি
document.getElementsByClassName("searchField")[0].value;যদি আপনার পৃষ্ঠার প্রথম পাঠ্যবক্স হয়।
পদ্ধতি 3:
ব্যবহার করুন
document.getElementsByTagName('tag_name')[whole_number].valueযা একটি সরাসরি এইচটিএমএল সংগ্রহ সংগ্রহ করেউদাহরণস্বরূপ,
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যা উপাদানগুলি নির্বাচন করতে কোনও সিএসএস নির্বাচনকারীও ব্যবহার করে, তবে এটি সেই নির্বাচক সহ সমস্ত উপাদানকে স্ট্যাটিক নোডলিস্ট হিসাবে ফিরিয়ে দেয়।উদাহরণস্বরূপ, ট্যাগ দ্বারা নাম দ্বারা নির্বাচিত দ্বারা নির্বাচিত ক্লাস দ্বারা নির্বাচিত
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উপকারী সংজুক
querySelectorসমর্থিত jsfiddle.net/syNvz/show এবং QSA খুব jsfiddle.net/syNvz/2/show
//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;
}
}আমি এই জাতীয় ইনপুট সংরক্ষণ করার জন্য একটি পরিবর্তনশীল তৈরি করব:
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"/>আমি নিশ্চিত যে এটি করার আরও ভাল উপায় আছে তবে এটি সমস্ত ব্রাউজার জুড়ে কাজ করে বলে মনে হচ্ছে এবং এটি তৈরি, উন্নতি করতে এবং সম্পাদনা করতে জাভাস্ক্রিপ্টের ন্যূনতম বোঝাপড়া দরকার।
এছাড়াও আপনি ট্যাগগুলির নামে এই নামে কল করতে পারেন: form_name.input_name.value;
সুতরাং আপনার নির্দিষ্ট আকারে নির্ধারিত ইনপুটটির নির্দিষ্ট মান থাকবে।
Chrome এবং ফায়ারফক্সে পরীক্ষিত:
উপাদান আইডি দ্বারা মান পান:
<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
@ বাগওয়িলস94 থেকে আপডেট করুন: এই পদ্ধতিটি ব্যবহার করার সময় এই সমস্যাটি সম্পর্কে সচেতন হন ।
আপনার আরও ইনপুট ক্ষেত্র থাকলে আপনি অনকিপ ব্যবহার করতে পারেন। মনে করুন আপনার চার বা ইনপুট রয়েছে 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>একটি ফর্মের সমস্ত উপাদান পেতে ফর্ম.সামগ্রী ব্যবহার করতে পারেন। যদি কোনও উপাদানটির আইডি থাকে তবে এটি। নামক আইটেম ("আইডি") এর সাথে পাওয়া যাবে। উদাহরণ:
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>এই উপকারের সুবিধা: উদাহরণস্বরূপ আপনার পৃষ্ঠায় ইনপুট এবং তথ্যের জন্য ২ টি রয়েছে । formsenderreceiver
যদি আপনি ব্যবহার করবেন না formমান তারপর পান
- আপনি 2 টি পৃথক সেট করতে পারেন id(অথবা tagবা nameমত প্রতিটি ক্ষেত্রের জন্য ...) sender-nameএবং receiver-name, sender-addressএবং receiver-address, ...
তারপর আপনি পরে 2 ইনপুট জন্য একই মান সেট করেন তাহলে, - getElementsByName(অথবাgetElementsByTagName ..) ।) আপনার মনে রাখতে হবে 0 বা 1 হ'ল senderবা receiver। পরে আপনি formযদি এইচটিএমএলে 2 এর ক্রম পরিবর্তন করেন তবে আপনাকে আবার এই কোডটি পরীক্ষা করতে হবে
যদি আপনি ব্যবহার form, তারপর আপনি ব্যবহার করতে পারেন name, address...
<input id="new" >
<button onselect="myFunction()">it</button>
<script>
function myFunction() {
document.getElementById("new").value = "a";
}
</script>সাধারণ জেএস
function copytext(text) {
var textField = document.createElement('textarea');
textField.innerText = text;
document.body.appendChild(textField);
textField.select();
document.execCommand('copy');
textField.remove();
}আপনি যদি 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
});অথবা যদি কোনও প্যারামিটারাইজড ইউআরএল ব্যবহার করে থাকে তবে এটি ব্যবহার করুন:
$.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){
// Now do work with your response;
})প্রকল্প https://bitbucket.org/ranjeet1985/forminteract এর লিঙ্কটি এখানে
আপনি এই প্লাগইনটি অনেকগুলি কাজের জন্য যেমন কোনও ফর্মের মূল্য পেতে, কোনও ফর্মের মধ্যে মান স্থাপন করা, ফর্মগুলির বৈধতা এবং আরও অনেক কিছুর জন্য ব্যবহার করতে পারেন। আপনি প্রকল্পের index.html ফাইলটিতে কোডের কয়েকটি উদাহরণ দেখতে পাচ্ছেন।
অবশ্যই আমি এই প্রকল্পের লেখক এবং এটি আরও ভাল করে তোলার জন্য সবাই স্বাগত।