Javascript 从提交的表单中获取值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10955745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get values from submitted form
提问by RSM
I have a very simple form:
我有一个非常简单的表格：
<form id="toBeTranslatedForm" action="actionpage.php" method="POST" >
<textarea name="userInput" id="toBeTranslatedTextArea"></textarea>
<select id="translationOptions">//dynamically filled</select>
<input type="submit" value="Translate" />
</form>
Using Jquery I am detecting whether the form has been submitted:
使用 Jquery 我正在检测表单是否已提交：
function outputTranslated()
{
$('#toBeTranslatedForm').submit(function() {
//do stuff
});
}
How do I get the text typed in the text area and the option selected in the select box from the form above? Ideally I would like to put them into an array.
如何获取在文本区域中键入的文本以及在上面表单的选择框中选择的选项？理想情况下，我想将它们放入一个数组中。
采纳答案by Jadzia
Here is how you can get value:
以下是获取价值的方法：
function outputTranslated() {
$('#toBeTranslatedForm').submit(function() {
var textareaval = $('#userInput').val();
alert(textareaval);
});
}
You can do the same for selection box by adding this line after the textareavalvariable definition in the code above:
您可以通过textareaval在上面代码中的变量定义之后添加这一行来对选择框执行相同的操作：
var selectval = $('#translationOptions').val();
Then, you can either use serialise, or you can put it into an array manually:
然后，您可以使用序列化，也可以手动将其放入数组中：
var a = [textareaval,selectval];
回答by Dave Newton
var theArray = $('#toBeTranslatedForm').serializeArray();
See the .serializeArraydocs.
On a pedantic note, that's not "from a submitted form", since you're asking for them before anything is actually submitted.
顺便说一句，这不是“来自提交的表单”，因为您是在实际提交任何内容之前要求它们的。
回答by Joe
I think you'r looking for something like this.
我想你正在寻找这样的东西。
$('#toBeTranslatedForm').submit(function() {
alert($(this).serialize());
return false;
});
Hope it helps
希望能帮助到你
回答by Leonardo
with Vanilla JS FormData:
使用 Vanilla JS FormData：
form.addEventListener("submit",function(e){
e.preventDefault();
var data = new FormData(form);
for (const [name,value] of data) {
console.log(name,value)
};
})
<form id="form">
<select id="sl1" name="sl">
<option value="0" defaultSelected="defaultSelected">-- Select --</option>
<option value="trek">-- Trek --</option>
<option value="rim">-- RIM --</option>
</select>
<label for="lg">remember</label>
<input type="checkbox" name="remember" id="lg" />
<button type="submit">submit
</button>
</form>回答by Miguel Carvajal
You can get the data form the submit event
您可以从提交事件中获取数据
function outputTranslated() {
$('#toBeTranslatedForm').submit(function(evt) {
const form = evt.target;
// get the field that you want
const userInputField = form.elements['userInput'];
alert(userInputField.value);
});
}
回答by franciscovalera
after submission, you can use just get the value by doing the following:
提交后，您可以通过执行以下操作使用 just get the value：
function outputTranslated()
{
$('#toBeTranslatedForm').submit(function() {
var textarea = $('#toBeTranslatedTextArea').val();
var allVals = [];
$('#translationOptions :checked').each(function() {
allVals.push($(this).val());
});
});}
