Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CreateElement Problem

Posted on 2006-07-24
19
Medium Priority
?
437 Views
Last Modified: 2012-06-27
I have ta basic questions, i am not in mode to do debug so please help me out here.


Question, textbox i created with javaScript it is not passing value to next page, so on the next page how can i get the value of it. i am using ASP Request object to access its value, but i believe when we create new elements using jscript it does not event post value as a form element.

 function signIt(obj) {

     if(obj.checked && obj.value=="agree_terms") {
          var div, txtLabel, txtbox
         
          div = document.createElement("DIV")
          div.setAttribute("id", "newDiv")
         
          txtLabel = document.createTextNode("Please sign your initials: ")
          txtbox = document.createElement("INPUT")
          txtbox.setAttribute("TYPE", "TEXTBOX")
          txtbox.setAttribute("NAME", "signBox")
         
          div.appendChild(txtLabel)
          div.appendChild(txtbox)
         
          document.getElementById("cSignature").appendChild(div)

     } else {
          alert(document.getElementById("cSignature").innerHTML)
          if(document.getElementById("newDiv")) {  // < Does NOT EXIST
               document.getElementById("cSignature").removeChild(document.getElementById("newDiv"))
          }
     }
 
 }

in asp what we is Request("signBox") and its suppose to show the value of this textbox, i am doing a trick to update the value with a hidden field and then submit the form. do you guys have any other better suggestions?

Thanks in advance.
0
Comment
Question by:Saqib Khan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 6
  • 4
19 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 17169547
Because the attribute is "id", not "ID"

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17169554
Also you want type=text not type=textbox. Such type does not exist.
 txtbox.setAttribute("type", "TEXT");



0
 
LVL 23

Author Comment

by:Saqib Khan
ID: 17169701
Thanks Zvonko, i fixed the ID problem already, but now why this this not working, after i fixed the textbox, i can not alert the value of it.

 function signIt(obj) {

 
      if(obj.checked && obj.value=="agree_terms"  ) {
            var div, txtLabel, txtbox
            
            div = document.createElement("DIV")
            div.setAttribute("id", "newdiv")
            
            txtLabel = document.createTextNode("Please sign your initials: ")
            txtbox = document.createElement("INPUT")
            txtbox.setAttribute("type", "TEXT")
            txtbox.setAttribute("name", "signBox")
            txtbox.setAttribute("size", 15)
            txtbox.className =  "signcls"
            
            div.appendChild(txtLabel)
            div.appendChild(txtbox)
            
            if(!isCreated) {
                  document.getElementById("cSignature").appendChild(div)
                  isCreated = true
            }
      alert(document.StandardCheck.signBox.value)  // <  HERE............
      } else {
            
            if(document.getElementById("newdiv")) {
                  document.getElementById("cSignature").removeChild(document.getElementById("newdiv"))
                  isCreated = false
            }
      }
 
 }

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 23

Author Comment

by:Saqib Khan
ID: 17169786
i am using the following now..

 function signIt(obj) {

 
      if(obj.checked && obj.value=="agree_terms"  ) {
            var div, txtLabel, txtbox
            
            div = document.createElement("DIV")
            div.setAttribute("id", "newdiv")
            
            txtLabel = document.createTextNode("Please sign your initials: ")
            txtbox = document.createElement("INPUT")
            txtbox.setAttribute("TYPE", "TEXT")
            txtbox.setAttribute("NAME", "signBox")
            txtbox.setAttribute("size", "15")
            txtbox.className =  "signcls"
            
            div.appendChild(txtLabel)
            div.appendChild(txtbox)
            
            if(!isCreated) {
                  document.getElementById("cSignature").appendChild(div)
                  isCreated = true
            }
      
      } else {
            alert(document.getElementById("cSignature").innerHTML)
            alert(document.StandardCheck.signBox.value)
            if(document.getElementById("newdiv")) {
                  document.getElementById("cSignature").removeChild(document.getElementById("newdiv"))
                  isCreated = false
            }
      }
 
 }


Alert shows textbox with the name and value pairs fine, but the second alert in else statement does not show textbox value, is that because form is been generated outside of the function,?

And its so confusing, when to use lowser case and when to use upper case when it comes to setAttributes.

Thanks
0
 
LVL 29

Assisted Solution

by:Pravin Asar
Pravin Asar earned 1400 total points
ID: 17170744
To create a TextField , look at
Use lower case attribute names.


function CreateFormTextField (name, defValue) {
   var formFld   = document.createElement ("input");
   formFld.setAttribute ('type', 'text');
   formFld.setAttribute ('id', name);
   formFld.value = defValue;
   formFld.name  = name;
   return formFld;
}
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 17170865
See if works for you...

