HTML Form - похожие группы ввода как массив объектов - PullRequest
Новая
       1

HTML Form - похожие группы ввода как массив объектов

0 голосов
/ 11 января 2019

Итак, у меня есть форма с двумя одинаковыми группами входов, которые представляют информацию об образовании. Их может быть больше двух, так как я хочу добавить кнопку для создания новой группы, чтобы пользователь мог поместить все свое образование, как в LinkedIn. 

<form id="formCV" action="">
    <div id="educationContainer">
        <!-- First Group -->
        <div class="education">
            <div>
                <input type="text" name="institutionName">
            </div>
            <div>
                <input type="text" name="courseName">
            </div>
            <div>
                <input type="month" name="startDate">
            </div>
            <div>
                <input type="month" name="endDate">
            </div>
        </div>
        <!-- Second Group -->
        <div class="education">
            <div>
                <input type="text" name="institutionName">
            </div>
            <div>
                <input type="text" name="courseName">
            </div>
            <div>
                <input type="month" name="startDate">
            </div>
            <div>
                <input type="month" name="endDate">
            </div>
        </div>
    </div>
</form>

Теперь, если я использую API-интерфейс FormData для получения данных формы следующим образом: 

for(let entry of formData.entries()){
    console.log(entry);
}

Я получаю следующий вывод: 

(2) ["institutionName", "Harvard"]
(2) ["courseName", "Web Development"]
(2) ["startDate", "2000-11"]
(2) ["endDate", "2008-11"]
(2) ["institutionName", "Oxford"]
(2) ["courseName", "Business Management"]
(2) ["startDate", "2009-10"]
(2) ["endDate", "2010-05"]

Чего я хочу добиться, так это получить организованный вывод, например: 

education:[
    {
        institutionName:"Harvard",
        courseName:"Web Development",
        startDate:"2000-11",
        endDate:"2008-11"
    },
    {
        ...
    }
]

Так что мне интересно знать, как лучше всего этого достичь. Заранее благодарю за любую помощь!

Ответы [ 4 ]

0 голосов
/ 14 января 2019

Это также способ заполнить данные желаемого формата. 

$(document).ready(function(){
  $(":button").click(function(){
  var educations=$("#formCV .education");
  var data=[];  
   educations.each(function(i,education){
   var set={}
   	$(education).find(":input").each(function(i,value){
    	set[$(value).attr("name")] = $(value).val();
    });
       data.push(set);
   })
   console.log("data",data)
  });
  
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<form id="formCV" action="">
    <div id="educationContainer">
        <!-- First Group -->
        <div class="education">
            <div>
                <input type="text" name="institutionName">
            </div>
            <div>
                <input type="text" name="courseName">
            </div>
            <div>
                <input type="month" name="startDate">
            </div>
            <div>
                <input type="month" name="endDate">
            </div>
        </div>
        <!-- Second Group -->
        <div class="education">
            <div>
                <input type="text" name="institutionName">
            </div>
            <div>
                <input type="text" name="courseName">
            </div>
            <div>
                <input type="month" name="startDate">
            </div>
            <div>
                <input type="month" name="endDate">
            </div>
        </div>
    </div>
    <input type="button" value="click me"/>
</form>

</body>
</html>
0 голосов
/ 11 января 2019

Вы можете попробовать FormData.getAll () и выполнить итерацию по каждой записи группы. 

const institutionNames = formData.getAll('institutionName');
const courseNames = formData.getAll('courseName');
...
const educations = [];
for (let i = 0; i < institutionNames.length; i++) {
  educations.push({
    institutionName: institutionNames[i],
    courseName: courseNames[i],
    ...
  });
}
0 голосов
/ 11 января 2019

Не уверен, что это лучший подход, но вы можете достичь желаемой структуры, например: 

const formCV = document.querySelector('#formCV');
const formData = new FormData(formCV);

function groupEducationData(inputGroupSize = 4) {
    const result = [];
    let educationObj = null;
    let counter = 0;

    for (const entry of formData.entries()) {
        // Since the counter is divisible by the number of inputs in a group
        // only if one form group finishes. And when one form group finishes,
        // we need to add the object into the result array
        if (counter % inputGroupSize === 0) {
            // if this is the first iteration, the educationObj is null and 
            // we don't want to add it to the result array yet
            // we only add the educationObj to the result array if it is
            // an object containing the education info
            if (educationObj) result.push(educationObj);

            // initialize the educationObj at the start
            // and after one form finishes
            educationObj = {};
        }

        // add entry[0] as key to the object (e.g. 'institutionName')
        // with the value of entry[1] (e.g. 'Harvard')
        educationObj[entry[0]] = entry[1];
        counter++;
    }

    return result.concat(educationObj);
}

console.log(groupEducationData());
<form id="formCV" action="">
        <div id="educationContainer">
            <!-- First Group -->
            <div class="education">
                <div>
                    <input type="text" name="institutionName" value="Harvard">
                </div>
                <div>
                    <input type="text" name="courseName" value="Web Development">
                </div>
                <div>
                    <input type="month" name="startDate" value="2000-11">
                </div>
                <div>
                    <input type="month" name="endDate" value="2008-11">
                </div>
            </div>
            <!-- Second Group -->
            <div class="education">
                <div>
                    <input type="text" name="institutionName" value="Oxford">
                </div>
                <div>
                    <input type="text" name="courseName" value="Business Management">
                </div>
                <div>
                    <input type="month" name="startDate" value="2009-10">
                </div>
                <div>
                    <input type="month" name="endDate" value="2010-05">
                </div>
            </div>
        </div>
    </form>
0 голосов
/ 11 января 2019

Нет смысла иметь две одинаковые формы, причем одной достаточно.

В дополнение к форме у вас должен быть список, показывающий каждый добавленный элемент.

Это то, что я рекомендую.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...