• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

_Ditto_'s Scripting again, RUN! [forms]

Diz

Diz

Overdosing on placebos
It shouldn't be as hard as a style switcher, since it's just a form.

I have two different things I'm wanting to do with this. I'll explain after you see the form.

<form action="mailto:dittosdocks@gmail.com" method="post" name="Request">
Name:<br />
<input type="text" value="Name" name="name" /><br />
E-mail:<br />
<input type="text" value="Email" name="email" /><br /><br />
What would you like?<br />
<input type="checkbox" name="graphics" value="avatar" />Avatar<br />
<input type="checkbox" name="graphics" value="banner" />Banner<br />
<input type="checkbox" name="graphics" value="signature" />Signature<br /><br />

Avatar:[ignore if you are getting something else]<br />
<input type="radio" name="asize" value="alarge" /> 100 x 100<br />
<input type="radio" name="asize" value="asmall" /> 50 x 50<br />
<input type="radio" name="asize" value="acustom" />Enter custom size:<br />
<div style="text-indent: 50px;"><input type="text" name="acustomsize" value="Width x Hight" /></div><br /><br />

Banner:[ignore if you are getting something else]<br />
<input type="radio" name="bsize" value="blarge" />Banner Large Size<br />
<input type="radio" name="bsize" value="bsmall" />Banner Small Size<br />
<input type="radio" name="bsize" value="bcustom" />Enter custom Size:<br />
<div style="text-indent: 50px;"><input type="text" name="bcustomsize" value="Width x Hight" /></div><br /><br />

Signature:[ignore if you are getting something else]<br />
<input type="radio" name="ssize" value="slarge" />Signature Large Size<br />
<input type="radio" name="ssize" value="ssmall" />Signature Small Size<br />
<input type="radio" name="ssize" value="scustom" />Enter custom Size:<br />
<div style="text-indent: 50px;"><input type="text" name="scustomsize" value="Width x Hight" /></div><br /><br />

Colors:[up to three]<br />
<input type="text" name="color" value="#XXXXXX" /><br />
<input type="text" name="color" value="#XXXXXX" /><br />
<input type="text" name="color" value="#XXXXXX" /><br /><br />

Image:[optional]<br />
<input type="textarea" name="image" value="Image URL" /><br /><br />

<input type="submit" value="Submit" /><input type="reset" value="Reset" />

</form>

Number one is the most important. Currently, I'm using the mailto attribute. This would be fine for a simple contact form, but my form is a big request form. And the mailto attribute creates some very ugly e-mails, also, it requires the use of the default e-mail provider on the system. This might not seem to be a problem, but it is. I used to use Hotmail, and a program like Outlook Express couldn't get e-mails from Hotmail. So when I would submit a form, it would pull that up, but I couldn't send that. So I would like help with a form handler, so that the server sends the e-mails its self, not bothering the visitor.

And my second problem isn't hardly much of a problem, just that I'm not sure about some of the rules involved with Javascript. You can see that I have told people to ignore some of the parts of the form, if they aren't requesting a graphic of that type. I would prefer if the visitor didn't even see those parts at all. For example, when the page is loaded, all you see is the Name, E-mail, What would you like, colors, image, and reset/submit parts. Then, when, say, Signature, is chosen, it's respective section of the form would appear. Is it possible to do that, and how?
 
Last edited:
What... do you plan to write this all in? Sounds like you'll be wanting at least a little Javascript to implement the appearance of further form options after one of the boxes is checked, but other than that, it would change based on what language/method you were going to use to implement this...

Besides that, I don't actually feel like I know what you're asking. Are you asking how to make a form that looks like this? If so, a quick look at any HTML reference that talks about forms and their associated objects should give you all the help you'll need. Are you saying you need help getting this form to work? If so, you're going to need to be more specific about what sort of other systems it's interacting with; how you're storing the information collected here and sending it out to other parts of the site.

I also don't get what you mean when you say that you want your e-mail to be "readable." Do you mean that you want the url that appears when you hit "submit" to just be something like &email="dittosdocks@gmail.com"? If so, it's not happening--the @ symbol is a special character and has to be replaced with that code in order for it to be interpreted correctly. So far as I know, anyway.

And finally, what "subject" do you want pre-set? Do you mean you want one particular radio button to appear as selected from the get-go and for some fields to have default text? Again, a good HTML tutorial will show you how to do that no problem; it's simple. I guess I don't really know what you're talking about here.

