I am trying to edit my form with these simple
testings:
<span id="a">30 <span id="aa" style="display:none;"><input type="text" id="aa" name="q"/></span></span>
<span id="cq"><a href="javascript:changeQty()">Change</a></span>
<span id="cq2" style="display:none"><a href="javascript:save()">save</a></span>
<script>
function changeQty(){
document.getElementById("a").style.display="hidden";
document.getElementById("aa").style.display="inline";
document.getElementById("cq").style.display="hidden";
document.getElementById("cq2").style.display="inline";
}
</script>
But strangely,my attempt to hide the fields are not working. But I can view the hidden fields when I click on Change
link. Whats wrong I am doing ?
There is no hidden
attribute for display
, you need to use none
.
function changeQty(){
document.getElementById("a").style.display="none";
document.getElementById("aa").style.display="inline";
document.getElementById("cq").style.display="none";
document.getElementById("cq2").style.display="inline";
}
You have done two very simple mistake
At javascript use vale "none" for display style attribute for hidden a element
The element "aa" is the child element of element "a". so when you use
document.getElementById("a").style.display="none"; also hides the element "aa"
so the final solution you may desire is as follows
<span id="a">30</span>
<span id="aa" style="display:none;"><input type="text" id="aa" name="q"/></span>
<span id="cq"><a href="javascript:changeQty()">Change</a></span>
<span id="cq2" style="display:none"><a href="javascript:save()">save</a></span>
<script>
function changeQty() {
document.getElementById("a").style.display="none";
document.getElementById("aa").style.display="inline";
document.getElementById("cq").style.display="none";
document.getElementById("cq2").style.display="inline";
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.