two forms, two divs, appending data from only one form to only one div?

Question

I have a slider with two slides, both containing an identical form. When I submit from one or the other form, I want to append the data from that form into the slide containing the form. I can obtain data from only one form, but I just can't get the append to only work on one slide. It always adds to both. I can't just use different IDs because I will be using ajax to change the non-visible slide based on forward or back slide navigation so the slider is theoretically infinite.

Here is my html (simplified for easier viewing):

<div class="flexslider">
        <ul class="slides">

            <li>
                <ul class="table">
                    <li>
                        <div class="clearfix">
                            <span class="nameSpan">Customer One</span>
                        </div>
                    </li>
                </ul>
                <form class="addNewCustomerForm" method="post">
                    <h1>Add New Customer</h1>
                    <input type="text" name="customerName" id="customerName">   
                    <input class="button" type="submit" value="Add New Customer">
                </form>
            </li>

            <li>
                <ul class="table">
                    <li>
                        <div class="clearfix">
                            <span class="nameSpan">Customer One</span>
                        </div>
                    </li>
                </ul>
                <form class="addNewCustomerForm" method="post">
                    <h1>Add New Customer</h1>
                    <input type="text" name="customerName" id="customerName">   
                    <input class="button" type="submit" value="Add New Customer">
                </form>
            </li>

        </ul>
    </div>

And here is my javascript (Again, simplified):

$(".addNewCustomerForm").submit(function(event) {
        $.post('addNewCustomer.asp', $(this).serialize(), function(result){
            $(".table", this).append(result);
            $(".newLine").slideDown();
        })
        return false;
    });

score 0 · Answer 1 · answered Jun 13 '13 at 23:56

0

That's because $(".table", this) matches both slides.

You can solve this by giving each slide and id, like id="slide1"

Then do $("#slide1") (or slide2) depending on which was submitted.

You basically need the bind the form to the slide, since each slide has it's own form.

Similarly you might need to do a similar thing for $(".addNewCustomerForm"). Give each form a unique id and bind one submit handler to #slide1, and the other to #slide2

answered Jun 13 '13 at 23:56

Halcyon

57,230
10
89
128

I can't use IDs because new slides will be added dynamically with ajax – psnoonan Jun 14 '13 at 15:32
That doesn't explain why you can't use id's. But, if you're adding them dynamically you might as well keep a reference to them. – Halcyon Jun 14 '13 at 16:24

score 0 · Accepted Answer · answered Jun 13 '13 at 23:58

0

You probably want something like this

$(".addNewCustomerForm").submit(function(event) {
    var thisForm = $(this);
    $.post('addNewCustomer.asp', $(this).serialize(), function(result){
        thisForm.parent().find('.table').append(result);
        $(".newLine").slideDown();
    })
    return false;
});

(tested it locally, changed first to find)

answered Jun 13 '13 at 23:58

bitwiser

221
2
9

Thanks! That worked perfect. I thought it had something to do with "this" being inside the callback function. Still not very good at knowing when "this" will work. – psnoonan Jun 14 '13 at 15:31
Variable scope is one of the trickiest concepts in javascript. Tryptich gives a pretty good set of examples for learning the basics here http://stackoverflow.com/questions/500431/javascript-variable-scope – bitwiser Jun 14 '13 at 18:01

two forms, two divs, appending data from only one form to only one div?

2 Answers2