troubleshooting Question

400 Bad Request error on submitting form with DOM elements

Avatar of COMPSUPP
COMPSUPP asked on
JavaScriptHTMLWeb Components
5 Comments1 Solution439 ViewsLast Modified:
Hi Experts,

I have a page where I am generating inputs on the fly using DOM. If I set up a select input and submit my form, all works well. However, if I try to create multiple selects via a loop, giving them different ids and names, upon submitting the form I get either a 400 bad request page, or 'The connection to the server was reset while the page was loading.'

The code for the portion that generates the select inputs I am having a problem with is below. Can you see anything wrong with it ? The function that generates the select each time is at the bottom.

Alternatively, is there a way of debugging this kind of problem, as when the form fails it doesn't progress into my processing servlet. I just get the unhelpful "400 bad request" but it doesn't say why..

thanks
function generateAdditionalProofOfBreedingCasualEdit(c4, myCount, responseElement, subrowCount, subrowLimit, proofOfBreedingString, proofOfBreedingValues){
var subrowLimit = 10;
var subrowsToShow = new Array();  
  var proofOfBreedingText = document.createTextNode('Breeding Evidence');
  
    var proofOfBreedingTextCell = document.createElement('td');
    proofOfBreedingTextCell.appendChild(proofOfBreedingText);
    proofOfBreedingTextCell.setAttribute('align','left');
    proofOfBreedingTextCell.setAttribute('style','font-family: Arial, Helvetica, sans-serif;' + 
    'font-size:8pt; font-weight:bold;color: #2A377E;');
    proofOfBreedingTextCell.setAttribute('id','proofOfBreedingText.' + myCount);
    
       if ((document.all) && (document.getElementById))
    {
        // IE
        proofOfBreedingTextCell.setAttribute('className', 'TXTblueboldtext8');
    }
    else
    {
       // FireFox
       proofOfBreedingTextCell.setAttribute('class','TXTblueboldtext8');
    }
    
    
    var proofOfBreedingCountText = document.createTextNode('Number');
  
    var proofOfBreedingCountTextCell = document.createElement('td');
    proofOfBreedingCountTextCell.appendChild(proofOfBreedingCountText);
    proofOfBreedingCountTextCell.setAttribute('align','left');
    proofOfBreedingCountTextCell.setAttribute('style','font-family: Arial, Helvetica, sans-serif;' + 
    'font-size:8pt; font-weight:bold;color: #2A377E;');
    proofOfBreedingCountTextCell.setAttribute('id','proofOfBreedingCountText.' +myCount);
    
       if ((document.all) && (document.getElementById))
    {
        // IE
        proofOfBreedingCountTextCell.setAttribute('className', 'TXTblueboldtext8');
    }
    else
    {
       // FireFox
       proofOfBreedingCountTextCell.setAttribute('class','TXTblueboldtext8');
    }
    
    var proofOfBreedingTextRow = document.createElement('tr');
   
    proofOfBreedingTextRow.setAttribute('id','proofOfBreedingTextRow.' + myCount);
    

    proofOfBreedingTextRow.appendChild(proofOfBreedingTextCell);
    proofOfBreedingTextRow.appendChild(proofOfBreedingCountTextCell);
    
       // Workaround for IE bug as it can't cope with setAttribute in some cases..
//    if ((document.all) && (document.getElementById))
//    {
//            proofOfBreedingTextRow.style.display = "none";
//    }
//    else
//    {
//          proofOfBreedingTextRow.setAttribute('style','display:none');
//    }
    
  
  var proofOfBreedingTable = document.createElement('table');
  proofOfBreedingTable.setAttribute('border','0');
  proofOfBreedingTable.setAttribute('align','left');
  
  // VERY IMPORTANT FOR IE DOM THAT WE HAVE A TBODY !
  
  var tbody = document.createElement('tbody');
  proofOfBreedingTable.appendChild(tbody);
  tbody.appendChild(proofOfBreedingTextRow);
  var preselected = "";
 var pattern = new RegExp('(.+)(::)', "i");
  var pobArray = proofOfBreedingValues.split("::, ");

//PROBLEM IS HERE...if I make subrowLimit = 1 everything
works fine !!!!!!!!!!!!!!!

for(c = 0; c < subrowLimit; c++){
   var proofOfBreeding= "";
   var proofOfBreedingCount = "";
   for(i = 0; i < pobArray.length; i++){
        var pobArray2 = pobArray[i].split("=");
        var matchMe = c + "_proofOfBreeding";
        if(pobArray2[0] == matchMe){
          proofOfBreeding = pobArray2[1];
          // remove :: if needed
          if(pattern.test(proofOfBreeding)){
            proofOfBreeding = proofOfBreeding.substring(0, proofOfBreeding.length-2);
          }
        }
        var matchMe = c + "_proofOfBreedingCount";
        if(pobArray2[0] == matchMe){
          proofOfBreedingCount = pobArray2[1];
          // remove :: if needed
          if(pattern.test(proofOfBreedingCount)){
            proofOfBreedingCount = proofOfBreedingCount.substring(0, proofOfBreedingCount.length-2);
          }
        }
   }

  
  if(proofOfBreeding != null && proofOfBreeding != ""){
    preselected = proofOfBreeding;
  }else{
    preselected = "";
  }
  
  var subrowRow = document.createElement('tr');
  subrowRow.setAttribute('id','subrowRow.proofOfBreeding.' + myCount + '.' + subrowCount);
  
      if ((document.all) && (document.getElementById))
    {
           subrowRow.style.display = "none";
    }
    else
    {
         subrowRow.setAttribute('style','display:none');
    }

   var proofOfBreedingSelect = makeProofOfBreedingSelect(proofOfBreedingString, myCount, c, preselected);
    proofOfBreedingSelect.setAttribute('id', 'observation.' + myCount + '.proofOfBreeding.subrow.' + subrowCount);
    
// IF I LEAVE OUT THE LINE BELOW, IT WORKS. BUT I HAVE TO SEND THIS DATA THROUGH TO MY SERVLET..
proofOfBreedingSelect.setAttribute('name', "observation." + myCount + ".proofOfBreeding.subrow." + subrowCount);
    
    var proofOfBreedingCell = document.createElement('td');
    proofOfBreedingCell.appendChild(proofOfBreedingSelect);
    subrowRow.appendChild(proofOfBreedingCell);

  
   var subrowCountElement = document.createElement('input');
    subrowCountElement.setAttribute('type', 'text');
    subrowCountElement.setAttribute('size', '2');
    subrowCountElement.setAttribute('maxlength', '7');
    if(proofOfBreedingCount != null && proofOfBreedingCount != ""){
      subrowCountElement.setAttribute('value', proofOfBreedingCount);
    }
   subrowCountElement.setAttribute('name','observation.' + myCount + ".proofOfBreedingCount.subrow." + subrowCount);
   subrowCountElement.setAttribute('id','observation.' + myCount + '.proofOfBreedingCount.subrow.' + subrowCount);
    
    var proofOfBreedingCountCell = document.createElement('td');
    
    proofOfBreedingCountCell.appendChild(subrowCountElement);
    subrowRow.appendChild(proofOfBreedingCountCell);
  
  // PLUSES
    var tinyPlusSubrowImage = document.createElement('img');
    tinyPlusSubrowImage.setAttribute('src', '../images/tiny-plus-blue.gif');
    tinyPlusSubrowImage.setAttribute('alt', 'plus');
    tinyPlusSubrowImage.setAttribute('title', 'add row');
    tinyPlusSubrowImage.setAttribute('border', '0');
   
     // Create the plus and minus cells
    var subrowPlusMinusCell = document.createElement('td');
    subrowPlusMinusCell.appendChild(tinyPlusSubrowImage);
    
    
       // Workaround for IE bug as it can't cope with setAttribute in some cases..
    if ((document.all) && (document.getElementById))
    {
           subrowPlusMinusCell.style.display = "none";
    }
    else
    {
           subrowPlusMinusCell.setAttribute('style', 'display:none');
    }
    
    
    subrowPlusMinusCell.setAttribute('id','subrow-tiny-plus.proofOfBreeding.' + myCount + '.' + subrowCount);
    subrowRow.appendChild(subrowPlusMinusCell);
 
       // Workaround for IE bug
    if ((document.all) && (document.getElementById))
    {
        tinyPlusSubrowImage['onclick'] = new Function('showProofOfBreedingSubrowInCasual(' + myCount + ',' + subrowCount +')');
    }
    else
    {
         tinyPlusSubrowImage.setAttribute('onclick','showProofOfBreedingSubrowInCasual(' + myCount + ',' + subrowCount +')');
    }
  
  tbody.appendChild(subrowRow);
  subrowCount++;
    if(proofOfBreeding != "" || proofOfBreedingCount != ""){
      subrowsToShow[(subrowCount-1)] = subrowCount;
     }
}

  var data = document.createElement('td');
  var innerfieldset = document.createElement('fieldset');
      if ((document.all) && (document.getElementById))
    {
        // IE
        innerfieldset.setAttribute('className', 'green');
    }
    else
    {
       // FireFox
       innerfieldset.setAttribute('class','green');
    }
  data.appendChild(proofOfBreedingTable);
  innerfieldset.appendChild(data);
  c4.appendChild(innerfieldset);

  return subrowsToShow;
}


