Transform html form with json list with jQuery or js

Asked

Viewed 78 times

0

I want to get into the following json to submit my API.

{
    "Ticket":"123456",
    "toDoList": 
    [{
        "Server":"123",
        "UserName":"asd",
        "Password":"asd",
        "File":""
    },
    {
        "Server":"123",
        "UserName":"asd",
        "Password":"asd",
        "File":""
    }]
}

For this I created the following html:

<form id="guide" enctype="multipart/form-data" method="post">

                <h1>Welcome!</h1>

                <div id="info">
                    <input name="Ticket" type="text" placeholder="Ticket" id="ticket"/>
                </div>

                <h2>Scripts</h2>

                <div id="toDoList">

                    <div id="todo">
                        <input name="Server" type="text" placeholder="Servidor" id="server" />
                        <input name="User" type="text" placeholder="Usuário" />
                        <input name="Password" type="text" placeholder="Senha" />
                        <br/>
                        <input name="file" type="file" id="fUpload" />
                    </div>

                </div>
                <div id="addToDoButton">
                    <button id="createToDo"><i class="fas fa-plus-circle fa-3x"></i></button>
                </div>

                <div id="sendButton">
                    <input type="submit" id="btnSend" value="Enviar Roteiro" />
                </div>

            </form>

Here comes a naughty code to insert new Ivs(#all):

$(document).ready(function () {
    var divPai = $('#toDoList');
    var btnCriar = $('#createToDo');


    btnCriar.click(function () {
        event.preventDefault();
        divPai.append("<div id='todo'><input name='Server' type='text' placeholder='Servidor' /><input name='User' type='text' placeholder='Usuário' /><input name='Password' type='text' placeholder='Senha' /><br/><input name='file' type='file' multiple id='fUpload' /></div>");
    });

and at that moment I thought if I used a $("#guide"). serialize, it would take the Divs of the same name and insert it into a list of toDoList. I believe my hope was Oge too much. I also tried to use ul-li to list the whole but, nothing becomes a list.

Do you have a specific tag to do this? , do I need to mount the json in hand? what’s the best way out gentlemen.

I already leave a thank you to those who try to help :D

  • You need the ID id="todo"?

  • No, I just want to have a list of All in my json...

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.