JavaScript Problem Updating Dynamically Created Form

Tuesday, November 26, 2013


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"); ="paragraph2";"relative"; "-10px";
  var nnode = document.createTextNode("Card Description:"  + des);
 //Create button Dynamic
   var button = document.createElement("button");
    button.setAttribute("id", 'btn' + ++btnCount);
    // ="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);   
      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'); =  "dynamicforms[thisForm]";
    regupdateForm.setAttribute("id", 'regupdate' ); 
    regupdateForm.className = "formupdate";

    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); = "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;");
      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;");
    var month = new Array("January","Februray","March","April","May","June","July","August","September","October","November","December")
    var selectMonth =  document.createElement('select'); "expirationMonth";
    // = "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');
  var selectYear = document.createElement('select');"expirationYear";"expirationYear";"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');
    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


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
For more options, visit


Post a Comment

Note: Only a member of this blog may post a comment.

Copyright © 2010 Web Design | Free Blogger Templates by Splashy Templates | Layout by Atomic Website Templates

Vida de bombeiro Recipes Informatica Humor Jokes Mensagens Curiosity Saude Video Games Animals Diario das Mensagens Eletronica Rei Jesus News Noticias da TV Artesanato Esportes Noticias Atuais Games Pets Career Religion Recreation Business Education Autos Academics Style Television Programming Motosport Humor News The Games Home Downs World News Internet Design Entertaimment Celebrities 1001 Games Doctor Pets Net Downs World Enter Jesus Mensagensr Android Rub Letras Dialogue cosmetics Genexus lasofia thebushrajr wingshock tripedes gorduravegetal dainfamia dejavu-transpersonal jsbenfica republicadasbadanas ruiherbon iranianforaryans eaystcheyl fotosdanadir Só Humor Curiosity Gifs Medical Female American Health Madeira Designer PPS Divertidas Estate Travel Estate Writing Computer Matilde Ocultos Matilde futebolcomnoticias girassol lettheworldturn topdigitalnet Bem amado enjohnny produceideas foodasticos cronicasdoimaginario downloadsdegraca compactandoletras newcuriosidades blogdoarmario arrozinhoii