Member Avatar for PhilEaton

Hey, I'm trying to make a way for the user to click a link in an email agent and the submit button (previously hidden by css) and it then becomes unhidden.

function showSubmit() {
                var submit = document.getElementsByName("submit");
                if (submit.style.display=="none"){
                    submit.style.display="inline";
                }
            }

Then the html:

Click <a href="#" onclick="showSubmit()">here</a> to display submit button.
        <form action="mailscript.php" method="post" class="mailbox">
            <table class="mailbox">
            <tr><td>Email To:</td><td><input type="text" name="emailto" /></td></tr>
            <br />
            <tr><td>Subject:</td><td><input type="text" name="subject" /></td></tr>
            <br />
            <tr><td>Message:</td><td><input type="text" name="body" class="body"/></td></tr>
            </table>
            <br />
            <input type="submit" value="Send Email" class="submit" name="submit"/>
        </form>

And the CSS:

.submit {
    visibility: hidden;
}

Thanks! This code I have does nothing, the submit button doesn't show up, nothing happens.

  • 2 Contributors
  • 4 Replies
  • 128 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by PhilEaton
Member Avatar for hielo

it should be: var submit = document.getElementsByName("submit")[0]; getElementsByName() returns a collection/array, NOT a single element. My suggestion would be to give your button an id="submitButton" and then use this instead:

var submit = document.getElementById("submitButton");

since IDs are supposed to be unique throughout the page, then you don't need that suffix [X] because document.getElementById returns a single element, not a collection/array.

Edited by hielo because: typo
Member Avatar for PhilEaton

That still is not doing what it should. Now, the submit button shows up, but even before the user calls the function.

Member Avatar for hielo

a. your javascript code is checking the display property, but your css uses the visibility property.

b. If your css initially has a STYLE block/tag with #submitButton{display:none} (or declared on an exteral stylesheet), then doing alert( document.getElementById('submitButton').style.display ) will reveal that the alerted value will NOT be "none" as declared in the css STYLE tag/external stylesheet. The "XXX.style.display" would show "none" only if you declared it on the tag using the style attribute - ex:

<input style="display:none" />

I suggest you try the following:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>	   
#submitButton {
    display:none;
}
</style>
<script>
function showSubmit(){
                var s = document.getElementById("submitButton");
                if (s.style.display!="inline"){
                    s.style.display="inline";
                }
            }
</script>
</head>
<body>
		  
Click <a href="#" onclick="showSubmit()">here</a> to display submit button.
        <form action="mailscript.php" method="post" class="mailbox">
            <table class="mailbox">
            <tr><td>Email To:</td><td><input type="text" name="emailto" /></td></tr>
            <br />
            <tr><td>Subject:</td><td><input type="text" name="subject" /></td></tr>
            <br />
            <tr><td>Message:</td><td><input type="text" name="body" class="body"/></td></tr>
            </table>
            <br />
            <input id="submitButton" type="submit" value="Send Email" class="submit" name="submit"/>
        </form>		  
	   

</body>
</html>
Member Avatar for PhilEaton

Thanks very much that works awesome!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.