CroetOne
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.
The toggleVisibilty script is in <head>
By the code in the style sheet, the [<a href="#" onClick="clearfilename();" id="remove">clear</a>] will not be displayed:
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.
<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>
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>
By the code in the style sheet, the [<a href="#" onClick="clearfilename();"
#remove {
display: none;
}
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi Julian,
ThX again for your extensive answer! It works like a charm!
Regards,
John
ThX again for your extensive answer! It works like a charm!
Regards,
John
ASKER
Solution is thoroughly explained in a tutorial manner!
You are welcome.
ASKER
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