// here is the function that generates the select
function makeProofOfBreedingSelect(proofOfBreedingString, myCount, subrowCount, preselected){

  var proofOfBreedingSelect = document.createElement('select');
       if ((document.all) && (document.getElementById))
    {
        // IE
        proofOfBreedingSelect.setAttribute('className', 'blueLeftIE');
    }
    else
    {
       // FireFox
       proofOfBreedingSelect.setAttribute('class','blueLeft');
    }  
  
  proofOfBreedingSelect.setAttribute('title','Select proof of breeding');
  // make proofOfBreedingString into an array
  var proofOfBreedingArray = proofOfBreedingString.split(',');
  var loopLimit = proofOfBreedingArray.length;
  
      proofOfBreedingArray.unshift(" _ "); // this adds a blank row
  
  for(i = 0; i < loopLimit; i ++){
     // if proofOfBreedingArray[i] contains a square bracket, remove it
     var option = document.createElement('option');
     var splitMe = proofOfBreedingArray[i].split("_");
     var value = splitMe [0];
      var textToShow = splitMe [1];
      var proofOfBreedingText = document.createTextNode(textToShow);      
      option.appendChild(proofOfBreedingText);
      option.setAttribute('value', proofOfBreedingArray[i]);
      if(proofOfBreedingArray[i] == preselected){
        option.setAttribute('selected', true);
      }
      
      proofOfBreedingSelect.appendChild(option);
      
  }

   return proofOfBreedingSelect;
}
ASKER CERTIFIED SOLUTION
COMPSUPP

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros