Javascript Jquery dynamic Form data serialize

Question

EDIT:

I need to do a jquery ajax call to the controller within this, it goes to error but does not show me what the error is. It just shows Internal Server Error.

                   $.ajax({
                                url: "<%=editNotificationURL%>",
                                type: 'POST',
                                data: queryString
                            }).done(function(json){
                                console.log(json);  
                                //alert("json::"+json);
                                //alert("Success!");
                            }).fail(function(jqXHR, textStatus, error) {
                                //alert("OOPS! An error occured while processing your request. Please try again after sometime.");
                                alert("Post error: " + error);
                            });

Error message:

urldecoder illegal hex characters in escape (%) pattern - for input String "=e"

Original Fixed:

I have a dynamic form that's created by javascript

var editForm = document.createElement("form");
                editForm.setAttribute('id',id + "_Edit_Form");
                editForm.setAttribute('class',"subform");
                editForm.setAttribute('role',"form");

...

var messageField = document.createElement("div");
                    messageField.setAttribute('class',"field");
                    var messageLabel = document.createElement("label");
                        messageLabel.setAttribute('for',id+"description");
                        messageLabel.innerHTML = "Description:";
                    var messageTextarea = document.createElement("textarea");
                        messageTextarea.setAttribute('id',id+"_message");
                        messageTextarea.innerHTML = description ;                           
                    messageField.appendChild(messageLabel);
                    messageField.appendChild(messageTextarea);

....

      var buttonsDiv = document.createElement("div");
                    buttonsDiv.setAttribute('class',"qmat-buttons");
                    //Create the Save button
                    var editSave = document.createElement("input");
                        editSave.setAttribute('type',"submit");
                        editSave.setAttribute('id',id+"_save");
                        editSave.setAttribute('class',"qmat-button action-blue-button");
                        editSave.setAttribute('value',"Save");
                        //editSave.innerHTML = "Save";
                        editSave.onclick = function () {
                            //alert("edit"+messageTextarea.value);
                            var formName = editForm.getAttribute('id');
                            var queryString = $('#'+formName).serialize();
                            var a = $('#'+formName).length;
                            alert("query::"+formName+"::"+a+"::"+queryString);
                        };

...

editDiv.appendChild(editForm);
                //Append the fieldset to the form
                editForm.appendChild(editFormFieldset);
                    //Append the legend to the fieldset
                    editFormFieldset.appendChild(editFormFieldsetLegend);
                    //Appends the Message field
                    editFormFieldset.appendChild(messageField);
                    //Appends the Start Date & Time group
                    editFormFieldset.appendChild(startGroup);
                    //Append the End Date & Time group
                    editFormFieldset.appendChild(endGroup);
                    //Append the status field
                    editFormFieldset.appendChild(statusField);
                //Append the buttons to the form
                editForm.appendChild(buttonsDiv);
        //Returns the Edit form 
        return editDiv;

Now I need to get the values in that form to Json. So I'm trying something like this:

editSave.onclick = function () {
  var formName = editForm.getAttribute('id');
  var queryString = $('#formName').serialize();
  alert("query::"+queryString);
};

But the queryString is empty. Looks like I'm missing something minor. Please help on this. Thanks

AmmarCSE · Accepted Answer

You need to correctly concatenate the strings

 var formName = editForm.getAttribute('id');
 var queryString = $('#'+formName).serialize();

Also, make sure your form fields have name attributes in order for serialize() to work correctly

var queryString = $('#299_Edit_Form').serialize();
console.log("query::" + queryString);



  
    Notification ID: 299
    
    
      Description:
      test 1
    
    
      
        Start Date:
        
      
      
        Start Time:
        
      
    
    
      
        End Date:
        
      
      
        End Time:
        
      
    
    
      Status:

Javascript Jquery dynamic Form data serialize

Answers (1)

Related Questions