universal form

[nate51]

I am working on something right now and I am not sure if it's even possible. I was wondering if someone can help me out on this?

I have 1 form page and I want to make an option (drop down list) that when the user chooses an option from the drop down it changes the outcome of the submit.

My idea is as follows.

When someone selects an option from the drop down it changes the link on the submit button i.e. (if the drop down option b02 is selected, then when the user hits the submit button it uses php page b02.php. And the same for b04 = b04.php, b05 = b05.php.

Is this possbile? If so can anyone point me in the right direction?

Please and Thanks.

-- Nate

[Jas]

I think it would be easier to have a hidden input that you can change the value of. Then, when the form is proccess, it can redirect them. Or, you could include all of the possibilities in one php page, then process the form.


if(isset($_POST['hidden_input'])){
$hidden = $_POST['hidden_input'];
switch($hidden){
case 'b01':
//do something
break;
case 'b02':
//do something
break;
}
}

The JS would be something like:

function changehidden(thevalue){
document.form.hidden_input.value = thevalue;
}
<select name="dropbox" onchange="changehidden(form.dropbox.options[selectedIndex].value)">
<option value="b01">b01</option>
<option value="b02">b02</option>
</select>


(I think, but it's been a while since I've done something like that. If it doesn't work, let me know.)

wrong js code, fixed I think

[nate51]

Jas

The reason I was thinking of using different php pages is when someone submits the form I have a webmaster recieve an html email designed like a card that displays the persons name, address, email, etc.

But the email the webmaster gets has a code on the botom right of the card that represents the persons selection from the drop down.

I was thinking of hidden fields but am kind of new to that aspect and not sure how to do it. But if that would be easier I would prefer to do that.

I hope my explanation makes sense.

-- Nate

[Jas]

I am a little lost. I still think the way shown in my last post would work, unless I don't understand it. (I also fixed the code, cause it was wrong :o).

if(isset($_POST['hidden_input'])){
$hidden = $_POST['hidden_input'];
switch($hidden){
case 'b01':
// PAGE b01.php's contens can go here, or you can use:
//header("Location: ./b01.php");
// to redirect or
// include('./b01.php');
// to pull in the files contents
break;
case 'b02':
//do something
break;
}
}

Basically, the hidden input is a hidden input that the user cannot see or manipulate as they can with other input types. But, via JS, you can change the value according to their selection on the dropbox. See the JS code on my post above.

[nate51]

Hey Jas,

This might be asking a bit much but the code you used, is it possible to see a demo? I am still learning parts of this and I am not sure where to drop the php code on the page.

If not an example like a tutorial page to figure it out a bit better?

[Jas]

Sure. Give me a second to make one for you. I won't be able to test it right now, so there *may* be an error. If there is, just let me know. I'll post it in a little bit.

[Jas]

Okay, try running this:


<?php

//has the form been submitted?
if(isset($_POST['submit'])){

//set the var $hidden equal to the value of the hidden field
$hidden = $_POST['hidden_input'];

//start up a switch statement to check $hidden
switch($hidden){

//if the value of $hidden is b01
case 'b01':
echo 'This is form process 1';
break;

//if the value of $hidden is b02
case 'b01':
echo 'This is form process 2';
break;

//none of the other options worked
default:
echo 'There was an error processing the form';
break;

}//end switch
}//endif

?>

<script>
function changehidden(thevalue){
document.form[0].hidden_input.value = thevalue;
}
</script>

<form method="post" action="">

<input type="hidden" name="hidden_input" />

<select name="dropbox"
onchange="changehidden(form[0].dropbox.options[selectedIndex].value)">
<option value="b01">b01</option>
<option value="b02">b02</option>
</select>

<input type="submit">
</form>


Tell me what it does. I am worried about the Javascript part. . . I think it will work, though.

You can replace echo "This is form process #" with whatever you want the form to do.

[nate51]

Yeah...

Is there a tutorial page for this? Because I am lost.:confused:

[Jas]

:D We all get lost at some point-- I'm experiencing that feeling with Linux right now.

Anyway, let what do you want to know specifically, and I'll do my best to explain it. There is no tutorial for this particular subject-- not that I know of, at least. I'm not sure what level your at as a coder, so you'll have to let me know what you need help on. I can find tutorials for you on different aspect of this, if you need me to.

BTW: Did you get the script to run? It might help you see what's happening. Paste the code into a file named "something.php" and put it on a PHP enabled server, if you haven't already.

[nate51]

Hey Jas,

I pasted the php code in Dreamweaver and got the drop down part in visuals but for the code aspect I am just confused with...

echo 'This is form process 2';
I am not sure what to place in there.

I can paste the code I am using right now on the pages if that helps with implementing it. I will have to get to it in a few hours though.

-- Nate

[Jas]

Say that b01.php's contents are as follows:

<?php
include('MySQL_connect.php');
$name = $_POST['name'];
MySQL_Query("INSERT INTO table VALUES(\"$name\")");
include(MySQL_close.php);
?>

You can paste that here (minus the <?php ?> tags):

switch($hidden){

//if the value of $hidden is b01
case 'b01':
include('MySQL_connect.php');
$name = $_POST['name'];
MySQL_Query("INSERT INTO table VALUES(\"$name\")");
include(MySQL_close.php);
break;

//if the value of $hidden is b02
case 'b01':
echo 'This is form process 2';
break;

//none of the other options worked
default:
echo 'There was an error processing the form';
break;

}//end switch

Or, if possible, you can try running the script from inside the switch statment, like so:

switch($hidden){

//if the value of $hidden is b01
case 'b01':
include('b01.php');
//This executes the script contained in the file b01.php
break;

//if the value of $hidden is b02
case 'b01':
echo 'This is form process 2';
break;

//none of the other options worked
default:
echo 'There was an error processing the form';
break;

}//end switch
But that depends-- to some degree-- on the contents of the file. Usually, it works.


Also note that in order for any of this to work, the script needs to be on a PHP enabled server and have a .php extension.

If none of that help you, try posting the code you have and I'll see what I can do. :)

[nate51]

I gave the code a try and it doesnt seem to work for me. I am running it off a server that has php.

This is the code I usually use for the single forms


<form id="form1" name="form1" method="post" action="regsend.php"><table width="752" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><table width="740" border="0" align="center" cellpadding="0" cellspacing="5">
<tr>
<td width="117" height="19"><span class="style9">Name:</span></td>
<td width="277"><label>
<input name="firstname" class="textbox" id="firstname" style='font-family:Arial;font-size:12px;color:#000000;width:125px'
onfocus="if(this.value=='First Name')this.value='';" onblur="if(this.value=='')this.value='First Name';" value="First Name" />
<input name="lastname" class="textbox" id="lastname" style='font-family:Arial;font-size:12px;color:#000000;width:125px'
onfocus="if(this.value=='Last Name')this.value='';" onblur="if(this.value=='')this.value='Last Name';" value="Last Name" />
</label></td>
<td width="138"><span class="style9">Date of Birth:</span></td>
<td width="193"><select name="birthmonth"
size="1" class="style9"
style="FONT-SIZE: 10px; COLOR: black; FONT-FAMILY: arial,helvetica,verdana,sans-serif">
<option value="0" selected="selected">Month</option>
<option
value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option
value="Mar">Mar</option>
</select>
<select name="birthday"
size="1" class="style9"
style="FONT-SIZE: 10px; COLOR: black; FONT-FAMILY: arial,helvetica,verdana,sans-serif">
<option value="0" selected="selected">Day</option>
<option
value="1">01</option>
<option value="2">02</option>
<option
value="3">03</option>
</select>
<select name="birthyear"
size="1" class="style9"
style="FONT-SIZE: 10px; COLOR: black; FONT-FAMILY: arial,helvetica,verdana,sans-serif">
<option value="0" selected="selected">Year</option>
<option
value="2001">2001</option>
<option value="2000">2000</option>
<option
value="1999">1999</option>
<option value="1998">1998</option>
<option
value="1997">1997</option>
</select></td>
</tr>
<tr>
<td><span class="style9">Home Address:</span></td>
<td><input name="address" type="text" class="style5" id="address" size="35" /></td>
<td><span class="style9">City:</span></td>
<td><input name="city" type="text" class="style5" id="city" /></td>
</tr>
<tr>
<td><span class="style9">State:</span></td>
<td><input name="province" type="text" class="style5" id="province" /></td>
<td><span class="style9">Zip Code:</span></td>
<td><input name="postalcode" type="text" class="style5" id="postalcode" /></td>
</tr>
<tr>
<td height="19"><span class="style9">Home Telephone:</span></td>
<td><span class="style9">(</span>
<input name="areacode" type="text" class="style5" id="areacode" size="3" maxlength="3" />
<span class="style9">)</span>
<input name="phone1" type="text" class="style5" id="phone1" size="3" maxlength="3" />
<span class="style9">-</span>
<input name="phone2" type="text" class="style5" id="phone2" size="4" maxlength="4" /></td>
<td><span class="style9">Mobile Telephone/Celular:</span></td>
<td><span class="style9">(</span>
<input name="carea" type="text" class="style5" id="carea" size="3" maxlength="3" />
<span class="style9">)</span>
<input name="cell1" type="text" class="style5" id="cell1" size="3" maxlength="3" />
<span class="style9">-</span>
<input name="cell2" type="text" class="style5" id="cell2" size="4" maxlength="4" /></td>
</tr>
<tr>
<td height="19">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>
<select name="association"
size="1" class="style9"
style="FONT-SIZE: 10px; COLOR: black; FONT-FAMILY: arial,helvetica,verdana,sans-serif" id="association">
<option value="0">Choice</option>
<option value="b01">b01</option>
</select> </td>
</tr>
</table>
<label>
<div align="right"></div>
</label></td>
</tr>
<tr>
<td><table width="740" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="630">&nbsp;</td>
<td width="110"><input name="button" type="submit" class="style9" id="button" value="Submit" /></td>
</tr>
</table> <label></label></td>
</tr>

</table></form>

That page tells this page to send the email. Here is the emailer code.


<?php
// multiple recipients
$to = 'xxxx@xxxx.com' . ', ';
$to .= 'xxxx@xxxx.com';

// subject
$subject = change02;

// message
$message = '
<html>
<body bgcolor="#ffffff">

<div align=center><table border=0 cellspacing=0 cellpadding=1
bgcolor=#555555><tr><td><table border=0 cellspacing=0 cellpadding=5><tr><td
class=title colspan=5 valign=middle nowrap bgcolor=#ffffff>
<blockquote>choice01</blockquote>
</td><td align=right valign=middle nowrap bgcolor=#ffffff>
<img src="http://www.xxxx.com/images/mail_logo.jpg" alt="[Logo]"
border=0></td>
</tr><tr>
<td class=label align=right valign=middle nowrap bgcolor=#eeeeee>Full Name:</td>
<td class=content align=left valign=middle nowrap bgcolor=#eeeeee>' . $firstname . '</td>
<td class=content align=left valign=middle nowrap bgcolor=#eeeeee>' . $midname .'</td>
<td class=content align=left valign=middle nowrap bgcolor=#eeeeee>' . $lastname .'</td>
<td class=label align=right valign=middle nowrap bgcolor=#eeeeee>Date of Birth:</td>
<td class=content align=left valign=middle nowrap bgcolor=#eeeeee>' . $birthmonth . ', ' . $birthday . ', ' . $birthyear . '</td>
</tr><tr>
<td class=label align=left valign=middle nowrap bgcolor=white>&nbsp;</td>
<td class=footer align=left valign=middle nowrap bgcolor=white>Last</td>
<td class=footer align=left valign=middle nowrap bgcolor=white>Middle</td>
<td class=footer align=left valign=middle nowrap bgcolor=white>First</td>
<td class=content align=left valign=middle nowrap bgcolor=white>&nbsp;</td>
<td class=content align=left valign=middle nowrap bgcolor=white>&nbsp;</td></tr><tr>
<td class=label align=right valign=middle nowrap bgcolor=#eeeeee>Address:</td>
<td class=content colspan=3 align=left valign=middle nowrap bgcolor=#eeeeee>' . $address . '</td>
<td class=label align=right valign=middle nowrap bgcolor=#eeeeee>City:</td>
<td class=content align=left valign=middle nowrap bgcolor=#eeeeee>' . $city . '</td>
</tr><tr>
<td class=label colspan=6 align=left valign=middle nowrap
bgcolor=white>&nbsp;</td></tr><tr>
<td class=label align=right valign=middle nowrap bgcolor=#eeeeee>Province:</td>
<td class=content align=left valign=middle nowrap bgcolor=#eeeeee>' . $province . '</td>
<td class=label align=right valign=middle nowrap bgcolor=#eeeeee>Postal Code:</td>
<td class=content align=left valign=middle nowrap bgcolor=#eeeeee>' . $postalcode . '</td>
<td class=label align=right valign=middle nowrap bgcolor=#eeeeee>xxxxxx:</td>
<td colspan=1 align=left valign=middle nowrap bgcolor=#eeeeee class=content>' . $choice . '</td>
</tr><tr>
<td class=label colspan=6 align=left valign=middle nowrap
bgcolor=white>&nbsp;</td></tr><tr>
<td class=label align=right valign=middle nowrap bgcolor=#eeeeee>Telephone:</td>
<td class=content colspan=2 align=left valign=middle nowrap bgcolor=#eeeeee>' . $areacode . $phone1 . $phone2 . '</td>
<td class=label align=right valign=middle nowrap bgcolor=#eeeeee>Mobile Phone: </td>
<td colspan=2 align=left valign=middle bgcolor=#eeeeee class=content>' . $carea . $cell1 . $cell2 .'</td>

</tr><tr>
<td class=label colspan=6 align=right valign=middle nowrap bgcolor=#eeeeee>change03</td>
</tr></table></td></tr></table>
</body>
</html>';

// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

// Mail it
mail($to, $subject, $message, $headers);
?>

The portions "change01", "change02" and "change03" they are the whole reason this thing is a mess as "change01" is the subject line and depending on what option the user choses from the drop down will determine what text is displayed in the subject line i.e. if they choose option b01 the subject line will be "Reply from xxxx site" and so forth. The "change02" is just to be a title on the reply card and "change03" is actually a pre-determined serial number that the card displays and depending on the choice they make that will determine the serial number.

I hope that makes sense.

-- Nate

[Jas]

I'm really sorry, but I'm lost now. :confused: Can you explain a little more? I don't get what change01, change02, and change03 are or how they fit into the form and script. Also, I only see change02 and change03.

EDIT: BTW, the demo you can try with out making any changes. It should still run.

[nate51]

Wait I think I got an idea here.

Is there a way so that when someone uses the drop down menu on the form page, hidden fields will input the hidden field data into the subject line of the email, and the content of the email?

Thats the best way I can think of doing this and I think it would be the easiest. I know a bit about hidden fields but I am not sure if this is doable. I can imagine it must be.

-- Nate

[Jas]

If I understand correctly, you can do that without a hidden field, and without javascript.

<select name="subject">
<option value="This is the subject!">Subject One</option>
</select>

So when they select "Subject One," they are actually selecting the subject line "This is the subject!" Then, in the PHP script, you can put the value in the subject line of the email with this global variable: $_POST['subject']

I hope that makes sense.

[nate51]

Yes that makes perfect sense, but I already have a system going like that, the issue I am having is I need 2 other fields in the email to change also, is there a way to attach multiple tags?
i.e.

<select name="subject">
<option value="This is the subject!", "value for title", "value for serial number">Subject One</option>
</select>
I know this is wrong but something like this to send more than one value to the email, so subject and 2 content items.

[Jas]

Oh! I gotcha. I was thinking you would have three different dropboxes. Okay, you will need JavaScript to do that, then. Try something like this:



<script>
function changehidden(thevalue){
var hidden_values = array('subject one','subject two','subject three');
hidden_values['subject one']['subject'] = "This is subject one";
hidden_values['subject one']['title'] = "This is title one";
hidden_values['subject one']['number'] = "010101";

hidden_values['subject two']['subject'] = "This is subject two";
hidden_values['subject two']['title'] = "This is title two";
hidden_values['subject two']['number'] = "020202";

hidden_values['subject three']['subject'] = "This is subject three";
hidden_values['subject three']['title'] = "This is title three";
hidden_values['subject three']['number'] = "030303";

document.form[0].hidden_subject.value = hidden_values[thevalue]['subject'];
document.form[0].hidden_title.value = hidden_values[thevalue]['title'];
document.form[0].hidden_number.value = hidden_values[thevalue]['number'];
}
</script>

<form method="post" action="">

<input type="hidden" name="hidden_subject" />
<input type="hidden" name="hidden_title" />
<input type="hidden" name="hidden_number" />

<select name="dropbox"
onchange="changehidden(form[0].dropbox.options[selectedIndex].value)">
<option value="subject one">One</option>
<option value="subject two">Two</option>
<option value="subject three">Three</option>
</select>

<input type="submit">
</form>


I haven't tested it, so you make get some huge error :p If so, just tell me :)

$_POST['hidden_subject'] will be the var for the subject.
$_POST['hidden_title'] will be the var for the title.
$_POST['hidden_number'] will be the var for the number.

[nate51]

Alright I am making headway.

I used your example to a "T" and I threw in the variables into my regsend.php with reciving areas like this...

<td class=label colspan=6 align=right valign=middle nowrap bgcolor=#eeeeee>' . $hidden_number . '</td>
Because the email the webmaster is to get is supposed to be an html email.

The email comes through fine displaying how it should, but the areas I threw the hidden variables into arent displaying.

They are blank like nothing was selected.

[Jas]

Try concating in $_POST['hidden_number'] instead of $hidden_number. It could also by that the JavaScript isn't working. I'll look into that for you.

[Jas]

:eek: Ahh! :eek: There were a couple of errors in the Javascript. Oiy! Try this:

<script>
function changehidden(thevalue){
var hidden_values = Array('subject one','subject two','subject three');

hidden_values['subject one'] = new Array();
hidden_values['subject two'] = new Array();
hidden_values['subject three'] = new Array();

hidden_values['subject one']['subject'] = "This is subject one";
hidden_values['subject one']['title'] = "This is title one";
hidden_values['subject one']['number'] = "010101";

hidden_values['subject two']['subject'] = "This is subject two";
hidden_values['subject two']['title'] = "This is title two";
hidden_values['subject two']['number'] = "020202";

hidden_values['subject three']['subject'] = "This is subject three";
hidden_values['subject three']['title'] = "This is title three";
hidden_values['subject three']['number'] = "030303";

document.forms[0].hidden_subject.value = hidden_values[thevalue]['subject'];
document.forms[0].hidden_title.value = hidden_values[thevalue]['title'];
document.forms[0].hidden_number.value = hidden_values[thevalue]['number'];
}
</script>

<form method="post" action="">

<input type="hidden" name="hidden_subject" />
<input type="hidden" name="hidden_title" />
<input type="hidden" name="hidden_number" />

<select name="dropbox"
onchange="changehidden(forms[0].dropbox.options[selectedIndex].value)">
<option value="subject one">One</option>
<option value="subject two">Two</option>
<option value="subject three">Three</option>
</select>

<input type="submit">
</form>

[nate51]

IT WAS THE JAVASCRIPT!

Jas IOU big time, thanks so much for your help and sticking with this post, it works perfect!

-- Nate

[nate51]

I may have spoken a touch too soon.

I tried the demo and it works great as a stand alone with the html mailer code, but now that I am trying to change the variables (i.e. subject, title, number) those aspects don't want to display in the email.

I did a trial and everything was working but the second I changed the dropdown option, this part...

<option value="subject one">Cosmetologists</option>
I get the emails still but they are not displaying the subjet, title, and number (basically all the dynamic variables).

I'm lost.

[Jas]

I will never learn :(. . . I'm sorry, I always forget to explain the code. Don't change the values in the dropbox, change them in the javascript, like so:


// SUBJECT #1 GOES HERE:
hidden_values['subject one']['subject'] = "This is subject one";

// TITLE #1 GOES HERE
hidden_values['subject one']['title'] = "This is title one";

// SERIAL NUMBER #1 GOES HERE
hidden_values['subject one']['number'] = "010101";

//etc.
hidden_values['subject two']['subject'] = "This is subject two";
hidden_values['subject two']['title'] = "This is title two";
hidden_values['subject two']['number'] = "020202";

hidden_values['subject three']['subject'] = "This is subject three";
hidden_values['subject three']['title'] = "This is title three";
hidden_values['subject three']['number'] = "030303";


The value in the options just tells javascript which array to pull the values out of. So

<option value='subject one'>
Goes to javascript:

document.form[0].hidden_subject.value = hidden_values[thevalue]['subject'];
Pulling out the information in the array:

hidden_values['subject one']['subject'] = "This is subject one";

Hope that explains it :) That probably just confused you more, though. Anyway, the value of the options are the identifier (I probably shouldn't have called it "subject one", "subject two" and "subject three"). The values in the javascript two dimensional array are what goes to the hidden field.

[nate51]

Hey Jas,

No I am good with changing those variables, but I do need to change the variables for the dropdowns as people will need to select what community or organization they are a part of. And saying "One, Two or Three" isnt enough detail.

Problem is I am not sure what I am doing wrong but the code seems tempermental, if I copy if from here and paste it, it works fine but if I even change one letter in the drop down and change it back it stops working correctly.

[Jas]

Heh. I've been through that. :)

Paste what you've got and I'll be happy to look at it for you. (Don't include anything that is unnecessary, such as other form fields, if it's not too much trouble to take out.)

EDIT: And what browser are you viewing in? It might make a difference (I hope not though *shudder* It can take forever to fix cross browser problems).

[nate51]

This is the code for the form page, I put this above the </head> tag

<script>
function changehidden(thevalue){
var hidden_values = Array('subject one','subject two','subject three');

hidden_values['subject one'] = new Array();
hidden_values['subject two'] = new Array();
hidden_values['subject three'] = new Array();

hidden_values['subject one']['subject'] = "This is subject one";
hidden_values['subject one']['title'] = "This is title one";
hidden_values['subject one']['number'] = "010101";

hidden_values['subject two']['subject'] = "This is subject two";
hidden_values['subject two']['title'] = "This is title two";
hidden_values['subject two']['number'] = "020202";

hidden_values['subject three']['subject'] = "This is subject three";
hidden_values['subject three']['title'] = "This is title three";
hidden_values['subject three']['number'] = "030303";

document.forms[0].hidden_subject.value = hidden_values[thevalue]['subject'];
document.forms[0].hidden_title.value = hidden_values[thevalue]['title'];
document.forms[0].hidden_number.value = hidden_values[thevalue]['number'];
}
</script>

Form code same page...

<form method="post" action="regsend.php">
<input type="hidden" name="hidden_subject" />
<input type="hidden" name="hidden_title" />
<input type="hidden" name="hidden_number" />

The rest of the form is like first name, last name, DOB etc.

This is the code for the drop menu same page...

<select name="dropbox"
onchange="changehidden(forms[0].dropbox.options[selectedIndex].value)">
<option value="subject one">One</option>
<option value="subject two">Two</option>
<option value="subject three">Three</option>
</select>

On the "regsend.php" page the hidden variables are retrieved with lines like this...

<td class=label colspan=6 align=right valign=middle nowrap bgcolor=#eeeeee>' . $hidden_number . '</td>

One minute it works, I change one letter, change it back and it stops working (on the form page that is).

I am using I.E. to check for now, it displays fine in FireFox.

[Jas]

Okay, how does the html page look when you put it together? Let me see what you have for that-- just give it your best shot and I'll debug it for you. (So edit the form and the JavaScript like you want it, and then I'll see what the problem is and I'll fix it for you.)