0

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

4
  • You do create input elements for that form dynamically as well? It's hard to tell because it's not in the code you posted. Please consider improving your question so people can get the full picture of your setup. Commented Jun 23, 2015 at 20:43
  • Yes it is dynamic. Sorry about that. Will elaborate my code. Thanks Commented Jun 23, 2015 at 20:44
  • Did you make sure that the selector (I guess '#formName' is a placeholder here?) really matches your form? Does $('#formName').length return 1? Commented Jun 23, 2015 at 20:46
  • @denisw Yes it does return 1. But still not working. Commented Jun 23, 2015 at 20:53

1 Answer 1

1

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);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="299_Edit_Form" class="subform" role="form">
  <fieldset id="299_Edit_Form_Fieldset" class="main-fieldset">
    <legend class="legend">Notification ID: <strong>299</strong>
    </legend>
    <div class="field">
      <label for="299description">Description:</label>
      <textarea name="299_message" id="299_message">test 1</textarea>
    </div>
    <div class="group">
      <div class="field">
        <label for="299_start_date">Start Date:</label>
        <input type="text" name="299_start_date" id="299_start_date" value="6/2/2015" class="date-picker">
      </div>
      <div class="field">
        <label for="299_start_time">Start Time:</label>
        <select name="299_start_time" id="299_start_time">
          <option value="12:00 AM">12:00 AM</option>
          <option value="12:15 AM">12:15 AM</option>
          <option value="12:30 AM">12:30 AM</option>
          <option value="12:45 AM">12:45 AM</option>
          <option value="1:00 AM">1:00 AM</option>
          <option value="1:15 AM">1:15 AM</option>
          <option value="1:30 AM">1:30 AM</option>
          <option value="1:45 AM">1:45 AM</option>
          <option value="2:00 AM">2:00 AM</option>
          <option value="2:15 AM">2:15 AM</option>
          <option value="2:30 AM">2:30 AM</option>
          <option value="2:45 AM">2:45 AM</option>
          <option value="3:00 AM">3:00 AM</option>
          <option value="3:15 AM">3:15 AM</option>
          <option value="3:30 AM">3:30 AM</option>
          <option value="3:45 AM">3:45 AM</option>
          <option value="4:00 AM">4:00 AM</option>
          <option value="4:15 AM">4:15 AM</option>
          <option value="4:30 AM">4:30 AM</option>
          <option value="4:45 AM">4:45 AM</option>
          <option value="5:00 AM">5:00 AM</option>
          <option value="5:15 AM">5:15 AM</option>
          <option value="5:30 AM">5:30 AM</option>
          <option value="5:45 AM">5:45 AM</option>
          <option value="6:00 AM">6:00 AM</option>
          <option value="6:15 AM">6:15 AM</option>
          <option value="6:30 AM">6:30 AM</option>
          <option value="6:45 AM">6:45 AM</option>
          <option value="7:00 AM">7:00 AM</option>
          <option value="7:15 AM">7:15 AM</option>
          <option value="7:30 AM">7:30 AM</option>
          <option value="7:45 AM">7:45 AM</option>
          <option value="8:00 AM">8:00 AM</option>
          <option value="8:15 AM">8:15 AM</option>
          <option value="8:30 AM">8:30 AM</option>
          <option value="8:45 AM">8:45 AM</option>
          <option value="9:00 AM">9:00 AM</option>
          <option value="9:15 AM">9:15 AM</option>
          <option value="9:30 AM">9:30 AM</option>
          <option value="9:45 AM">9:45 AM</option>
          <option value="10:00 AM">10:00 AM</option>
          <option value="10:15 AM">10:15 AM</option>
          <option value="10:30 AM">10:30 AM</option>
          <option value="10:45 AM">10:45 AM</option>
          <option value="11:00 AM">11:00 AM</option>
          <option value="11:15 AM">11:15 AM</option>
          <option value="11:30 AM">11:30 AM</option>
          <option value="11:45 AM">11:45 AM</option>
          <option value="12:00 PM">12:00 PM</option>
          <option value="12:15 PM">12:15 PM</option>
          <option value="12:30 PM">12:30 PM</option>
          <option value="12:45 PM">12:45 PM</option>
          <option value="1:00 PM">1:00 PM</option>
          <option value="1:15 PM">1:15 PM</option>
          <option value="1:30 PM">1:30 PM</option>
          <option value="1:45 PM">1:45 PM</option>
          <option value="2:00 PM">2:00 PM</option>
          <option value="2:15 PM">2:15 PM</option>
          <option value="2:30 PM">2:30 PM</option>
          <option value="2:45 PM">2:45 PM</option>
          <option value="3:00 PM">3:00 PM</option>
          <option value="3:15 PM">3:15 PM</option>
          <option value="3:30 PM">3:30 PM</option>
          <option value="3:45 PM">3:45 PM</option>
          <option value="4:00 PM">4:00 PM</option>
          <option value="4:15 PM">4:15 PM</option>
          <option value="4:30 PM">4:30 PM</option>
          <option value="4:45 PM">4:45 PM</option>
          <option value="5:00 PM">5:00 PM</option>
          <option value="5:15 PM">5:15 PM</option>
          <option value="5:30 PM">5:30 PM</option>
          <option value="5:45 PM">5:45 PM</option>
          <option value="6:00 PM">6:00 PM</option>
          <option value="6:15 PM">6:15 PM</option>
          <option value="6:30 PM">6:30 PM</option>
          <option value="6:45 PM">6:45 PM</option>
          <option value="7:00 PM" selected="selected">7:00 PM</option>
          <option value="7:15 PM">7:15 PM</option>
          <option value="7:30 PM">7:30 PM</option>
          <option value="7:45 PM">7:45 PM</option>
          <option value="8:00 PM">8:00 PM</option>
          <option value="8:15 PM">8:15 PM</option>
          <option value="8:30 PM">8:30 PM</option>
          <option value="8:45 PM">8:45 PM</option>
          <option value="9:00 PM">9:00 PM</option>
          <option value="9:15 PM">9:15 PM</option>
          <option value="9:30 PM">9:30 PM</option>
          <option value="9:45 PM">9:45 PM</option>
          <option value="10:00 PM">10:00 PM</option>
          <option value="10:15 PM">10:15 PM</option>
          <option value="10:30 PM">10:30 PM</option>
          <option value="10:45 PM">10:45 PM</option>
          <option value="11:00 PM">11:00 PM</option>
          <option value="11:15 PM">11:15 PM</option>
          <option value="11:30 PM">11:30 PM</option>
          <option value="11:45 PM">11:45 PM</option>
        </select>
      </div>
    </div>
    <div class="group">
      <div class="field">
        <label for="299_end_date">End Date:</label>
        <input type="text" name="299_end_date" id="299_end_date" value="6/29/2015" class="date-picker">
      </div>
      <div class="field">
        <label for="299_end_time">End Time:</label>
        <select name="299_end_time" id="299_end_time">
          <option value="12:00 AM">12:00 AM</option>
          <option value="12:15 AM">12:15 AM</option>
          <option value="12:30 AM">12:30 AM</option>
          <option value="12:45 AM">12:45 AM</option>
          <option value="1:00 AM">1:00 AM</option>
          <option value="1:15 AM">1:15 AM</option>
          <option value="1:30 AM">1:30 AM</option>
          <option value="1:45 AM">1:45 AM</option>
          <option value="2:00 AM">2:00 AM</option>
          <option value="2:15 AM">2:15 AM</option>
          <option value="2:30 AM">2:30 AM</option>
          <option value="2:45 AM">2:45 AM</option>
          <option value="3:00 AM">3:00 AM</option>
          <option value="3:15 AM">3:15 AM</option>
          <option value="3:30 AM">3:30 AM</option>
          <option value="3:45 AM">3:45 AM</option>
          <option value="4:00 AM">4:00 AM</option>
          <option value="4:15 AM">4:15 AM</option>
          <option value="4:30 AM">4:30 AM</option>
          <option value="4:45 AM">4:45 AM</option>
          <option value="5:00 AM">5:00 AM</option>
          <option value="5:15 AM">5:15 AM</option>
          <option value="5:30 AM">5:30 AM</option>
          <option value="5:45 AM">5:45 AM</option>
          <option value="6:00 AM">6:00 AM</option>
          <option value="6:15 AM">6:15 AM</option>
          <option value="6:30 AM">6:30 AM</option>
          <option value="6:45 AM">6:45 AM</option>
          <option value="7:00 AM">7:00 AM</option>
          <option value="7:15 AM">7:15 AM</option>
          <option value="7:30 AM">7:30 AM</option>
          <option value="7:45 AM">7:45 AM</option>
          <option value="8:00 AM">8:00 AM</option>
          <option value="8:15 AM">8:15 AM</option>
          <option value="8:30 AM">8:30 AM</option>
          <option value="8:45 AM">8:45 AM</option>
          <option value="9:00 AM">9:00 AM</option>
          <option value="9:15 AM">9:15 AM</option>
          <option value="9:30 AM">9:30 AM</option>
          <option value="9:45 AM">9:45 AM</option>
          <option value="10:00 AM">10:00 AM</option>
          <option value="10:15 AM">10:15 AM</option>
          <option value="10:30 AM">10:30 AM</option>
          <option value="10:45 AM">10:45 AM</option>
          <option value="11:00 AM">11:00 AM</option>
          <option value="11:15 AM">11:15 AM</option>
          <option value="11:30 AM">11:30 AM</option>
          <option value="11:45 AM">11:45 AM</option>
          <option value="12:00 PM">12:00 PM</option>
          <option value="12:15 PM">12:15 PM</option>
          <option value="12:30 PM">12:30 PM</option>
          <option value="12:45 PM">12:45 PM</option>
          <option value="1:00 PM">1:00 PM</option>
          <option value="1:15 PM">1:15 PM</option>
          <option value="1:30 PM">1:30 PM</option>
          <option value="1:45 PM">1:45 PM</option>
          <option value="2:00 PM">2:00 PM</option>
          <option value="2:15 PM">2:15 PM</option>
          <option value="2:30 PM">2:30 PM</option>
          <option value="2:45 PM">2:45 PM</option>
          <option value="3:00 PM">3:00 PM</option>
          <option value="3:15 PM">3:15 PM</option>
          <option value="3:30 PM">3:30 PM</option>
          <option value="3:45 PM">3:45 PM</option>
          <option value="4:00 PM">4:00 PM</option>
          <option value="4:15 PM">4:15 PM</option>
          <option value="4:30 PM">4:30 PM</option>
          <option value="4:45 PM">4:45 PM</option>
          <option value="5:00 PM">5:00 PM</option>
          <option value="5:15 PM">5:15 PM</option>
          <option value="5:30 PM">5:30 PM</option>
          <option value="5:45 PM">5:45 PM</option>
          <option value="6:00 PM">6:00 PM</option>
          <option value="6:15 PM">6:15 PM</option>
          <option value="6:30 PM">6:30 PM</option>
          <option value="6:45 PM">6:45 PM</option>
          <option value="7:00 PM" selected="selected">7:00 PM</option>
          <option value="7:15 PM">7:15 PM</option>
          <option value="7:30 PM">7:30 PM</option>
          <option value="7:45 PM">7:45 PM</option>
          <option value="8:00 PM">8:00 PM</option>
          <option value="8:15 PM">8:15 PM</option>
          <option value="8:30 PM">8:30 PM</option>
          <option value="8:45 PM">8:45 PM</option>
          <option value="9:00 PM">9:00 PM</option>
          <option value="9:15 PM">9:15 PM</option>
          <option value="9:30 PM">9:30 PM</option>
          <option value="9:45 PM">9:45 PM</option>
          <option value="10:00 PM">10:00 PM</option>
          <option value="10:15 PM">10:15 PM</option>
          <option value="10:30 PM">10:30 PM</option>
          <option value="10:45 PM">10:45 PM</option>
          <option value="11:00 PM">11:00 PM</option>
          <option value="11:15 PM">11:15 PM</option>
          <option value="11:30 PM">11:30 PM</option>
          <option value="11:45 PM">11:45 PM</option>
        </select>
      </div>
    </div>
    <div class="field">
      <label for="299_status">Status:</label>
      <select name="299_status" id="299_status">
        <option value="true" selected="selected">Active</option>
        <option value="false">Inactive</option>
      </select>
    </div>
  </fieldset>
  <div class="buttons">
    <input type="submit" id="299_save" class="button action-blue-button" value="Save" on click="save()">
    <input type="reset" id="299_cancel" class="button action-blue-button" value="Cancel">
  </div>
</form>

Sign up to request clarification or add additional context in comments.

13 Comments

Awesome. Thanks so much for your immediate response. But still doesn't work :(
Not sure how to do that as this is a dynamic form generated from js. Sorry
@Harish, post more of the javascript code that generates the form or post the generated HTML itself
I have the generated HTMl, but the js is not working. jsfiddle.net/6L5pdx2c/1
@Harish, if you dont know how to put the name attributes let me know
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.