I'm trying to target a specific form element on a page that has three forms under three records. The forms and records are dynamically generated with php. Because there are mulitple forms, I have had to use classes to identify form fields as opposed to id's.

Here's the form structure:


<form action="" method="" enctype="" class="vidcomfrm">
 <div class = "cform">
  <h3>Add Comment to '.$title.' video</h3>
  <div class="row">
   <label><span class="label">Your Name:</span>
   <input name="name" class="vname" type="text"  value=""/>
   </label>

   <label><span style="margin-left:.5em; width:75px;">Email:</span>
   <input name="email" class="vemail" type="text"   value="" />
   </label>
  </div>

  <div class="row">
   <label><span class="label">Comments:</span>
   <textarea name="comments_body" class="vcomments" rows="2" class="formw" /></textarea>
   </label>
  </div>

  <div class="row">
   <input type="hidden" name="vid" class="id" value="'.$id.'" />
  </div>

  <input name="submit" id="submit" type="submit" value="submit" />
  <ul class="response">
 </div><!--/cform div-->
</form>';

What differentiates each form is there is a hidden input field that grabs the integer id of each record and feeds that off to processVidcoms.php that performs the insert and also handles form validation.

processvidcomms.php performs the insert and does the form validiation without a problem, my problem is with the return response of the results whether it be an error message or success message. Error messages or success messages are displayed with each form. Obviously I only want to target the particular form the user has submitted.

I am using the Jquery .post method and have attempted to modify the below code that I am using on pages with only a single form. The below code works perfectly when there is only one form on the page.

$(function() {
        $('form.vidcomfrm').submit(function(event) {
                event.preventDefault(); // stop the form submitting let php handle it.
                $('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('');
                });

	});				

});

I am wondering if I should be using the Jquery Form Plugin as opposed to trying this method?

Thanks for any help.

Gerry

    Write a Reply...