If you could be more clear and specific about what it is you want to do, and how you would like people here to help you, that would be great. As is, I don't really know where to start. Alternatively, I'm just being dense because it's early in the morning and I didn't read the post properly or something.
 
No, you're right, I didn't say what I wanted very clearly.

I don't know how to use javasrcript and HTML together to make those parts of the form to appear and vanish when their boxes are checked.

Right now, all that happens when you hit the submit button is this:
your computer opens you e-mail program, and has my e-mail address put in it, and then then information you inputed in the form. However, it looks horrible, and doesn't have a subject.
 
It looks horrible because that's the raw output. You need to use some sort of script to read the output and generate something a little more user friendly. How depends on which language you're using.
 
Ok. Heres what I have so far:

Code: 
<form name="request" action='mailto:dittosdocks@gmail.com' method='post'>
Name:<br />
<input type="text" value="Name" name="name" /><br />
E-mail:<br />
<input type="text" value="Email" name="email" /><br /><br />
What would you like?<br />
<input type="checkbox" name="graphics" value="avatar" />Avatar<br />
<input type="checkbox" name="graphics" value="banner" />Banner<br />
<input type="checkbox" name="graphics" value="signature" />Signature<br /><br />

Avatar:<br />
<input type="radio" name="size" value="large" /> 100 x 100<br />
<input type="radio" name="size" value="small" /> 50 x 50<br />
<input type="radio" name="size" value="custom" />Enter custom size:<br />
<input type="text" name="size" value="Width x Hight" style="text-indent:50px;" />

<input type="submit" value="Submit" /><input type="reset" value="Reset" />

</form>
 
You won't be using the mailto action if you want the form to send a readable e-mail. Since you've been having troubles with PHP before, I assume you'll want to use that. PHP has the mail() function, which can make the server send an e-mail to you containing whatever you like; in this case you'll want it to send you the form information, and thus you'll have to make a PHP script that processes the form. You do this by putting the filename of the script (e.g. mailform.php) in the action attribute of the form.

(Does it actually work to have a text field with the same name as a set of radio buttons? I wouldn't think so, so in the example I've used another name for the custom size field. Also, are you sure you want people to be able to request multiple things at the same time? It makes things more of a headache and is kind of annoying when the two requests are in principle unrelated and they could as well submit the form twice, especially when the form for all three is essentially the same. If you really want it this way, I can give you another example.)

Then you'd just do something like...

PHP: 
<?php
$message = 'Name: ' . $_POST['name'] . '\nE-mail: ' . $_POST['email'] . '\nRequest: ' . $_POST['graphics'] . '\nSize: ' . $_POST['size'];

if ($_POST['size'] == 'custom') {
      $message .= ' (' . $_POST['customsize'] . ')';
}

$message .= '\nWords: ' . $_POST['words'] . '\nImages: ' . $_POST['images'] . '\nColors: ' . $_POST['colors'];

mail('dittosdocks@gmail.com', 'Request', $messages, 'From: ' . $_POST['email']);
?>

This way, by the way, you won't actually need to have a Javascript that changes the whole form depending on what is selected - at most you can wrap the default sizes in a couple of spans and make them change depending on what is selected:

HTML: 
...
<input type="radio" name="size" value="large" /> <span id="largesize">100 x 100</span><br />
<input type="radio" name="size" value="small" /> <span id="smallsize">50 x 50</span><br />
...
<script type="text/javascript">
document.forms[0].elements[2].onchange = switchsizes;

function switchsizes() {
   if (document.forms[0].elements[2].value == 'avatar') {
      document.getElementById("largesize").innerHTML = '100 x 100';
      document.getElementById("smallsize").innerHTML = '50 x 50';
   }
   else if (document.forms[0].elements[2].value == 'banner') {
      document.getElementById("largesize").innerHTML = 'large size for banners';
      document.getElementById("smallsize").innerHTML = 'small size for banners';
   }
   else if (document.forms[0].elements[2].value == 'signature') {
      document.getElementById("largesize").innerHTML = 'large size for signatures';
      document.getElementById("smallsize").innerHTML = 'small size for signatures';
   }
}
</script>

Admittedly this script has the problem of not degrading very well if Javascript is turned off; you could use noscript tags to show the default values of all three at the same time to be safe. Or something. I'm kind of just whipping this up, so don't be surprised if it's not very good or doesn't quite work as it is. Just tell me.
 
So I save that first bit of code you posted as something like formhandler.php, and then use PHP, with an HTML form, to have people choose one type of graphic they request, and send it too me.