<html>
<body>
<script language="javascript">
function signIt(obj) {

 
     if(obj.checked && obj.value=="agree_terms"  ) {
          var div, txtLabel, txtbox
         
          div = document.createElement("DIV")
          div.setAttribute("id", "newdiv")
         
          txtLabel = document.createTextNode("Please sign your initials: ")
          txtbox = document.createElement("input")
          txtbox.setAttribute("type", "text")
          txtbox.setAttribute("name", "signBox")
          txtbox.setAttribute("size", "15")
          txtbox.className =  "signcls";

          txtbox.value ="I agree";
         
          div.appendChild(txtLabel)
          div.appendChild(txtbox)
             isCreated = false;    
          if(!isCreated) {
               document.getElementById("cSignature").appendChild(div)
               isCreated = true;
          }
     
     } else {
          alert(document.getElementById("cSignature").innerHTML)
          alert(document.StandardCheck.signBox.value)
          if(document.getElementById("newdiv")) {
               document.getElementById("cSignature").removeChild(document.getElementById("newdiv"))
               isCreated = false
          }
     }
 
 }
</script>
<form name="StandardCheck">
<input type="checkbox" value="agree_terms" onclick="signIt(this);">Terms of Agreement
<div id="cSignature"></div>
</form>
<body>
</html>
0
 
LVL 23

Author Comment

by:Saqib Khan
ID: 17171756
excellence of Excuation @ pravinasar

Yes it worked, now please tell me WHY it does not like setAttribute to specifiy the "name" attribute, when i changed it to txtbox.name = "bluh", it worked. why whats the difference, is that a bug?

and can i reference that new generated field into another function that i am using for onSubmit event? because its giving me error.

function checkme() {

alert(document.StandardCheck.mysignature.value)  // < ERROR

  if (document.StandardCheck.agree[1].checked)  {
    alert("You must read and agree to the Terms and Conditions. Please select the “I AGREE to the Terms and Conditions of Sale” option on the check out page.")
      return false;
  }  else return true;
 
}
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 17171857
>> alert(document.StandardCheck.mysignature.value)

I am assuming the field you created is mysignature

Also check the field agree .

Is it checkbox ? How many checkboxes with this name ?

If only one checkbox field , then following should work.
Also you have string build error quote in a quote.

if (document.StandardCheck.agree.checked) {
      msg="You must read and agree to the Terms and Conditions.\n";
     msg += "Please select the  \“I AGREE to the Terms and Conditions of Sale\” option on the check out page.\n";
      alert(msg);
     return false;
}
0
 
LVL 23

Author Comment

by:Saqib Khan
ID: 17171941
i am using two radio options, here is the full function...

  var isCreated;
  isCreated = false
 
 function signIt(obj) {

 
      if(obj.checked && obj.value=="agree_terms"  ) {
            var div, txtLabel, txtbox
            
            div = document.createElement("DIV")
            div.setAttribute("id", "newdiv")
            
            txtLabel = document.createTextNode("Please initialize: ")
            txtbox = document.createElement("INPUT")
            txtbox.setAttribute("type", "TEXT")
            txtbox.setAttribute("size", "15")
            txtbox.name = "mysignature"
            txtbox.className =  "signcls"
            
            div.appendChild(txtLabel)
            div.appendChild(txtbox)
            
            if(!isCreated) {
                  document.getElementById("cSignature").appendChild(div)
                  isCreated = true
            }
      
      } else {

            if(document.getElementById("newdiv")) {
                  document.getElementById("cSignature").removeChild(document.getElementById("newdiv"))
                  document.StandardCheck.mysignature.value = ""  \\ < ERROR HERE **********
                  isCreated = false
            }
            
      }
 
 }


i am almost there, i am sure with your great help i can do this:)
0
 
LVL 23

Author Comment

by:Saqib Khan
ID: 17171994
another Interesting thing...

i am trying to do a alert on the INNER html of main DIV and if i change TYPE to type it does not show the type attribute in the dynmaicly generated HTML the name attribute does not even exist, but its funny in ASP i can grab the vale of this newly generated textbox.

Thanks
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 17172041
document.getElementById("cSignature").removeChild(document.getElementById("newdiv"))

will remove the element div and it children, hence a error.

The default form input element type is text. .. so it is okay.


try this ...

<form>
<input name="abc" value="xyz">
</form>
0
 
LVL 23

Author Comment

