asked on

execute script based on HTML event

I have a HTML contact form including an input type "file" to add a attachment to the email which can be send by clicking on the submit button. It is rather standard functionality, i think.

	<form enctype="multipart/form-data" method="POST" action="php/send_mail.php" class="message">
		<label>Name<input type="text" name="sender_name" /> </label>
		<label>Email address</label>
		<input type="email" name="sender_email" /> 
		<label>Subject <input type="text" name="subject" /> </label>
		<label>Message <textarea name="message"></textarea> </label>
		<label>Attachment<input type="file" name="my_file" id="file_name" onchange="toggleVisibility()"></label>
		<a href="#" onClick="clearfilename();" id="remove">clear</a>
		<br>
		<label><input class="more" type="submit" name="button" value="Submit"/></label>
	</form>

Open in new window

The toggleVisibilty script is in <head>

<script type="text/javascript">
	function toggleVisibility() {
	if document.getElementById("file_name").value = "" {
		document.getElementById("remove").style.display = "none";
		}
		else {
		document.getElementById("remove").style.display = "";
		}
	}
</script>

Open in new window

By the code in the style sheet, the [<a href="#" onClick="clearfilename();" id="remove">clear</a>] will not be displayed:

#remove {
	display: none;
}

Open in new window

I'm newbie in the HTML world but with a bit help I can manage.

What do I try to accomplish?
I wishes that the text "clear" from id=remove is not shown only when a "file_name" has been selected.

What does it do now:
The text "clear" is not showed. Not at start-up (which is okay) and not after selecting a file (which is not okay)

What have I tried sofar?
I have tried to use other HTML events (oninput, onfocus);
I have tried to do this with the visibility attribute;
I have tried it without the if condition in the script.
I have tried another the position (on the page) of the id="remove" changes things.
I have tried in FF to use the debug mode, but that gave me no information. Maybe I did not use the tool the right way.

So I have the following questions:
1. is a event the correct action to trigger the script (when does the event fires)?
2. if so, which event is appropriate to use?
3. is the script itself the problem?
4. if none of the above...what do I have to do to realize my goals????

many thanks upfront for helping me out here.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

CroetOne

ASKER

Hi Julian,

ThX for your extensive answer! I have changed the script as you suggested and tested it using an [<a> onclick event]. It works indeed. I needed the onclick event because the onchange event in the [input type=file] didn't fire.
I would like to try the Javascript snippet you suggested, but I fail to understand where and how I can implement that in the page/form. Can you please provide some additional info to set me on track?

Kind regards,
John

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

CroetOne

ASKER

Hi Julian,

ThX again for your extensive answer! It works like a charm!

Regards,
John

CroetOne

ASKER

Solution is thoroughly explained in a tutorial manner!

Julian Hansen

You are welcome.