That doesn't sound too hard....

And that second part of code would be an alternate method that wouldn't be as simple as the first method, but more like what my stupid head would think looks fancy?

Edit: my current code is this:
HTML: 
<form action="handler.php" method="post">
Name:<br />
<input type="text" value="Name" name="name" /><br />
E-mail:<br />
<input type="text" value="Email" name="email" /><br /><br />
What would you like?<br />
<input type="checkbox" name="graphics" value="avatar" />Avatar<br />
<input type="checkbox" name="graphics" value="banner" />Banner<br />
<input type="checkbox" name="graphics" value="signature" />Signature<br /><br />

Avatar:[ignore if you are getting something else]<br />
<input type="radio" name="size" value="large" /> 100 x 100<br />
<input type="radio" name="size" value="small" /> 50 x 50<br />
<input type="radio" name="size" value="custom" />Enter custom size:<br />
<input type="text" name="customsize" value="Width x Hight" style="text-indent:50px;" />

<input type="submit" value="Submit" /><input type="reset" value="Reset" />

</form>

And in the file handler.php, I have the first bit of code that Butterfree posted.
 
Last edited:
No, no, no. Am I not right in thinking that you want the same options for all three - avatars, banners and signatures? Aside, of course, from how big the "small" and "large" default sizes are for each? That's how it sounded from your first post.

Basically, my suggestion is that you ditch the entire idea of splitting the form depending on whether you're requesting an avatar, a banner or a signature. Since they all need the same information, they can all use the same form. The only difference is what dimensions to attach to the "small" and "large" radio buttons, and the second snippet I posted concerns how to make that automatically change when you select a different request type.
 
Butterfree's example seems relevant to what you want. Although, for \n to be parsed, the strings containing it need to be enclosed with double-quotes in place of single-quotes as far as I am aware.
 
Yeah, your right Butterfree, that's what I want to do. I didn't look at it very well late last night.
 
Faltzer said:
Butterfree's example seems relevant to what you want. Although, for \n to be parsed, the strings containing it need to be enclosed with double-quotes in place of single-quotes as far as I am aware.
Click to expand...

http://www.php.net/manual/en/language.types.string.php said:
Single quoted

