Есть ли более простой способ получить formData с чистым JS? - PullRequest
0 голосов
/ 19 ноября 2018

Моя структура HTML такая, как показано ниже, таблица, вложенная в форму, некоторая информация в input или option в select будет отправлена ​​через 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>

Я получаю formData с нижекод, проверено, что все данные в форме могут получить.

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);

Здесь немного длинные строки, я хочу более маленький код js.
Есть более простой способ получить formData счистый JS, а не JQuery?

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Это должно работать для всех входных элементов и элементов Select.если у вас есть несколько форм, получите форму по Id.Благодарю.Если какие-либо ошибки, дайте мне знать.набрав с мобильного телефона.

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 );
}
0 голосов
/ 19 ноября 2018

Просто передайте всю форму объекту.

var formData = new FormData( document.querySelector("form") )
...