Làm thế nào để vượt qua một giá trị hình thức đầu vào thành một hàm JavaScript

Question

Tôi có một hàm JavaScript chung chung mà phải mất một tham số

function foo(val) { ...} 

và tôi muốn gọi hàm khi nộp một hình thức

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

nhưng biểu thức foo (this.formValueId) không hoạt động (không ngạc nhiên, đó là một nỗ lực tuyệt vọng), Vì vậy, câu hỏi là, làm thế nào tôi có thể vượt qua một giá trị biểu mẫu cho hàm javascript. Như tôi đã đề cập đến javascript là chung chung và tôi không muốn thao tác các hình thức bên trong nó!

Tôi có thể tạo một hàm trợ giúp ở giữa để lấy các giá trị biểu mẫu với jQuery (ví dụ) và sau đó gọi hàm nhưng tôi đã tự hỏi liệu tôi có thể thực hiện nó mà không có hàm trợ giúp hay không.

Answer 1

Nó có thể là sạch hơn để đưa ra xử lý inline nhấp chuột của bạn và làm điều đó như thế này:

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

Answer 2

Đưa đầu vào của bạn tên nó sẽ làm cho nó dễ dàng hơn

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

UPDATE:

Nếu bạn cung cấp cho nút của bạn một id điều có thể được dễ dàng hơn:

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

Javascript:

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

Answer 3

Sử dụng onclick="foo(document.getElementById('formValueId').value)"

Answer 4

Có một số cách tiếp cận này. Cá nhân, tôi sẽ avoid in-line scripting. Vì bạn đã gắn thẻ jQuery, hãy sử dụng nó.

HTML:

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

JavaScript:

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

Answer 5

cách tiếp cận ổn định thêm:

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

Các return false; là để ngăn chặn hình thức thực tế nộp (giả sử bạn w kiến đó).

Answer 6

Vâng, bạn có thể làm điều đó theo cách này.

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

Java Script

function showAddress(address){ 

    alert("This is address :"+address) 

} 

Đó là một ví dụ cho cùng. và điều đó sẽ chạy.