Form in UL List Li

Asked

Viewed 64 times

1

I have a form where the structure is formed by an organized list

<ul>
    <li id="pai">
        <input type="text"><button class="ul-appending">Add Input</button>
        <ul>
            <li>
                <input type="text"><button class="ul-appending">Add Input</button>
            </li>
        </ul>
    </li>
</ul>

Fields are added dynamically following the listing structure. However I would like to finish when the form is sent, follow this order of listings with the results in a textarea. Would it be possible?

$('body').on('click', 'button.ul-appending', function() {
    var parent = $(this).closest('li');
    var childUl = parent.children('ul');
    if(childUl.length === 0) {
        parent.append("<ul class='newul'></ul>");
        childUl = parent.children('ul');       
    }
    childUl.append($("<li><input type='text'><span></span><button class='ul-appending'>add</button></li>"));
});
*{padding: 0; border: 0;  outline: 0; list-style-type: none;  font-weight: inherit;   font-style: inherit;    vertical-align: baseline;   -webkit-box-sizing: border-box; -moz-box-sizing: border-box;    box-sizing: border-box;}


.organograma input[type='text'] {
    width: 200px;
    height: 35px;
    border: 1px solid #bbb;
    border-radius:  3px;
    margin-bottom:  10px;
    padding: 5px 10px;
    font-size: 13px;
    color: #555;
    display: inline-block;
}

.organograma button {
    display: inline-block;
    height: 20px;
    background: transparent;
    color: #888;
    width: 20px;
    border-radius: 3px;
    cursor: pointer;
    outline: 0!important;
    font-size: 13px;
    margin-left: 5px;
    line-height: 17px;
}

.organograma ul {
    padding-left:  15px;
    position: relative;
}

.organograma ul:before {
    content: "";
    width: 1px;
    height: calc(100% - 17px);
    background: #bbb;
    position: absolute;
    left: 7px;
    top: -10px;
}

.organograma ul:after {
    content: "";
    width: 15px;
    height: 1px;
    background: #bbb;
    position: absolute;
    left: -8px;
    bottom: 27px;
}

.organograma > ul:after, .organograma > ul > li > ul:after {
    content: none;
}


.organograma > ul:before {
    content: none;
}

.organograma ul li {
    position: relative;
}

.organograma ul li:before {
    content: "";
    width: 9px;
    height: 1px;
    background: #bbb;
    position: absolute;
    left: -8px;
    top: 17px;
}

.organograma > ul > li:before {
    content: none;
}

.organograma ul li:last-child {
    margin-bottom:  0;
}

.organograma > ul {
    padding-left:  0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="organograma">
    <ul>
        <li id="pai">
            <input type="text" value="Prefeito"><span></span><button class="ul-appending">add</button>
            <ul>
                <li>
                    <input type="text"><span></span><button class="ul-appending">add</button>
                </li>
            </ul>
        </li>
    </ul>
</div>

javascript jquery

  • Yes, I don’t know if you’ll get the result of the form in php but just you get all the example Results $result1 = $_POST['result1'];, $result2 = $_POST['resul2']; and then when displaying in the text area you give an echo in the order you want example echo $result1." ". $result2;

  • However the form adds fields dynamically creating an order with several ul li ul li ul li li ul... so you can’t manually assemble this result. i thought it could be done by javascript, converting the whole list into a value for a textarea. however I don’t know how to assemble it.

  • I didn’t understand it very well then, in your jsfiddle you add the word and it adds kind of a child right? But I don’t understand what’s wrong or what you want

  • The idea is to follow this list structure. that all results follow this list that is mounted dynamically in the form. merge all results into a textarea

  • If you want a representation of this organogram in text, you can do yes... but it takes a little work, the ideal would be you first try to implement this functionality and then return with a specific error to be corrected.

  • From an example of what should appear in the textarea. It would be something like this: Prefeito,ValorCampo,ValorDoAdd1,ValorDoAdd2,etcc

  • http://prntscr.com/jlnzbc This is how I want to set up an organisation chart. So the end result has to be in this style.

  • I’m not getting what you want. You say >> resultados em uma textarea. You want this ul li structure shown in prntscr.com within a textarea?

  • you want html as text????

  • This @Leocaracciolo. I want to fill in the fields, add new fields and in the end export everything as it is in prntscr. I think it would be more like sending to the textarea all the content of the listing, but excluding inputs, and Buttons. leaving the list clean only with the texts within each ul li.

  • Huahuahua, to put the data in a textarea is easy now, with the desired structure I think only Uncle Bill’s people.

Show 6 more comments
No answers

Browser other questions tagged javascript jquery

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