將參數從表單傳遞給JavaScript函數

我在嘗試弄清楚如何執行此操作時遇到問題。我想，使用變量中的字段作爲變量調用JavaScript函數。將參數從表單傳遞給JavaScript函數

我有這樣的：

<form> 
 
<select name="users" onchange="showUser(this.value)"> 
 
    <option value="">Select a person:</option> 
 
    <option value="1">Peter Griffin</option> 
 
    <option value="2">Lois Griffin</option> 
 
    <option value="3">Joseph Swanson</option> 
 
    <option value="4">Glenn Quagmire</option> 
 
    </select> 
 
</form>

從一個例子，但我需要的是這個，但不工作：

<form onsubmit="myFunction(this.num_cluster)"> 
 
    Num. Cluster: <input type="text" id="num_cluster"> 
 
    <input type="submit"> 
 
</form>

雲誰來幫幫我？謝謝:)

來源

2015-04-23 Oveie

變化id到name - 之後，你可以訪問輸入字段的值

function myFunction(form, event) { 
 
    event.preventDefault(); 
 
    alert(form.num_cluster.value); 
 
}

<form onsubmit="return myFunction(this, event)"> 
 
    Num. Cluster: <input name="num_cluster" type="text"> 
 
    <input type="submit"> 
 
</form>

由於問題是更有趣 - 我們可以擴展我們的方法的onsubmit

function s(form, event) { 
 
    event.preventDefault(); 
 

 
    var values = Array.prototype.slice.call(form.elements) // as form elements are not an array 
 
    .filter(function(element) { 
 
     return element.type !== 'submit'; // I don't need submit button 
 
    }) 
 
    .map(function(element) { 
 
     return (element.name + ': ' + element.value); // get name and value for rest form inputs and assign them to values variable 
 
    }); 
 

 
    alert('values => ' + values.join(', ')) // finish 
 
}

<form onsubmit="return s(this, event)"> 
 
    <p>Foo: 
 
    <input type="text" name='foo' /> 
 
    </p> 
 
    <p>Bar: 
 
    <input type="text" name='bar' /> 
 
    </p> 
 
    <p>Baz: 
 
    <select name='baz'> 
 
     <option value="lorem">lorem</option> 
 
     <option value="ipsum">ipsum</option> 
 
    </select> 
 
    </p> 
 
    <p> 
 
    <input type="submit" /> 
 
    </p> 
 
</form>

來源

2015-04-23 18:07:36

Hi @ krzysztof-safjanowski，謝謝你的回答。你能解釋一下「preventDefault」的方法嗎？沒有它，它就無法工作，我想知道它。謝謝 – Oveie

@Oveie'event.preventDefault' - https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault阻止默認操作（它正在提交表單）。我可以想象有一些驗證。如果一切正常，你可以執行'event.target.submit（）'之類的東西，並將表單的內容提交給後端。 –

function myFunction(){ 
    var value=document.getElementById("num_cluster").value; 

/// value has the actual thing that you need 
//... rest of your code 
}

你甚至可以在onsubmit事件中通過直接寫java腳本來使用這個語句。

來源

2015-04-23 17:33:14

將參數從表單傳遞給JavaScript函數

回答

相關問題