Re: JavaScript Problem Updating Dynamically Created Form

Hello:


After some serious research I found the solution to why the update form would only update
one created element.  It was because of the way I was updating it calling the form value

newdes = document.forms['form name'].description.value;

What was needed was the input unique id  and get the value that way.

It works every time .


PH

On Tuesday, November 26, 2013 1:06:48 PM UTC-6, pame...@aol.com wrote:

Hello


I have been pondering with this issue for a while.  I leave it and work around it but still have to come back to it  to get it working. 


I am dynamically creating CC which works fine each CC created give you an option to update the CC or delete it which either
when click on the button give you a popup dialog box in which you can delete or update.  I'm having an issue with the update.

When I try to update the first CC created it will update but if I try to update it again or any other CC created after it gives
me the information from the first update.  I have tried giving the form different names using an array I have given unique ids
and still I get the same result information from the first card updated for every card I try to update.  I can't figure out
what else I can do.  If I stepping on something or what.  Code sample below The update should allow a user to update
the card description and the month and year of expiration of card

 var itemCount = 0; //global variable
  var formupdateCounter = 0;
  var ccsummaryCount =0;
  var btnCount = 0;
  var regupdatecounter =0;
  var newccCount = 0;
  var nnextDivCounter = 0;
  var descCount = 0;
  var newdiv = 0;
  var submit =0;
  var confirm = 0;
  var thisForm = 0;
  var dialog = 0;
  var exp =0;
