Forum Moderators: coopster

Message Too Old, No Replies

how to change html<font> variables within a form, with php

stuck on strings

         

adfa

8:33 am on Dec 5, 2007 (gmt 0)

10+ Year Member



i've been at this for hours and can't quite get there.
the page is to put custom lettering, colour, etc on a pair of swimming briefs and do it dynamically.
the form elements are converted to php strings.
i then want these strings to affect the font size, colour, etc of the outputted text. the text is also generated from the form.
the strings have the right values as they are echoing properly.
it's the php if statement that's getting me.
i want to be able to say - 'if the customer chose yellow font, make the font yellow for the outputted text', for example.
any help much appreciated.
x
adrian

<code>
<div align="center">PERSONALISE
<div id="trunks_front">
<div id="text_return"><?php if("$colour" == yellow):?><font color="#FFFF00"><?php echo $_POST[personalise];?></font><?php endif;?><br /></div>

</div>
</div>
<form method="POST" action="personalise.php">
<p>Type in the text as you would like to see it on your trunks.<br />
</p>
<p><input type="text" name="personalise" value="Enter your text here" onfocus="if(this.value == 'Enter your text here') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your text here';}"/></p>

<p> Size of text
<select name="text_size">
<option value ="10">10pt</option>
<option value ="20">20pt</option>
<option value ="30" selected="selected">30pt</option>
<option value ="60">60pt</option>
</select>

Font style <select name="font">
<option value ="verdana">Verdana</option>
<option value ="trebuchet">Trebuchet</option>
<option value ="helvetica" selected="selected">Helvetica</option>
<option value ="arial">Arial</option>
</select>

Font colour <select name="colour">
<option value ="black">Black</option>
<option value ="white">White</option>
<option value ="red">Red</option>
<option value ="yellow" selected="selected">Yellow</option>
</select>

Brief colour <select name="brief_colour">
<option value ="black">Black</option>
<option value ="white">White</option>
<option value ="red" selected="selected">Red</option>
<option value ="yellow">Yellow</option>
</select>
<p><input type="submit" name="submit" value="Show me this text on my briefs"/></p></form>

<?php
$text_size = $_POST['text_size'];
$font = Trim(stripslashes($_POST['font']));
$colour = Trim(stripslashes($_POST['colour']));
$brief_colour = Trim(stripslashes($_POST['brief_colour']));
$yellow = yellow;
echo $text_size, $font, $colour, $brief_colour, $yellow;
?>
</code>

PHP_Chimp

9:57 am on Dec 5, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<?php
$text_size = $_POST['text_size'];
$font = Trim(stripslashes($_POST['font']));
$colour = Trim(stripslashes($_POST['colour']));
$brief_colour = Trim(stripslashes($_POST['brief_colour']));
$yellow = yellow;


echo "<p style=\"font:$font; background-color:$brief_colour; color:$colour; font-size:$text_size;\">\n
$yellow\n <!-- I take it this is your text to be written -->
<p>\n";
?>

You may want to change the <p> tag to something else, but this should give you what you want.

adfa

10:21 am on Dec 5, 2007 (gmt 0)

10+ Year Member



thanks for the speedy reply.
i have put this code into dreamweaver but it doesn't seem to validate.
i ensured the text was inside php wotsits.
could you post the full syntax of this so i know exactly where to put it and what to put?
many thanks

adfa

10:24 am on Dec 5, 2007 (gmt 0)

10+ Year Member



text to be affected is from the input text field - 'personalise'

PHP_Chimp

12:50 pm on Dec 5, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The code wont work in dreamweaver as it needs the php variables to be replaced by there values.
If you try

echo "<p style=\"font:Arial; background-color:#000; color:#fff; font-size:12px;\">\n
Testing, Testing, is this thing working\n <!-- $_POST['personalise'] -->
<p>\n";

Of course you will need to either echo the statment or strip out the php so that dreamweaver can look at the html.
Also I wouldnt bother with the validator built into dreamweaver...it isnt correct all of the time. Set up a test page then run it through -
[validator.w3.org...] for the markup and
[jigsaw.w3.org...] for the CSS

Although I got the link for your site, but remember that links to personal sites are going to get turned into example.com as soon as a mod notices.

