I have a situation where i have the same form multiple times on a page in my application which allows users to edit or remove data however when using the below javascript to listen for the form submission the page just refreshes.

I was going to use $('.service_form').serialize() to submit the forms however when doing so it serializes values from every form on the page and pletes the ajax request however if i use $(this).serialize() the page just refreshes.

HTML Form

<div id="service_modal" class="modal fade">  
  <div class="modal-dialog">  
       <div class="modal-content">  
            <form class="service_form">                    
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                </div>  
                <div class="modal-body">  
                    <div class='form-group has-feedback has-feedback-left'>
                        <label for="service_idno">IDNO:</label>
                        <input type="text" class="form-control required" id="service_idno" name="service_idno">
                    </div>                          
                    <div class='form-group has-feedback has-feedback-left'>
                        <label for="service_code">Service Code:</label>
                        <input type="text" class="form-control required" id="service_code" name="service_code">
                    </div>  
                    <div class='form-group has-feedback has-feedback-left'>
                        <label for="service_cost">Service Cost:</label>
                        <input type="number" class="form-control required" id="service_cost" name="service_cost">
                    </div>                          
                </div>  
                <div class="modal-footer">  
                       <input type="submit" value="Commit" class="btn btn-success" />  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>                      
           </form>                  
       </div>  
  </div>  
</div>  

Javascript

$('.service_form').each(function(){ 
 $(this).validate({
    errorClass: 'validation-error-label',
    highlight: function(element, errorClass) {$(element).removeClass(errorClass);},
    errorPlacement: function(error, element){if (element.parents('div').hasClass('has-feedback')) {error.appendTo(element.parent() );}},
    rules:{vali: "required"},
    messages: { 
        service_idno: {required: "* Service IDNO Is Required."},    
        service_code: {required: "* Service Code Is Required."},    
        service_name: {required: "* Service Name Is Required."},    
        service_account: {required: "* Account Is Required."},  
        service_cost: {required: "* Cost Is Required."},    
        service_retail: {required: "* Retail Is Required."},            
    },                
    submitHandler: function(form) { 
        $.ajax({
            url: "rest/servicedelete.php",
            type: "POST",  
            data: $(this).serialize(),
            timeout:9000,
            beforeSend:function() {
                $('.modal').modal('hide');  
           },           
            success: function (data) {

            },  
            error:function() {
                $('#notification').html('Remote Service Currently Unavailable');    
           },       
        });     
    }                     
 });
});

I am wanting to be able to submit any form on the page at any time and only submit that data.

I have a situation where i have the same form multiple times on a page in my application which allows users to edit or remove data however when using the below javascript to listen for the form submission the page just refreshes.

I was going to use $('.service_form').serialize() to submit the forms however when doing so it serializes values from every form on the page and pletes the ajax request however if i use $(this).serialize() the page just refreshes.

HTML Form

<div id="service_modal" class="modal fade">  
  <div class="modal-dialog">  
       <div class="modal-content">  
            <form class="service_form">                    
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                </div>  
                <div class="modal-body">  
                    <div class='form-group has-feedback has-feedback-left'>
                        <label for="service_idno">IDNO:</label>
                        <input type="text" class="form-control required" id="service_idno" name="service_idno">
                    </div>                          
                    <div class='form-group has-feedback has-feedback-left'>
                        <label for="service_code">Service Code:</label>
                        <input type="text" class="form-control required" id="service_code" name="service_code">
                    </div>  
                    <div class='form-group has-feedback has-feedback-left'>
                        <label for="service_cost">Service Cost:</label>
                        <input type="number" class="form-control required" id="service_cost" name="service_cost">
                    </div>                          
                </div>  
                <div class="modal-footer">  
                       <input type="submit" value="Commit" class="btn btn-success" />  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>                      
           </form>                  
       </div>  
  </div>  
</div>  

Javascript

$('.service_form').each(function(){ 
 $(this).validate({
    errorClass: 'validation-error-label',
    highlight: function(element, errorClass) {$(element).removeClass(errorClass);},
    errorPlacement: function(error, element){if (element.parents('div').hasClass('has-feedback')) {error.appendTo(element.parent() );}},
    rules:{vali: "required"},
    messages: { 
        service_idno: {required: "* Service IDNO Is Required."},    
        service_code: {required: "* Service Code Is Required."},    
        service_name: {required: "* Service Name Is Required."},    
        service_account: {required: "* Account Is Required."},  
        service_cost: {required: "* Cost Is Required."},    
        service_retail: {required: "* Retail Is Required."},            
    },                
    submitHandler: function(form) { 
        $.ajax({
            url: "rest/servicedelete.php",
            type: "POST",  
            data: $(this).serialize(),
            timeout:9000,
            beforeSend:function() {
                $('.modal').modal('hide');  
           },           
            success: function (data) {

            },  
            error:function() {
                $('#notification').html('Remote Service Currently Unavailable');    
           },       
        });     
    }                     
 });
});

I am wanting to be able to submit any form on the page at any time and only submit that data.

• javascript
• jquery
• ajax
• forms

• Open your console and enable preserve logs. Try again. Look for errors. – Kevin B Commented Sep 27, 2017 at 16:07

2 Answers 2

The scope of submitHandler() is not the form element, hence this is not what you expect it to be. Use the provided form parameter instead:

data: $(form).serialize(),

first you need to store current form in a temp variable like

    $('.service_form').each(function(){ 
       var form = $(this);

and then you do the serialize like

    data: $(form).serialize(),

that will fix your issue.