Submitting a text with AJAX

Question

I am new to AJAX/javascript and I am developingin jsp. I am trying to submit a text entered in a text area using a JavaScript button. here is the relevant parts: For the first submit button it worked fine but when posted I got a plain page instaed of keeping the content of EditText.jsp, I don't know why? The second button is what I am trying to do with replacing the getSomethingWithAjax method by my own method in order to enter a large number of characters. It seems like POST won't have a limitation in number of characters to be submited.

   function submitText()
   {
      var value =$("input[name=text]").val();
      jQuery.ajax({type:"POST",url:"EditText.jsp"})
   }
 </script>

 <form method="POST" class="example" action="/jsp/EditText.jsp" id=form2>
 <input type=hidden name=filepath value="<%=filename%>">
 <input type=hidden name=textarea value=true>

 <!--text area part here-->
 <!--first submit button-->
 <input type=submit name=submit value="Save Changes" onClick="if(runOnSubmit()) 

 {getSomethingWithAjax('EditText.jsp'+getAllFormElementsAndMakeIntoURI(true

 ),'','hereIsTheMainHeaderSpan',false,false);}">
 <!--the second button that I am trying to make-->
 <input type="button" name="submit" value="Save Changes" onClick="submitText()">

Please let me know of your suggestions. if you wanna see the whole code click the link: https://stackoverflow.com/questions/13828063/jsphow-to-replace-the-button-below-to-make-execute-the-request Thanks,

Answer 1

First of all, the way you're trying to do that is horrendous.

The point is that we don't know what some of your functions are doing. But if it changes the signature of the servlet method you're trying to post to, then you could get an empty response back.

Just bind a function to the form's submit event:

<script type="text/javascript">
    $('#form2').submit(function(){
        $.ajax({
            "type": "POST",
            "url": "EditText.jsp",
            "data": $('#form2').serialize(),
            "success": function(){
                //callback function
            }
        });
    }
</script>

<form method="POST" class="example" action="/jsp/EditText.jsp" id=form2>
    <input type=hidden name=filepath value="<%=filename%>"/>
    <input type=hidden name=textarea value=true />  
    <input type=submit name=submit value="Save Changes">
    <!--the second button that I am trying to make-->
    <input type="button" name="submit" value="Save Changes">