CODEWITHSUNDEEP
jqueryformsappend
choomy
choomy

Reputation: 1

appending something from a form

hey this is my first question so i dont really know how to ask like a pro but whatever
BTW i have all the jquery links but i just removed them from the question because they thought it was context to explain what is happening.
so i am trying to get the data from my form and then append it onto the ul to make more li. 

        <script type="text/javascript">
            $(document).ready(function () {
                $(".sort").sortable();
            });
            function getinfo() {
                var stuff = $("input[name=stuff]").val();//this is where i am getting my form data
                $("ul").append("<li>"+stuff+"</li>");//this is where i am trying to run the append function
            }
        </script>
    </head>
    <body>
        <center>
            <ul class="sort">
                <li>hi</li>// yep umm here is where i want to add more li
            </ul><br />
            <form method="post" action="">
                <input class="stuff" type="text" name="stuff" />//this is the form
                <input class="submit" id="rounder" type="button" value="Add" onclick="getinfo" />
            </form>
    </body>
</html>

Upvotes: 0

Views: 36

Answers (3)

DunningKrugerEffect
DunningKrugerEffect

Reputation: 613

Instead of using the onclick property, add a listener using jQuery.

$(document).ready(function () {
  $('.submit').click(getinfo);
  $(".sort").sortable();
});

Check out this JSFiddle. https://jsfiddle.net/esz009h3/

Upvotes: 0

Vitaly
Vitaly

Reputation: 1281

<ul class="sort">
    <li>hi</li>// yep umm here is where i want to add more li
</ul><br />
<form method="post" action="">
    <input class="stuff" type="text" name="stuff" />//this is the form
    <input class="submit" id="rounder" type="submit" value="Add" />
</form>

Better this way:

$('form').submit(function(){

    var stuff = $(this).find("input[name=stuff]").val();//this is where i am getting my form data
    $("ul").append("<li>"+stuff+"</li>");//this is where i am trying to run the append function

  return false;
});

Upvotes: 1

Dhara Parmar
Dhara Parmar

Reputation: 8101

You are calling function with wrong way, Call function like this:

<input class="submit" id="rounder" type="button" value="Add" onclick="getinfo()" />

Upvotes: 1

Related Questions