कैसे एक JavaScript फ़ंक्शन में एक फार्म के इनपुट मूल्य पारित करने के लिए

Question

मैं एक सामान्य JavaScript फ़ंक्शन जो एक पैरामीटर

function foo(val) { ...} 

लेता है और मैं जब कोई फ़ॉर्म सबमिट समारोह कॉल करना चाहते हैं

<form> 
<input type="text" id="formValueId"/> 
<input type="button" onclick="foo(this.formValueId)"/> 
</form> 

लेकिन अभिव्यक्ति foo (this.formValueId) काम नहीं करता है (हैरान नहीं है, यह एक हताश प्रयास था), तो सवाल यह है कि, मैं जावास्क्रिप्ट फ़ंक्शन में फ़ॉर्म मान कैसे पास कर सकता हूं। जैसा कि मैंने बताया है कि जावास्क्रिप्ट सामान्य है और मैं इसके अंदर के रूप में हेरफेर नहीं करना चाहता!

मैं jQuery में फॉर्म मान प्राप्त करने के लिए मध्य में एक सहायक कार्य बना सकता हूं (उदाहरण के लिए) और फिर फ़ंक्शन को कॉल करें लेकिन मैं सोच रहा था कि क्या मैं इसे सहायक कार्य के बिना कर सकता हूं।

Answer 1

यह अपने इनलाइन क्लिक हैंडलर बाहर निकालने के लिए क्लीनर हो सकता है और इसे इस तरह कर सकते हैं:

$(document).ready(function() { 
    $('#button-id').click(function() { 
     foo($('#formValueId').val()); 
    }); 
}); 

Answer 2

यह कर देगा आपके इनपुट नाम दें यह आसान

<form> 
<input type="text" id="formValueId" name="valueId"/> 
<input type="button" onclick="foo(this.form.valueId.value)"/> 
</form> 

अद्यतन:

आप अपने बटन देते हैं एक आईडी चीजें और भी आसान हो सकता है:

<form> 
<input type="text" id="formValueId" name="valueId"/> 
<input type="button" id="theButton"/> 
</form> 

जावास्क्रिप्ट:

var button = document.getElementById("theButton"), 
value = button.form.valueId.value; 
button.onclick = function() { 
    foo(value); 
} 

Answer 3

उपयोग onclick="foo(document.getElementById('formValueId').value)"

Answer 4

इस दृष्टिकोण के लिए कई तरीके हैं। व्यक्तिगत रूप से, मैं avoid in-line scripting होगा। चूंकि आपने jQuery को टैग किया है, चलो इसका उपयोग करें।

HTML:

<form> 
    <input type="text" id="formValueId" name="valueId"/> 
    <input type="button" id="myButton" /> 
</form> 

जावास्क्रिप्ट:

$(document).ready(function() { 
    $('#myButton').click(function() { 
     foo($('#formValueId').val()); 
    }); 
}); 

Answer 5

अधिक स्थिर दृष्टिकोण:

<form onsubmit="foo($("#formValueId").val());return false;"> 
<input type="text" id="formValueId"/> 
<input type="submit" value="Text on the button"/> 
</form> 

return false; वास्तविक प्रपत्र सबमिट रोकने के लिए है (यदि आप यह सोचते हैं w चींटी कि)।

Answer 6

ठीक है आप इस तरह से ऐसा कर सकते हैं।

<input type="text" name="address" id="address"> 
     <div id="map_canvas" style="width: 500px; height: 300px"></div> 
    <input type="button" onclick="showAddress(address.value)" value="ShowMap"/> 

जावा स्क्रिप्ट

function showAddress(address){ 

    alert("This is address :"+address) 

} 

उसी के लिए एक उदाहरण है कि। और वह भाग जाएगा।