function registerCreditCard(){
 
 
  alert("Is it getting here");
 


 /********This code should do some DOM creatiaon of elements capturing imformation from
          form to add to My Credit Cards tab*******************************************/
    
  var card=  document.creditCardRegister.cardNumber.value;
  des = document.creditCardRegister.description.value;
  var expmonth = document.creditCardRegister.expirationMonth.value;
  var expyear = document.creditCardRegister.expirationYear.value;
  var spechar ="/";
  var monthyear = expmonth+spechar+expyear;
  var cshadow = new String('************', card.length - 4)
                  + card.substring(card.length - 4);
 /*This grabs all of the info from the form(creditCardRegister)*/

 
 
//This is for My Credit Cards Tab
 var element = document.getElementById("creditCards");                     
 

 var parent= element.parentNode;
 



var node=document.createTextNode("Card Number:" +cshadow+ " " + "Expiration:" + monthyear);

  var para2 = document.createElement("p");
  para2.id ="paragraph2";
  para2.style.position="relative";
  para2.style.left= "-10px";
 
  var nnode = document.createTextNode("Card Description:"  + des);
 
 
 
 //Create button Dynamic
 
 
   var button = document.createElement("button");
    button.setAttribute("id", 'btn' + ++btnCount);
    //button.id ="btn";      //need a counter
    button.className ="ui-button ui-widget ui-state-default ui-corner-all ui-state-hover ui-button-text-only";
    button.innerHTML ="Update";
    button.onclick = function() {                      // Note this is a function   Calling function updatebutton
        alert("creating form and dialog"); 
     
       
 /**************Create Update Form******************/
 
 
  var element2 = document.getElementById("creditCards");   
  
  
   var parent2= element2.parentNode;
 
    
     itemCount += 1;
     
    alert("What is the count Now" + itemCount);
   
    var newElement = document.createElement('div');
    newElement.setAttribute("id", 'updateCC' + itemCount);   
    newElement.setAttribute("style","display:none;");
  
      alert("Debugging");
      alert(" Trying to see What is the count Now" + itemCount);
  
    
    var nextDiv = document.createElement('div');
    nextDiv.className ="dialogWrapper";
    nextDiv.setAttribute("id", 'updateCCDialog' + ++dialog);
   
 
    alert("Appending Divs");
    var dynamicforms = new Array("dynamic1","dynamic2","dynamic3","dynamic4");
   
    var regupdateForm=document.createElement('form');
    regupdateForm.name =  "dynamicforms[thisForm]";
    regupdateForm.setAttribute("id", 'regupdate' ); 
    regupdateForm.className = "formupdate";
    regupdateForm.method='';
    regupdateForm.action='';

  
    alert("Start of form name creation count" + dynamicforms[thisForm]);
   
     var newdes = " ";
    var form_Msg = document.createElement('p');
    var msg_Node =document.createTextNode("Are you sure you want to update this card?");
   
   
    var firstInput = document.createElement('input');
    firstInput.setAttribute("id", 'comfirmupdate' + confirm);
    firstInput.name = "description";
    firstInput.setAttribute("value", newdes);
    alert("Trying to see what is des" + newdes);
    firstInput.setAttribute("style"," position:absolute; left:150px; top:30px;");
    firstInput.value =newdes;//getvalue from document.creditCardRegister.description.value;
    firstInput.type ="text";
    firstInput.required ="true";
   
    var formLabel =document.createElement('label');
    formLabel.setAttribute("for", description);
    formLabel.innerHTML = "* Card Description: ";
    formLabel.setAttribute("style"," position:absolute; left:18px; top:37px;");
      
  
   
    newElement.appendChild(nextDiv); 
    form_Msg.appendChild(msg_Node);
    form_Msg.appendChild(firstInput);
    form_Msg.appendChild(formLabel)
    regupdateForm.appendChild(form_Msg);
   
      alert("Start of form creation 0");
   
      
  
    alert("Is this append working for formInput");
   
    var nextLabel=document.createElement('label');
    nextLabel.innerHTML = "* Expiration: ";
    nextLabel.setAttribute("style"," position:absolute; left:18px; top:65px;");
   
     regupdateForm.appendChild(nextLabel);
   
   
    var month = new Array("January","Februray","March","April","May","June","July","August","September","October","November","December")
    var selectMonth =  document.createElement('select');
    selectMonth.name= "expirationMonth";
    //selectMonth.id = "expirationMonth";
    selectMonth.setAttribute("id", 'expirationMonth' + ++exp);
    selectMonth.className = "expirationMonth";
    selectMonth.setAttribute("style"," width:80px; position:absolute; top:65px; left:150px;");
     for(var i=0;i<month.length;i++)
      {
          var mt = i;
          mt = document.createElement('option');
          mt.text=month[i];
          mt.id="expMonth";
          mt.name="month";
          mt.value=month[i];
          selectMonth.appendChild(mt);
      }
     
   
     regupdateForm.appendChild(selectMonth);
     
  var selectYear = document.createElement('select');
      selectYear.name="expirationYear";
      selectYear.id="expirationYear";
      selectYear.name="expirationYear";
      selectYear.setAttribute("style"," width:80px; position:absolute; top:65px; left:240px;");
       for(var i=2013; i<=2024; i++)
        {
          var yr = i;
          yr = document.createElement('option');
          yr.text=i;
          yr.name="year";
          yr.value=yr;
          selectYear.appendChild(yr);
        }
     
   
      regupdateForm.appendChild(selectMonth);
      regupdateForm.appendChild(selectYear);
      newElement.appendChild(regupdateForm);
   
    alert("Start of form creation2");
   
   
    alert("Start of form creation3");
   
   
    var nnextDiv = document.createElement('div');
    nnextDiv.className ="UpdateCreditCardActions";
    nnextDiv.setAttribute("id", 'updatecc' +  ++newdiv);
     var formbuttonUpdate = document.createElement('button');
    formbuttonUpdate.setAttribute("id", 'updateformbutton');
    formbuttonUpdate.setAttribute("style"," position:absolute; left:295px; top:130px;");
    formbuttonUpdate.type= "submit";
    formbuttonUpdate.innerHTML ="Update";
  
    formbuttonUpdate.onclick = function() {
 
    alert("Inside form update function");
   
           
                                var newdes = document.forms['dynamicforms[thisForm]' ].description.value;
                                                            
                                alert("Inside update form what form name" + dynamicforms[thisForm]);
                              
                                                                                                                                                                                      *****************This function is where I'm running into my issue I continue to get same information
                                                                                                                                                                                                                    from first update*****************************************
                               
                                alert("Inside formupdate what is description" + newdes);
                                var updateMonth = document.forms['dynamicforms[thisForm]'].expirationMonth.selectedIndex;
                                alert("form is this working");
                              
                                var getMonth = document.forms['dynamicforms[thisForm]'].expirationMonth.options[updateMonth].value;
                                alert("Am I getting the month" + getMonth);
                               
                                                             
                                var updateYear = document.forms['dynamicforms[thisForm]'].expirationYear.selectedIndex;
                                var getYear= document.getElementById("expirationYear").options[updateYear].value;
                                 
                                  alert("Is year part working"+ updateYear);
                                 
                                 /**Need to call original form to get card number***/
                                alert("Am I getting card number" + card);
                                var spechar ="/";
                                var monthYear2 = updateMonth+spechar+getYear;
                                var ccshadow = new String('************', card.length - 4)
                                   + card.substring(card.length - 4);
                               
                                
                                  alert("Am I getting to yeare" + getYear);
                                 
                                  
                                  
                                  var newDescription ="Card Description: ";
                                  nnode.nodeValue =newDescription + newdes;
                                
                                  var cardNumber ="Card Number:";
                                  var cardExpiration = "Expiration:";
                                  alert("where is it bradking");  
                                  node.nodeValue =cardNumber + ccshadow + " " + cardExpiration + monthYear2;
                                                                  
                                  $("#updateCC" + itemCount).dialog("close");
                                   alert("Is counter working in update" +  itemCount);
                            
                                       
                                        //alert("trying to seet what is array name" + dynamicforms[a]);
                                   
                                        confirm +=1;                      
                                        regupdatecounter +=1;
                                       thisForm += 1;
                                       a +=1;
                                   
                                   };  //End of Update Dialog
   
 
********************There is more code to this huge function but not relevent*********************************************  .
}


I would really appreciate your help I traced through it until 3 am this morning nothing I tried works:(  I need another set of eyes


Thank You In Advance

PH

--
You received this message because you are subscribed to the Google Groups "JavaScript Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to javascript-information+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.