The simplest way to specify a string is to enclose it in single quotes (the character ').

To specify a literal single quote, escape it with a backslash (\). To specify a literal backslash before a single quote, or at the end of the string, double it (\\). Note that attempting to escape any other character will print the backslash too.
Click to expand...
 
Ok, I updated the first post, so that it better explains what I want to happen with this form.....

I looked at the W3's section on Javasript, and I saw something about DOM values. Could those work for this?
 
My point still stands. Why do you want to show one set of radio buttons for signatures, one set for banners and one set for avatars if all of them use the exact same set of radio buttons? You don't need the form to show only one of the three sets at a time; you can just use one to begin with. All the extra information this gives you is telling you again whether the user is requesting a banner, signature or avatar.
 
Ok. That makes sense. I'm sorry for being so dense on the subject. I just add that snippet of javascript you posted to the page and it will work?

And now on to the handler of the form...I found good thing (I'm not sure what to call it) here: http://www.dynamic.ie/sourcecode/formtomail.asp

I'm just not sure how much I have to do to make it work with my form
 
...that's ASP. Does your host actually support ASP?

The PHP I gave you will work fine if you just replace those single quotes with double quotes and tweak the field names used, so I don't even know why you're still looking for a script. :/ And yes, my Javascript should work, provided you put spans around the size values as per the beginning of the snippet.
 
The image that people can send to me to use in their respective graphic can be any size. What I'm using the size buttons for would be the size of graphic they want me to send them. For example, some forums only accept avatars of a specific size, and what I make when they say avatar might not be in a size that they can use.

@Butterfree: Whoops. I'm not sure if Freehostia does allow ASP.... Thanks for pointing that out; I'll forget it.

So I should replace all of the single quotes in the example that you posted with double quotes? And then of course, edit/add to it a bit to work with the current form fields that I have?

My current form looks like this:

HTML: 
<form action="handler.php" method="post" name="Request">
Name<br />
<input type="text" value="Name" name="name" /><br />
E-mail<br />
<input type="text" value="Email" name="email" /><br /><br />
What would you like?<br />
<input type="checkbox" name="graphics" value="avatar" />Avatar<br />
<input type="checkbox" name="graphics" value="banner" />Banner<br />
<input type="checkbox" name="graphics" value="signature" />Signature<br /><br />

Size<br />
<input type="radio" name="size" value="large" /><span id="largesize">100 x 100</span><br />
<input type="radio" name="size" value="small" /><span id="smallsize">50 x 50</span><br />
<input type="radio" name="size" value="custom" />Enter custom size:<br />
<div style="text-indent: 20px;"><input type="text" name="acustomsize" value="Width x Hight" /></div><br /><br />

<script type="text/javascript">
document.forms[0].elements[2].onchange = switchsizes;

function switchsizes() {
   if (document.forms[0].elements[2].value == 'avatar') {
      document.getElementById("largesize").innerHTML = '100 x 100';
      document.getElementById("smallsize").innerHTML = '50 x 50';
   }
   else if (document.forms[0].elements[2].value == 'banner') {
      document.getElementById("largesize").innerHTML = '800 x 230';
      document.getElementById("smallsize").innerHTML = '500 x 150';
   }
   else if (document.forms[0].elements[2].value == 'signature') {
      document.getElementById("largesize").innerHTML = '530 x 150';
      document.getElementById("smallsize").innerHTML = '350 x 100';
   }
}
</script>

Colors [up to three]<br />
<input type="text" name="color" value="#XXXXXX" /><br />
<input type="text" name="color" value="#XXXXXX" /><br />
<input type="text" name="color" value="#XXXXXX" /><br /><br />

Image [optional]<br />
<input type="text" name="image" value="Image URL" /><br />
<input type="text" name="credits" value="Image credits" /><br /><br />

Text <br />
<input type="text" name="text" value="Words on your graphic" /><br /><br />

<input type="submit" value="Submit" /><input type="reset" value="Reset" />

</form>

Is that correct?

On handler.php I have the php you posted, currently unedited.

A concern I have is that when I select which of the graphic types I would like, the size values don't change.
 
Last edited:
Well, you should be using radio buttons or even a selection menu for selecting what kind of graphic the person wants. It is nonsensical to let them select multiple options at a time.

And yes, you just have to change the single quotes to double quotes and modify $message to include all the fields.
 
Ok, yep. And thanks to my buddy Peter, I think I have the handler.php file worked out....

PHP: 
<?php
$message = "Name " . $_POST["name"] . "\nE-mail " . $_POST["email"] . "\nRequest " . $_POST["graphics"] . "\nSize " . $_POST["size"] . "\nColors " . $_POST["color1"] . $_POST["color2"] . $_POST["color3"] . "\nImage " . $_POST["image"] . "\nCredits " . $_POST["credits"] . "\nText " . $_POST["text"];

if ($_POST["size"] == "custom") {
      $message .= " (" . $_POST["customsize"] . ")";
}

mail("dittosdocks@gmail.com", "Request", $messages, "From: " . $_POST["email"]);
?>

How does that look?

EDIT EL MUCHO

I opened a ticket on the Free Hostia support thing. Check it out:

Diz said:
I am working on a custom form for my site, and one of my friends who has worked with Free Hostia in the past said that the PHP mail() has to go to an e-mail that is from Free Hostia. So I went to set up an email, thinking I'd have them all forwarded to my computer's email client. But on the email page, it said I have to have a domain, either to register or transfer on to here. I have no idea about what I have to do to do this. Could you please explain how to get an email account here?
Click to expand...

Free Hostia said:
Hello,

Thank you for contacting our Technical Support Department.

You are currently using our Chocolate/Free hosting plan, which does not allow you to send or forward emails (SMTP is disabled). Any kind of scripts that send emails will not work as either. Our paid hosting plans do not have this restriction. You can upgrade your web hosting plan from the "Change plan" section on your control panel, you will find the link on the left "Upgrades" menu.

Another major requirement in order to be able to use the email features that we offer is you to host or to register a domain name in your account with us. You will not be able to create an email account using a free subdomain.
Please note that you will have to set either the "TO" or the "FROM" filed of your e-mail form to be an operational e-mail address created with your account with us.

Upgrading to a paid hosting plan would also remove the 500KB file size limit, which the Free plan has, so you will be able to upload larger files. The Watercircle plan is only $2.95/month and has no such restrictions. In addition disk space, monthly traffic and other features will be increased significantly. You will be able to check a comparison of our payed hosting plans features here:

http://freehostia.com/compare-hosting-plans.html

If you have any further questions or problems, please do not hesitate to contact us!

Best Regards,
Miles
Click to expand...
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom