0

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
5
Views
7 Years
Discussion Span
Last Post by PhilEaton
0

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: typo

0

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

0

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>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.