?
Solved

400 Bad Request error on submitting form with DOM elements

Posted on 2009-12-17
5
Medium Priority
?
417 Views
Last Modified: 2013-11-18
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;
}

Open in new window

0
Comment
Question by:COMPSUPP
  • 3
  • 2
5 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26070546
Is this link of any help to you?
http://www.bigresource.com/Tracker/Track-javascripts-MJKPcbFK/
http://www.codestyle.org/sitemanager/apache/errors-400.shtml

Let me know if you have already tried them

Thanks
0
 

Author Comment

by:COMPSUPP
ID: 26070590
The first link  isn't applicable to what I'm doing, as I am not using jQuery, or ajax in the section where I have a problem.

The second link tells me "The HTTP error 400, bad request, means that the Web server received a request that it could not process, because it is not configured to do so, or because it expects certain headers or parameters in the request that are not present."

I get that, but I want to know why it couldn't process the request, or what headers and parameters are missing.

thanks
0
 

Accepted Solution

by:
COMPSUPP earned 0 total points
ID: 26070760
I think I found the problem..in case anyone else has the same issue..

I meant my form to be using "POST" instead of "GET" but had an error in my form line
  <form type="post" action="../servlet/BTParseFastTrackForm" onSubmit="return validateEditcas();" name=form1>

Presumably this error led to GET being used instead of POST. And I read that as long as you use method="POST" you can have as many form fields as you like. Using method="GET" you will run into the URL length limit if you have too many fields.

So changing my form line to
  <form method="post" action="../servlet/BTParseFastTrackForm" onSubmit="return validateEditcas();" name=form1>
seemed to fix things.


0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26070773
@COMPSUPP: Many thanks for posting the resolution.
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26070776
@COMPSUPP: Many thanks for posting the resolution.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question