s:checkbox fieldValue always true in validation before submitting

Issue

I am using Struts 2 <s:checkbox /> in my form processing, along with AngularJS and jQuery.

Before submitting, I need validation and until now we do this in the project:

When we press Submit button, this function is called:

$scope.processForm('myForm', '<s:url value="/form/validate.action" />', 
                             '<s:url value="/form/save.action" />');

where

processForm(formId, validateUrl, submitUrl)

is a function defined by us:

$scope.processForm = function(form, validateUrl, submitUrl) {
    window.scroll(0,0);
    ProccessFormService.processStandarForm(form, validateUrl, submitUrl);
};

And furthermore, we have processStandarForm() defined in a global service:

angular.module('ourApp').controller('myFormCtrl', 
                                    function($scope, $modal, ProccessFormService) {
...
}

In service:

(function() {   
    angular.module('ourApp').factory('ProccessFormService', ['$http', function($http) {

    processStandarForm: function(form, validateUrl, submitUrl) {        
        this.processForm(form, validateUrl, submitUrl);
    },

    processForm: function(form, validateUrl, submitUrl, success) {
        
        if ((typeof form) == 'string') {
            form = document.getElementById(form);
        }
        
        var data = this.form2Object(form);
        var ctrl = this;
        
        if (data) {
            if (validateUrl) {
                $http({
                    method  : 'POST',
                    url     : validateUrl,
                    data    : $.param(data),  // pass in data as strings
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  
         // set the headers so angular passing info as form data (not request payload)
                }).success(function() {
                    if (!success) {
                        form.action = submitUrl;
                        form.submit();
                    } else {
                        ctrl.submitAjaxForm(submitUrl, data, success)
                    }
                });
            } else if (submitUrl) {
                if (!success) {
                    form.action = submitUrl;
                    form.submit();
                } else {
                    this.submitAjaxForm(submitUrl, data, success)
                }
            }
        }       
    },
}

Basically, we are submitting twice the form, firstly for validation, then for submitting.

What I don’t understand, is that if I debug in action class, in the function of validate(), the boolean value of <s:checkbox /> is always true, but in submit() function, boolean values are submitted correctly, according to they are checked/not checked. Checkboxs are like this:

<div class="col-sm-12 form-checkbox">
     <s:checkbox name = "myForm.married" 
             ng-model = "checkboxModel" 
                value = "<s:property value='%{myForm.married}'/>"
            ng-change = "submitCheckbox();" 
              ng-init = "checkboxModel= %{myForm.married}" 
                theme = "simple"  
          ng-disabled = "anotherFunction()" />
</div>

I understand that, the value submitted is fieldValue="xxx" in <s:checkbox />, and by default is true. So I did this to change the fieldValue of every checkbox before the page is loaded. Although all the script are executed, nothing changed. I still get all true in validation.

$(document).ready(function(){
    $( "input:checkbox" ).each(function(){
        var checkbox = $(this);
        var checked = checkbox.prop("checked");//sera false/true
        if (checked == true){
            checkbox.prop("fieldValue", "true");
        } else {
            checkbox.prop("fieldValue", "false");
        }
    });
});

So, how can I get right boolean values not only in submitting, but also in validation? Is the Angular service wrongly written? I really doubt that but I am not able to figure out the question.

Solution

Suspected that data is not serialized properly that used with angular $http().

If you want to emulate $.param() that used in jQuery you should use built-in serializer $httpParamSerializerJQLike.

Alternative $http params serializer that follows jQuery’s param()
method logic. The serializer will also sort the params alphabetically.

To use it for serializing $http request parameters, set it as the
paramSerializer property:

$http({
  url: myUrl,
  method: 'GET',
  params: myParams,
  paramSerializer: '$httpParamSerializerJQLike'
});

It is also possible to set it as the default paramSerializer in the
$httpProvider.

Additionally, you can inject the serializer and use it explicitly, for
example to serialize form data for submission:

.controller(function($http, $httpParamSerializerJQLike) {
  //...

  $http({
    url: myUrl,
    method: 'POST',
    data: $httpParamSerializerJQLike(myData),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });

});

Another ways to convert from $.param to angular you can find in Convert $.param in angularjs

Answered By – Roman C

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0