Saqib Khan
asked on
CreateElement Problem
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("DI V")
div.setAttribute("id", "newDiv")
txtLabel = document.createTextNode("P lease sign your initials: ")
txtbox = document.createElement("IN PUT")
txtbox.setAttribute("TYPE" , "TEXTBOX")
txtbox.setAttribute("NAME" , "signBox")
div.appendChild(txtLabel)
div.appendChild(txtbox)
document.getElementById("c Signature" ).appendCh ild(div)
} else {
alert(document.getElementB yId("cSign ature").in nerHTML)
if(document.getElementById ("newDiv") ) { // < Does NOT EXIST
document.getElementById("c Signature" ).removeCh ild(docume nt.getElem entById("n ewDiv"))
}
}
}
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.
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("DI
div.setAttribute("id", "newDiv")
txtLabel = document.createTextNode("P
txtbox = document.createElement("IN
txtbox.setAttribute("TYPE"
txtbox.setAttribute("NAME"
div.appendChild(txtLabel)
div.appendChild(txtbox)
document.getElementById("c
} else {
alert(document.getElementB
if(document.getElementById
document.getElementById("c
}
}
}
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.
Because the attribute is "id", not "ID"
Also you want type=text not type=textbox. Such type does not exist.
txtbox.setAttribute("type" , "TEXT");
txtbox.setAttribute("type"
ASKER
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("DI V")
div.setAttribute("id", "newdiv")
txtLabel = document.createTextNode("P lease sign your initials: ")
txtbox = document.createElement("IN PUT")
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("c Signature" ).appendCh ild(div)
isCreated = true
}
alert(document.StandardChe ck.signBox .value) // < HERE............
} else {
if(document.getElementById ("newdiv") ) {
document.getElementById("c Signature" ).removeCh ild(docume nt.getElem entById("n ewdiv"))
isCreated = false
}
}
}
function signIt(obj) {
if(obj.checked && obj.value=="agree_terms" ) {
var div, txtLabel, txtbox
div = document.createElement("DI
div.setAttribute("id", "newdiv")
txtLabel = document.createTextNode("P
txtbox = document.createElement("IN
txtbox.setAttribute("type"
txtbox.setAttribute("name"
txtbox.setAttribute("size"
txtbox.className = "signcls"
div.appendChild(txtLabel)
div.appendChild(txtbox)
if(!isCreated) {
document.getElementById("c
isCreated = true
}
alert(document.StandardChe
} else {
if(document.getElementById
document.getElementById("c
isCreated = false
}
}
}
ASKER
i am using the following now..
function signIt(obj) {
if(obj.checked && obj.value=="agree_terms" ) {
var div, txtLabel, txtbox
div = document.createElement("DI V")
div.setAttribute("id", "newdiv")
txtLabel = document.createTextNode("P lease sign your initials: ")
txtbox = document.createElement("IN PUT")
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("c Signature" ).appendCh ild(div)
isCreated = true
}
} else {
alert(document.getElementB yId("cSign ature").in nerHTML)
alert(document.StandardChe ck.signBox .value)
if(document.getElementById ("newdiv") ) {
document.getElementById("c Signature" ).removeCh ild(docume nt.getElem entById("n ewdiv"))
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
function signIt(obj) {
if(obj.checked && obj.value=="agree_terms" ) {
var div, txtLabel, txtbox
div = document.createElement("DI
div.setAttribute("id", "newdiv")
txtLabel = document.createTextNode("P
txtbox = document.createElement("IN
txtbox.setAttribute("TYPE"
txtbox.setAttribute("NAME"
txtbox.setAttribute("size"
txtbox.className = "signcls"
div.appendChild(txtLabel)
div.appendChild(txtbox)
if(!isCreated) {
document.getElementById("c
isCreated = true
}
} else {
alert(document.getElementB
alert(document.StandardChe
if(document.getElementById
document.getElementById("c
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
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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("DI V")
div.setAttribute("id", "newdiv")
txtLabel = document.createTextNode("P lease sign your initials: ")
txtbox = document.createElement("in put")
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("c Signature" ).appendCh ild(div)
isCreated = true;
}
} else {
alert(document.getElementB yId("cSign ature").in nerHTML)
alert(document.StandardChe ck.signBox .value)
if(document.getElementById ("newdiv") ) {
document.getElementById("c Signature" ).removeCh ild(docume nt.getElem entById("n ewdiv"))
isCreated = false
}
}
}
</script>
<form name="StandardCheck">
<input type="checkbox" value="agree_terms" onclick="signIt(this);">Te rms of Agreement
<div id="cSignature"></div>
</form>
<body>
</html>
<html>
<body>
<script language="javascript">
function signIt(obj) {
if(obj.checked && obj.value=="agree_terms" ) {
var div, txtLabel, txtbox
div = document.createElement("DI
div.setAttribute("id", "newdiv")
txtLabel = document.createTextNode("P
txtbox = document.createElement("in
txtbox.setAttribute("type"
txtbox.setAttribute("name"
txtbox.setAttribute("size"
txtbox.className = "signcls";
txtbox.value ="I agree";
div.appendChild(txtLabel)
div.appendChild(txtbox)
isCreated = false;
if(!isCreated) {
document.getElementById("c
isCreated = true;
}
} else {
alert(document.getElementB
alert(document.StandardChe
if(document.getElementById
document.getElementById("c
isCreated = false
}
}
}
</script>
<form name="StandardCheck">
<input type="checkbox" value="agree_terms" onclick="signIt(this);">Te
<div id="cSignature"></div>
</form>
<body>
</html>
ASKER
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.StandardChe ck.mysigna ture.value ) // < ERROR
if (document.StandardCheck.ag ree[1].che cked) {
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;
}
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.StandardChe
if (document.StandardCheck.ag
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;
}
>> alert(document.StandardChe ck.mysigna ture.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.ag ree.checke d) {
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;
}
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.ag
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;
}
ASKER
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("DI V")
div.setAttribute("id", "newdiv")
txtLabel = document.createTextNode("P lease initialize: ")
txtbox = document.createElement("IN PUT")
txtbox.setAttribute("type" , "TEXT")
txtbox.setAttribute("size" , "15")
txtbox.name = "mysignature"
txtbox.className = "signcls"
div.appendChild(txtLabel)
div.appendChild(txtbox)
if(!isCreated) {
document.getElementById("c Signature" ).appendCh ild(div)
isCreated = true
}
} else {
if(document.getElementById ("newdiv") ) {
document.getElementById("c Signature" ).removeCh ild(docume nt.getElem entById("n ewdiv"))
document.StandardCheck.mys ignature.v alue = "" \\ < ERROR HERE **********
isCreated = false
}
}
}
i am almost there, i am sure with your great help i can do this:)
var isCreated;
isCreated = false
function signIt(obj) {
if(obj.checked && obj.value=="agree_terms" ) {
var div, txtLabel, txtbox
div = document.createElement("DI
div.setAttribute("id", "newdiv")
txtLabel = document.createTextNode("P
txtbox = document.createElement("IN
txtbox.setAttribute("type"
txtbox.setAttribute("size"
txtbox.name = "mysignature"
txtbox.className = "signcls"
div.appendChild(txtLabel)
div.appendChild(txtbox)
if(!isCreated) {
document.getElementById("c
isCreated = true
}
} else {
if(document.getElementById
document.getElementById("c
document.StandardCheck.mys
isCreated = false
}
}
}
i am almost there, i am sure with your great help i can do this:)
ASKER
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
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
document.getElementById("c Signature" ).removeCh ild(docume nt.getElem entById("n ewdiv"))
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>
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>
ASKER
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("DI V")
div.setAttribute("id", "newdiv")
txtLabel = document.createTextNode("P lease initialize: ")
txtbox = document.createElement("in put")
txtbox.type= "text"
txtbox.size = "15"
txtbox.className = "signcls"
txtbox.name = "mysignature"
div.appendChild(txtLabel)
div.appendChild(txtbox)
if(!isCreated) {
document.getElementById("c Signature" ).appendCh ild(div)
isCreated = true
}
if(document.getElementById ("newdiv") ) {
if(document.StandardCheck. mysignatur e) {
alert("YES")
} else {
alert("GRRRRRRRRR")
}
}
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("DI
div.setAttribute("id", "newdiv")
txtLabel = document.createTextNode("P
txtbox = document.createElement("in
txtbox.type= "text"
txtbox.size = "15"
txtbox.className = "signcls"
txtbox.name = "mysignature"
div.appendChild(txtLabel)
div.appendChild(txtbox)
if(!isCreated) {
document.getElementById("c
isCreated = true
}
if(document.getElementById
if(document.StandardCheck.
alert("YES")
} else {
alert("GRRRRRRRRR")
}
}
ASKER
it always returns "GRRRRRRR". i know i am missing "}" for closing function above:)
ASKER
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("DI V")
div.setAttribute("id", "newdiv")
txtLabel = document.createTextNode("P lease initialize: ")
txtbox = document.createElement("in put")
txtbox.type= "text"
txtbox.size = "15"
txtbox.className = "signcls"
txtbox.name = "mysignature"
div.appendChild(txtLabel)
div.appendChild(txtbox)
if(!isCreated) {
document.getElementById("c Signature" ).appendCh ild(div)
isCreated = true
}
if(document.StandardCheck. mysignatur e) {
alert("YES")
} else {
alert("NO")
}
} else {
if(document.getElementById ("newdiv") ) {
document.StandardCheck.mys ignature.v alue = ""
document.getElementById("c Signature" ).removeCh ild(docume nt.getElem entById("n ewdiv"))
isCreated = false
}
}
}
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("DI
div.setAttribute("id", "newdiv")
txtLabel = document.createTextNode("P
txtbox = document.createElement("in
txtbox.type= "text"
txtbox.size = "15"
txtbox.className = "signcls"
txtbox.name = "mysignature"
div.appendChild(txtLabel)
div.appendChild(txtbox)
if(!isCreated) {
document.getElementById("c
isCreated = true
}
if(document.StandardCheck.
alert("YES")
} else {
alert("NO")
}
} else {
if(document.getElementById
document.StandardCheck.mys
document.getElementById("c
isCreated = false
}
}
}
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("DI V")
div.setAttribute("id", "newdiv")
txtLabel = document.createTextNode("P lease initialize: ")
txtbox = document.createElement("in put")
txtbox.type= "text"
txtbox.size = "15"
txtbox.className = "signcls"
txtbox.name = "mysignature"
div.appendChild(txtLabel)
div.appendChild(txtbox)
if(!isCreated) {
document.getElementById("c Signature" ).appendCh ild(div)
isCreated = true
}
if(document.getElementById ("newdiv") ) {
if(document.StandardCheck. mysignatur e) {
alert("YES");
}
else {
alert("GRRRRRRRRR");
}
}
}
}
</script>
<form name="StandardCheck">
<input type="checkbox" value="agree_terms" onclick="signIt(this);">Te rms of Agreement
<div id="cSignature"></div>
</form>
<body>
</html>
<html>
<body>
<script language="javascript">
isCreated = false;
function signIt(obj)
{
if(obj.checked && obj.value=="agree_terms" ) {
var div, txtLabel, txtbox
div = document.createElement("DI
div.setAttribute("id", "newdiv")
txtLabel = document.createTextNode("P
txtbox = document.createElement("in
txtbox.type= "text"
txtbox.size = "15"
txtbox.className = "signcls"
txtbox.name = "mysignature"
div.appendChild(txtLabel)
div.appendChild(txtbox)
if(!isCreated) {
document.getElementById("c
isCreated = true
}
if(document.getElementById
if(document.StandardCheck.
alert("YES");
}
else {
alert("GRRRRRRRRR");
}
}
}
}
</script>
<form name="StandardCheck">
<input type="checkbox" value="agree_terms" onclick="signIt(this);">Te
<div id="cSignature"></div>
</form>
<body>
</html>
I saw your post at Date: 07/24/2006 06:41PM EDT
This one looks okay to me.
Good Bye.
This one looks okay to me.
Good Bye.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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
You are welcome.