<edit>
The quote of your code was there so that all you needed to do was take the quote and my code and use them in that order.
However you may want to trim or do other things to the input in $_POST['personalise'], however the resulting text from ['personalise'] needs to go in the space where I have testing, testing...

<edit 1>


<?php
$text_size = $_POST['text_size'];
$font = Trim(stripslashes($_POST['font']));
$colour = Trim(stripslashes($_POST['colour']));
$brief_colour = Trim(stripslashes($_POST['brief_colour']));
$yellow = 'yellow'; // dont know what this is
$text = $_POST['personalise'];
echo "<p style=\"font:$font; background-color:$brief_colour; color:$colour; font-size:$text_size;\">\n
$text\n
<p>\n";
?>

You are also using Trim not trim, although I dont think it actually makes and difference to php however the inbuilt function is trim with a little t, so im not sure if you have written your own function Trim to do something different.
You also need 's around yellow to make it a string.
And there is no output on the page that you left a link to. I guess that is because you are trying to output information when you are not using the form before it, so there are no $_POST variables. You can always just asign values to the $_POST array if you dont want to test the form page as well i.e.
$_POST['personalise'] = 'bit me ;)';
$_POST['font'] = 'arial';

[edited by: PHP_Chimp at 1:00 pm (utc) on Dec. 5, 2007]

adfa

1:50 pm on Dec 5, 2007 (gmt 0)

10+ Year Member



you are wonderful, thank you so much for your expert help.
i don't seem to be getting the font to change though. i have tried just 'font' and 'font face' and 'font-face'.
<code>
<?php
$text_size = $_POST['text_size'];
$font = $_POST['font'];
$colour = $_POST['colour'];
$brief_colour = $_POST['brief_colour'];
$text = $_POST['personalise'];
echo "<p style=\"font-face:$font; color:$colour; font-size:$text_size;\">\n
$text\n
<p>\n";
?>

********

Font style <select name="font">
<option value ="Verdana">Verdana</option>
<option value ="Trebuchet">Trebuchet</option>
<option value ="Helvetica" selected="selected">Helvetica</option>
<option value ="Arial">Arial</option>
</select>
</code>

i changed the names to first letter capitals just in case but that didn't work.
any ideas?

PHP_Chimp

2:49 pm on Dec 5, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Sorry you should be using font-family -

echo "<p style=\"font-family:$font; background-color:$brief_colour; color:$colour; font-size:$text_size;\">\n

Values are usually all lower case, so if it doesnt work then lower case all of your founts. If you pass the code through the W3C CSS validator it will tell you if there are errors and how to fix them.

This still keeps all of your code in CSS, so this will work with all DTD's. As the font tag doesnt work with any strict DTD's.

adfa

9:03 am on Dec 6, 2007 (gmt 0)

10+ Year Member



thank you so much for your help.
it all works now :)
you're a star and have saved me much work!
x

adfa

6:06 am on Dec 7, 2007 (gmt 0)

10+ Year Member



hmmm.
no, got another problem. i can't find something to replace the p-style in the echo statement. this gives a relative space above and below the outputted text and this throws my formatting out. what can i replace the p-style with so that the lettering will be flush against the div?

PHP_Chimp

8:15 am on Dec 7, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Most block elements have some form of inbuilt formatting within the browsers. So there are usually margin, border and/or padding attributes set automatically by the browser.

Seeing as you are now getting into a long list of CSS you may well be better assigning an id to this <p> tag then applying the CSS to this id.
To apply CSS to an id you need to use -

p#my_id {border: 0; margin 0; padding 0;}

This code can go in the header of your page, or if you are attaching the style sheet then you can put this code into the external sheet. Or you can just add these tags to the style: attribute that you are already setting. If you are adding to the style attribute then you just need the code between the {}'s.

adfa

7:42 am on Dec 12, 2007 (gmt 0)

10+ Year Member



hi again.
almost done with this thing now!
i'm trying, now, to have the background change dynamically, depending on what the user selects in the form.
the idea is the user will select font, colour, etc for their personalised swim trunks on the form and this will be displayes on the webpage.
could someone tell me the correct code for doing this within a div.
so the user selects 'black' as the trunk colour on the form and the colour of the trunks turns black.
i have a png of the trunks with the middle being transparent. i reckon changing the background colour of the div behind (which is the same size as the trunks div) will do the trick.
many thanks