CODEWITHSUNDEEP
jqueryhtmljquery-ui
Chielarts
Chielarts

Reputation: 21

add listitem with value of input

I've been working on a sortable tree list for our customers to organize their website. Customers can add/drag and remove pages.

To add a page they have to click "add page", this will open a dialog.

What I want to achieve is for them to be able to type in the name of the page you want to add and when you press "save" a list item with that name should be added on the bottom of the list.

dialog jquery:

           $(function() {
                    $("#dialog").dialog({
                            autoOpen: false,
                            show: {
                                    effect: "fade",
                                    duration: 500
                            },
                            hide: {
                                    effect: "fade",
                                    duration: 500
                            }
                    });

                    $("#opener").click(function() {
                            $("#dialog").dialog("open");
                    });
                    $("#closer").click(function() {
                        //add list item with value of input
                            $("#dialog").dialog("close");

                    });
            });

dialog html:

       <div id="dialog" title="Pagina toevoegen">
            <form>
                    Pagina: <input type="text" name="page"><br>

            </form>
            <button id="closer">opslaan</button>
    </div>

The part I don't know is how do I get the text the user typed in the dialog and put it on a list item.

I want to add that I am a second year student working as an intern. I'm doing my best to learn. this website and it's users have already tought me a lot.

I hope someone can help me(and maybe others stuck in a similar situation).

thanks

Upvotes: 1

Views: 75

Answers (2)

HEEN
HEEN

Reputation: 4721

You need to use the opposite type of quotes than what you're using in your HTML. So since you're using double quotes in your attributes, surround the code with single quotes.

$("#dialog").append('<li><a href="/user/messages"><span class="tab">Some text</span></a></li>');

Hope it helps.

Upvotes: 0

scx
scx

Reputation: 2789

Welcome to the Stackoverflow ;) Simplest thing you can do is grab .val() from input when you click button#closer and then .append() value to some html list that you have somewhere in your page.

$("#closer").click(function() {
                    //add list item with value of input

                        value_from_dialog_input = $("#dialog input").val();
                        $('#your_list_id').append(value_from_dialog_input);
                        $("#dialog").dialog("close");


});

Upvotes: 1

Related Questions