by:Saqib Khan
ID: 17172097
I am sorry, in bove line Error line was suppose to appear before the removeChildm it was just a typo.

please look below, how simple is that but still it assumes field is never created..

 function signIt(obj) {

 
      if(obj.checked && obj.value=="agree_terms"  ) {
            var div, txtLabel, txtbox
            
            div = document.createElement("DIV")
            div.setAttribute("id", "newdiv")
            
            txtLabel = document.createTextNode("Please initialize: ")
            txtbox = document.createElement("input")
            txtbox.type= "text"
            txtbox.size =  "15"
            txtbox.className =  "signcls"
            txtbox.name = "mysignature"
            
            div.appendChild(txtLabel)
            div.appendChild(txtbox)            
            
            if(!isCreated) {
                  document.getElementById("cSignature").appendChild(div)
                  isCreated = true
            }
            
            if(document.getElementById("newdiv")) {
                  if(document.StandardCheck.mysignature) {
                        alert("YES")
            } else {
                        alert("GRRRRRRRRR")
            }

      }
0
 
LVL 23

Author Comment

by:Saqib Khan
ID: 17172104
it always returns "GRRRRRRR". i know i am missing "}" for closing function above:)
0
 
LVL 23

Author Comment

by:Saqib Khan
ID: 17172139
i gueess, i am too tired, been posting wrong code.

here is the correct function with problem (always throw NO in alert).

 function signIt(obj) {

 
      if(obj.checked && obj.value=="agree_terms"  ) {
            var div, txtLabel, txtbox
            
            div = document.createElement("DIV")
            div.setAttribute("id", "newdiv")
            
            txtLabel = document.createTextNode("Please initialize: ")
            txtbox = document.createElement("input")
            txtbox.type= "text"
            txtbox.size =  "15"
            txtbox.className =  "signcls"
            txtbox.name = "mysignature"
            
            div.appendChild(txtLabel)
            div.appendChild(txtbox)            
            
            if(!isCreated) {
                  document.getElementById("cSignature").appendChild(div)
                  isCreated = true
            }
            
            if(document.StandardCheck.mysignature) {
                  alert("YES")
            } else {
                  alert("NO")
            }

      } else {
            
            if(document.getElementById("newdiv")) {
                  document.StandardCheck.mysignature.value = ""
                  document.getElementById("cSignature").removeChild(document.getElementById("newdiv"))                  
                  isCreated = false
            }
            
      }
 
 }
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 17172167
Based on your previous post, here is corrected code.

<html>
<body>
<script language="javascript">
isCreated = false;
function signIt(obj)
{

     if(obj.checked && obj.value=="agree_terms"  ) {
          var div, txtLabel, txtbox
         
          div = document.createElement("DIV")
          div.setAttribute("id", "newdiv")
         
          txtLabel = document.createTextNode("Please initialize: ")
          txtbox = document.createElement("input")
          txtbox.type= "text"
          txtbox.size =  "15"
          txtbox.className =  "signcls"
          txtbox.name = "mysignature"
         
          div.appendChild(txtLabel)
          div.appendChild(txtbox)          
         
          if(!isCreated) {
               document.getElementById("cSignature").appendChild(div)
               isCreated = true
          }
         
          if(document.getElementById("newdiv")) {
               if(document.StandardCheck.mysignature) {
                    alert("YES");
                   }
               else {
                    alert("GRRRRRRRRR");
               }
            }
      }
}

</script>
<form name="StandardCheck">
<input type="checkbox" value="agree_terms" onclick="signIt(this);">Terms of Agreement
<div id="cSignature"></div>
</form>
<body>
</html>
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 17172173
I saw your post at Date: 07/24/2006 06:41PM EDT

This one looks okay to me.

Good Bye.

0
 
LVL 63

Accepted Solution

by:
Zvonko earned 600 total points
ID: 17172187
My I add a small note: that dynamic scripting in the background is error prone and unnecessary.
Create the html element in html source and set them to disabled=true in html code. Then are those disabled form elements also not transmitted at form submit time. Additionally you can make them invisible or display=none until the checkbox for signature is clicked.
0
 
LVL 23

Author Comment

by:Saqib Khan
ID: 17177942
I think Zvonko is right, no matter what i do it works with one browser and then stops working with another. i added a onkeyup function to it and updating a the value of a hidden field with the newly created element (in order to make it cross-browser).
but sometimes we do need this feature like Adding new Table Rows, Multiple Form fields for file upload, simply display/hide will not work in that case because they count on user input.

Thanks Zvonko and pravinasar
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17177969
You are welcome.
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 demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one 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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

618 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