CODEWITHSUNDEEP
jqueryforms
Gerry
Gerry

Reputation: 11

Targeting a specific form on a page with multiple forms using PHP and Jquery

I am trying to target a specific form element on a php page that has multiple forms with jquery. The forms are dynamically generated and are contained within a while loop. The forms are comments forms that reside under an individual post containing three posts per page.

Since the form and form fields are dynamically generated, I need to use class names as opposed to id's. However, in order to differentiate each form, I can attach an id to each form in order to differentiate them but the id would be an integer based on the post id. Here is my form structure:

    <div class="cform" id="'.$id.'">
     <form action="" method="" enctype="" class="vidcomfrm" name="'.$id.'">
        <h3>Add Comment to '.$title.' video</h3>
        <div class="row">
          <label><span class="label">Your Name:</span>
          <input name="name" class="vname" id="'.$id.'" type="text"  value=""/>
          </label>
          <label><span style="margin-left:.5em; width:75px;">Email:</span>
          <input name="email" class="vemail" id="'.$id.'" type="text"   value="" />
          </label>
        </div>
        <div class="row">
          <label><span class="label">Comments:</span>
          <textarea name="comments_body" class="vcomments" id="'.$id.'" rows="2" class="formw" /></textarea>
          </textarea>
          </label>
        </div>
        <div class="row">
          <input type="hidden" name="vid" value="'.$id.'" />
        </div>
                  <input name="submit" type="submit" value="Add Comment" class="comment_submit" id="'.$id.'" />
      </form>
          <ul class="response" id="'.$id.'" /><!--success or failure message goes here -->
    </div><!--/cform div-->

And here is the Jquery code I'm using

    $(function() {
            $('form.vidcomfrm').submit(function(event) {
                    event.preventDefault(); // stop the form submitting
                    $('div.cform').append('<img src="../images/pageElements/ajax-loader.gif" class="loaderIcon" alt="Loading..."/>');//this will            simulate processing by loading an animated gif
                    var data = $(this).serialize(); // $(this) represents the form object
                    $.post('../Scripts/processVidcoms.php', data, function(results) {
                        $('div.cform img.loaderIcon').fadeOut(1000);//fade out processing simulation image
                        $('ul.response').html(results);//display succcess or failure errors.
            //clear the form data
            $('.vname').val('');
            $('.vemail').val('');
            $('.vcomments').val('');
                    });

        });             
    });

When the user submits the form, the default action of the submit button is prevented and processVidcoms.php takes over by performing form validation, inserting the comment into the comments table and returning a successful message or failure message. This has worked perfectly.

The problem is with the response results and ajax-loader.gif. when the user clicks the add comment button, The ajax-loader.gif and response shows up under each form! I only want the response to return under the form that the user clicks. I have tried all manner using using $(this) and specifying variables but the best I can do the best I have been able to achieve is the above.

Using the above jquery code to start, how can I modify it in order to target the specific form?

Thanks!

Upvotes: 1

Views: 916

Answers (2)

PleaseStand
PleaseStand

Reputation: 32082

  1. $(this) will give the form the user submitted.
  2. $(this).parent() will give the parent of that element (in your case, the surrounding div with class cform).
  3. $(this).parent().find() will return only those of the div's children, grandchildren, etc. that match the supplied CSS-style selector.

So for the fade in/out of the spinner:

// Fade in
$(this).parent().append('<img src="../images/pageElements/ajax-loader.gif" class="loaderIcon" alt="Loading..."/>');

// Fade out
$(this).parent().find('img.loaderIcon').fadeOut(1000);

To show the response:

$(this).parent().find('ul.response').html(results);

For the reset of form fields:

$(this).parent().find('.vname').val('');
$(this).parent().find('.vemail').val('');
$(this).parent().find('.vcomments').val('');

Edit: Fixed a problem with the above code. .children only goes down one level, so I have corrected the code to use .find instead.

Upvotes: 3

Krab
Krab

Reputation: 2148

$(this).parent() should give you a reference to the <div> you need (instead of $('div.cform')).

Upvotes: 0

Related Questions