Question

I want to use ajax for add data in database and i found following code in net and it is working fine.

<script language='javascript'>
reqObj=null;
function saveCust(){
    document.getElementById('res').innerHTML='processing';
    if(window.XMLHttpRequest){
        reqObj=new XMLHttpRequest();
    }else {
        reqObj=new ActiveXObject('Microsoft.XMLHTTP');
    }
    reqObj.onreadystatechange=processSave;
    reqObj.open('POST','./custSave?reqObj.open('POST','./cName?id='+document.getElementById('CustCode').value,true);,true);
    reqObj.send(null);
}
function processSave(){
    if(reqObj.readyState==4){
        document.getElementById('res').innerHTML=reqObj.responseText;
    }
}
</script>

Above code sends only one String but, i have 5 Strings in my form.

Please anybody alter the code for sending multiple data.

Answer 1

The problem is that you’re sending a single parameter in the reqObj.open function:

reqObj.open('POST','./custSave?reqObj.open('POST','./cName?id='+document.getElementById('CustCode').value,true);,true);

Note that the only parameter you send is id.

You can add more parameters in the flavor of QueryString:

id=something&otherParameter=else //and more parameters

---

IMO the easiest way to handle an ajax request would be using jQuery, as shown and heavily explained by BalusC in How to use Servlets and Ajax?.

Based on the samples there and jQuery Ajax POST example with PHP, you can come with the following code:

• Assuming the 5 Strings are in the form

  function saveCust(){
      $('#res').html('processing');
      var $form = $(this);
      var serializedData = $form.serialize();
      $.post('./custSave', serializedData, function(responseText) {
          $('#res').html(responseText);
      });
  }
  

• Assuming there’s data outside the form

  function saveCust(){
      $('#res').html('processing');
      var $form = $(this);
      var serializedData = $form.serialize() + "&id=" + $('#CustCode').val();
      $.post('./custSave', serializedData, function(responseText) {
          $('#res').html(responseText);
      });
  }
  

And you can even enhance this using more jQuery functions, but that’s outside the scope of this answer.