Is there a simpler way to get formData with pure js?
1
My html structure is as below,a table nested in form, some info in input or option in select will send via ajax.
<form>
<table>
<tr>
<td>date</td>
<td><input class="data" type='text' name="date"></td>
</tr>
<tr>
<td>type</td>
<td>
<select id="type" name="type">
<option value="word">word</option>
<option value="phase">phrase</option>
<option value="sentence">sentence</option>
<option value="grammar">grammar</option>
</select>
</td>
</tr>
<tr>
<td>content</td>
<td><textarea class="data" name='content' cols="80" rows="8"></textarea></td>
</tr>
<tr>
<td>meaning</td>
<td><textarea class="data" name='meaning' cols="80" rows="8"></textarea></td>
</tr>
<tr>
<td>source</td>
<td><input class="data" type="text" name="source"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="submit" id="submit"></td>
</tr>
</table>
</form>
I get the formData with below code, it is verified that all data in the form can get.
var elements = document.getElementsByClassName("data");
var formData = new FormData();
for(var i = 0; i < elements.length; i++)
{
formData.append(elements[i].name, elements[i].value);
}
var mySelect = document.getElementById("type");
var index = mySelect.selectedIndex;
var svalue = mySelect.options[index].value;
var sname = "type";
formDate.append(sname,svalue);
It is a bit long lines here, i want more small js code.
Is ther more simple way to get formData with pure js ,instead of jQuery?
javascript form-data
edited Nov 19 '18 at 14:50
marc_s
575k12811111258
asked Nov 19 '18 at 13:36
scrapyscrapy
173219
|
show 2 more comments
1
My html structure is as below,a table nested in form, some info in input or option in select will send via ajax.
<form>
<table>
<tr>
<td>date</td>
<td><input class="data" type='text' name="date"></td>
</tr>
<tr>
<td>type</td>
<td>
<select id="type" name="type">
<option value="word">word</option>
<option value="phase">phrase</option>
<option value="sentence">sentence</option>
<option value="grammar">grammar</option>
</select>
</td>
</tr>
<tr>
<td>content</td>
<td><textarea class="data" name='content' cols="80" rows="8"></textarea></td>
</tr>
<tr>
<td>meaning</td>
<td><textarea class="data" name='meaning' cols="80" rows="8"></textarea></td>
</tr>
<tr>
<td>source</td>
<td><input class="data" type="text" name="source"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="submit" id="submit"></td>
</tr>
</table>
</form>
I get the formData with below code, it is verified that all data in the form can get.
var elements = document.getElementsByClassName("data");
var formData = new FormData();
for(var i = 0; i < elements.length; i++)
{
formData.append(elements[i].name, elements[i].value);
}
var mySelect = document.getElementById("type");
var index = mySelect.selectedIndex;
var svalue = mySelect.options[index].value;
var sname = "type";
formDate.append(sname,svalue);
It is a bit long lines here, i want more small js code.
Is ther more simple way to get formData with pure js ,instead of jQuery?
javascript form-data
edited Nov 19 '18 at 14:50
marc_s
575k12811111258
asked Nov 19 '18 at 13:36
scrapyscrapy
173219
"instead of jQuery" - but you're not using jquery here. With jquery it's indeed trivial,$('#form').serialize()
– Sergio Tulentsev
Nov 19 '18 at 13:38
I mean that some post code which can not contain any jQuery.
– scrapy
Nov 19 '18 at 13:40
If you just want to create a FormData object containing all parameters of the whole form, then you can simply pass the form element itself to the constructor. If you need to select only specific elements of the form, by class or some other criterion, then you will have to select those elements and add them one by one in a loop.
– misorude
Nov 19 '18 at 13:41
Please learn to love labels
– Quentin
Nov 19 '18 at 13:42
We've had CSS for over two decades. It is time to stop using tables for layout.
– Quentin
Nov 19 '18 at 13:42
|
show 2 more comments
1
1
1
My html structure is as below,a table nested in form, some info in input or option in select will send via ajax.
<form>
<table>
<tr>
<td>date</td>
<td><input class="data" type='text' name="date"></td>
</tr>
<tr>
<td>type</td>
<td>
<select id="type" name="type">
<option value="word">word</option>
<option value="phase">phrase</option>
<option value="sentence">sentence</option>
<option value="grammar">grammar</option>
</select>
</td>
</tr>
<tr>
<td>content</td>
<td><textarea class="data" name='content' cols="80" rows="8"></textarea></td>
</tr>
<tr>
<td>meaning</td>
<td><textarea class="data" name='meaning' cols="80" rows="8"></textarea></td>
</tr>
<tr>
<td>source</td>
<td><input class="data" type="text" name="source"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="submit" id="submit"></td>
</tr>
</table>
</form>
I get the formData with below code, it is verified that all data in the form can get.
var elements = document.getElementsByClassName("data");
var formData = new FormData();
for(var i = 0; i < elements.length; i++)
{
formData.append(elements[i].name, elements[i].value);
}
var mySelect = document.getElementById("type");
var index = mySelect.selectedIndex;
var svalue = mySelect.options[index].value;
var sname = "type";
formDate.append(sname,svalue);
It is a bit long lines here, i want more small js code.
Is ther more simple way to get formData with pure js ,instead of jQuery?
javascript form-data
edited Nov 19 '18 at 14:50
marc_s
575k12811111258
asked Nov 19 '18 at 13:36
scrapyscrapy
173219
My html structure is as below,a table nested in form, some info in input or option in select will send via ajax.
<form>
<table>
<tr>
<td>date</td>
<td><input class="data" type='text' name="date"></td>
</tr>
<tr>
<td>type</td>
<td>
<select id="type" name="type">
<option value="word">word</option>
<option value="phase">phrase</option>
<option value="sentence">sentence</option>
<option value="grammar">grammar</option>
</select>
</td>
</tr>
<tr>
<td>content</td>
<td><textarea class="data" name='content' cols="80" rows="8"></textarea></td>
</tr>
<tr>
<td>meaning</td>
<td><textarea class="data" name='meaning' cols="80" rows="8"></textarea></td>
</tr>
<tr>
<td>source</td>
<td><input class="data" type="text" name="source"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="submit" id="submit"></td>
</tr>
</table>
</form>
I get the formData with below code, it is verified that all data in the form can get.
var elements = document.getElementsByClassName("data");
var formData = new FormData();
for(var i = 0; i < elements.length; i++)
{
formData.append(elements[i].name, elements[i].value);
}
var mySelect = document.getElementById("type");
var index = mySelect.selectedIndex;
var svalue = mySelect.options[index].value;
var sname = "type";
formDate.append(sname,svalue);
It is a bit long lines here, i want more small js code.
Is ther more simple way to get formData with pure js ,instead of jQuery?
javascript form-data
javascript form-data
edited Nov 19 '18 at 14:50
marc_s
575k12811111258
asked Nov 19 '18 at 13:36
scrapyscrapy
173219
edited Nov 19 '18 at 14:50
marc_s
575k12811111258
asked Nov 19 '18 at 13:36
scrapyscrapy
173219
edited Nov 19 '18 at 14:50
marc_s
575k12811111258
edited Nov 19 '18 at 14:50
marc_s
575k12811111258
edited Nov 19 '18 at 14:50
marc_s
575k12811111258
575k12811111258
asked Nov 19 '18 at 13:36
scrapyscrapy
173219
asked Nov 19 '18 at 13:36
scrapyscrapy
173219
asked Nov 19 '18 at 13:36
scrapyscrapy
173219
173219
"instead of jQuery" - but you're not using jquery here. With jquery it's indeed trivial,$('#form').serialize()
– Sergio Tulentsev
Nov 19 '18 at 13:38
I mean that some post code which can not contain any jQuery.
– scrapy
Nov 19 '18 at 13:40
If you just want to create a FormData object containing all parameters of the whole form, then you can simply pass the form element itself to the constructor. If you need to select only specific elements of the form, by class or some other criterion, then you will have to select those elements and add them one by one in a loop.
– misorude
Nov 19 '18 at 13:41
Please learn to love labels
– Quentin
Nov 19 '18 at 13:42
We've had CSS for over two decades. It is time to stop using tables for layout.
– Quentin
Nov 19 '18 at 13:42
|
show 2 more comments
"instead of jQuery" - but you're not using jquery here. With jquery it's indeed trivial,$('#form').serialize()
– Sergio Tulentsev
Nov 19 '18 at 13:38
I mean that some post code which can not contain any jQuery.
– scrapy
Nov 19 '18 at 13:40
If you just want to create a FormData object containing all parameters of the whole form, then you can simply pass the form element itself to the constructor. If you need to select only specific elements of the form, by class or some other criterion, then you will have to select those elements and add them one by one in a loop.
– misorude
Nov 19 '18 at 13:41
Please learn to love labels
– Quentin
Nov 19 '18 at 13:42
We've had CSS for over two decades. It is time to stop using tables for layout.
– Quentin
Nov 19 '18 at 13:42
"instead of jQuery" - but you're not using jquery here. With jquery it's indeed trivial,
$('#form').serialize()– Sergio Tulentsev
Nov 19 '18 at 13:38
"instead of jQuery" - but you're not using jquery here. With jquery it's indeed trivial,
$('#form').serialize()– Sergio Tulentsev
Nov 19 '18 at 13:38
I mean that some post code which can not contain any jQuery.
– scrapy
Nov 19 '18 at 13:40
I mean that some post code which can not contain any jQuery.
– scrapy
Nov 19 '18 at 13:40
If you just want to create a FormData object containing all parameters of the whole form, then you can simply pass the form element itself to the constructor. If you need to select only specific elements of the form, by class or some other criterion, then you will have to select those elements and add them one by one in a loop.
– misorude
Nov 19 '18 at 13:41
If you just want to create a FormData object containing all parameters of the whole form, then you can simply pass the form element itself to the constructor. If you need to select only specific elements of the form, by class or some other criterion, then you will have to select those elements and add them one by one in a loop.
– misorude
Nov 19 '18 at 13:41
Please learn to love labels
– Quentin
Nov 19 '18 at 13:42
Please learn to love labels
– Quentin
Nov 19 '18 at 13:42
We've had CSS for over two decades. It is time to stop using tables for layout.
– Quentin
Nov 19 '18 at 13:42
We've had CSS for over two decades. It is time to stop using tables for layout.
– Quentin
Nov 19 '18 at 13:42
|
show 2 more comments
2 Answers
2
active
oldest
votes
0
This should work for all input Element and Select element. if you have multiple forms, get form by Id. Thanks. If any errors let me know. typing from mobile.
var elements = document.getElementsByTagName("form");
var formData = new FormData();
var ipts = elements.querySelector('input, select');
for(var ipt of ipts)
{
formData.append( ipt.name, ipt.value );
}
answered Nov 19 '18 at 13:46
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
add a comment |
4
Just pass the whole form to the object.
var formData = new FormData( document.querySelector("form") )
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375822%2fis-there-a-simpler-way-to-get-formdata-with-pure-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
This should work for all input Element and Select element. if you have multiple forms, get form by Id. Thanks. If any errors let me know. typing from mobile.
var elements = document.getElementsByTagName("form");
var formData = new FormData();
var ipts = elements.querySelector('input, select');
for(var ipt of ipts)
{
formData.append( ipt.name, ipt.value );
}
answered Nov 19 '18 at 13:46
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
add a comment |
0
This should work for all input Element and Select element. if you have multiple forms, get form by Id. Thanks. If any errors let me know. typing from mobile.
var elements = document.getElementsByTagName("form");
var formData = new FormData();
var ipts = elements.querySelector('input, select');
for(var ipt of ipts)
{
formData.append( ipt.name, ipt.value );
}
answered Nov 19 '18 at 13:46
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
add a comment |
0
0
0
This should work for all input Element and Select element. if you have multiple forms, get form by Id. Thanks. If any errors let me know. typing from mobile.
var elements = document.getElementsByTagName("form");
var formData = new FormData();
var ipts = elements.querySelector('input, select');
for(var ipt of ipts)
{
formData.append( ipt.name, ipt.value );
}
answered Nov 19 '18 at 13:46
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
This should work for all input Element and Select element. if you have multiple forms, get form by Id. Thanks. If any errors let me know. typing from mobile.
var elements = document.getElementsByTagName("form");
var formData = new FormData();
var ipts = elements.querySelector('input, select');
for(var ipt of ipts)
{
formData.append( ipt.name, ipt.value );
}
answered Nov 19 '18 at 13:46
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
answered Nov 19 '18 at 13:46
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
answered Nov 19 '18 at 13:46
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
answered Nov 19 '18 at 13:46
Edwin Dijas ChiwonaEdwin Dijas Chiwona
35118
35118
add a comment |
add a comment |
4
Just pass the whole form to the object.
var formData = new FormData( document.querySelector("form") )
add a comment |
4
Just pass the whole form to the object.
var formData = new FormData( document.querySelector("form") )
add a comment |
4
4
4
Just pass the whole form to the object.
var formData = new FormData( document.querySelector("form") )
Just pass the whole form to the object.
var formData = new FormData( document.querySelector("form") )
answered Nov 19 '18 at 13:41
community wiki
Quentin
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375822%2fis-there-a-simpler-way-to-get-formdata-with-pure-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
"instead of jQuery" - but you're not using jquery here. With jquery it's indeed trivial,
$('#form').serialize()– Sergio Tulentsev
Nov 19 '18 at 13:38
I mean that some post code which can not contain any jQuery.
– scrapy
Nov 19 '18 at 13:40
If you just want to create a FormData object containing all parameters of the whole form, then you can simply pass the form element itself to the constructor. If you need to select only specific elements of the form, by class or some other criterion, then you will have to select those elements and add them one by one in a loop.
– misorude
Nov 19 '18 at 13:41
Please learn to love labels
– Quentin
Nov 19 '18 at 13:42
We've had CSS for over two decades. It is time to stop using tables for layout.
– Quentin
Nov 19 '18 at 13:42