Member Avatar for Niloofar24

Hello.
Is there any other way for not using the submit button?

<?php

$user_choice = $_POST['font_styles'];

if ($user_choice == "font_style_1"){
    $font = 'firstfont';
}elseif ($user_choice == "font_style_2"){
    $font = 'secondfont';
}elseif ($user_choice == "font_style_3"){
    $font = 'thiredfont';
}elseif ($user_choice == "font_style_4"){
    $font = 'forthfont';
}

?>

<html>
<head>
<style>

h1 {
font-family = $font;
}

</style>
</head>
<body>

    <form method='post'>
    <select name="font_styles">
    <option value="font_style_1">font_style_1</option>
    <option value="font_style_2">font_style_2</option>
    <option value="font_style_3">font_style_3</option>
    <option value="font_style_4">font_style_4</option>
    </select>
    <input type="submit">
    </form>

    <h1>username</h1>

 </body>
 </html>

I want when a user opens the drop-down menu and chooses an option, the font of the <h1> tag changes and the user can see his/her name in that font to see if he/she wants to save changes or choose an other font.
But I dn't want any submit button to be there, I want the font of the <h1> tag changes just by selecting a drop-down option. Is it possible?

Edited by Niloofar24
  • 5 Contributors
  • 7 Replies
  • 428 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Niloofar24
Member Avatar for Vivek_13

just submit ur form on onchange evant...
<select name="font_styles" onchange="this.form.submit()">

Member Avatar for Niloofar24

Well, there is a problem, this is my code for now:

<html>
<head>
<style>
#main-font {
width: 300px;
height: 120px;
background-color: white;
opacity: 0.2;
border-radius: 20px;
box-shadow: 0px 0px 10px black;
margin-left: 470px;
margin-top: -500px;
}

#font {
width: 250px;
height: 100px;
margin-left: 505px;
margin-top: -105px;
position: absolute;
}

#font option{
width: 200px;
}

p {
font-family = $font;
}

@font-face {
font-family: ArchitectsDaughter;
src: url(fonts/ArchitectsDaughter.ttf);
}

@font-face {
font-family: Armata-Regular;
src: url(fonts/Armata-Regular.otf);
}

@font-face {
font-family: DJB-Ms-Rachel;
src: url(fonts/DJB-Ms-Rachel.otf);
}

@font-face {
font-family: EncodeSansNarrow-Thin;
src: url(fonts/EncodeSansNarrow-Thin.ttf);
}
</style>

<script>
$("select#fChange").change(function(){
    var font = $(this ).val();
    $("#uName").attr("style", "font-family: " + font);
});
</script>

</head>
<body>

<div id="main-font"></div>

<div id="font">
Choose your font:<br>
<form method='post'>
<select name="font_styles" id="fChange">
  <option>choose font</option>
  <option value="ArchitectsDaughter.ttf">ArchitectsDaughter.ttf</option>
  <option value="Armata-Regular.otf">Armata-Regular.otf</option>
  <option value="DJB-Ms-Rachel.otf">DJB-Ms-Rachel.otf</option>
  <option value="EncodeSansNarrow-Thin.ttf">EncodeSansNarrow-Thin.ttf</option>
</select>
<input type="submit" name="font_submit">
</form>
<center><p id="uName">niloofar</p></center>
</div>


<?php
if(isset($_POST['font_submit'])) {

$user_choice = $_POST['font_styles'];

if ($user_choice == "ArchitectsDaughter.ttf"){
$font = 'ArchitectsDaughter';
}elseif ($user_choice == "Armata-Regular.otf"){
$font = 'Armata-Regular';
}elseif ($user_choice == "DJB-Ms-Rachel.otf"){
$font = 'DJB-Ms-Rachel';
}elseif ($user_choice == "EncodeSansNarrow-Thin.ttf"){
$font = 'EncodeSansNarrow-Thin';
}
}
?>

</body>
</html>

Now when i choose a font and click the submit button, nothing happens, just the option of the drop-down menu changes to "choose font"!!! Why?!

Edited by Niloofar24
Member Avatar for pixelsoul

I agree with Diafol completely, loading the fonts dynamically would be the optimal approach, especially if you plan on having a large number of fonts to select from.

The reason the form drop down goes back to the default, and does not default to the font the user has selected, there is no logic anywhere that tells the drop down menu otherwise. You could use jQuery to do this, if it could get the font being used from the DOM,or possibly the font-family name from PHP if it's being stored somewhere.

Also, to use jQuery, you must include the jQuery library on the page.
You can download the library from jquery.com and host it yourself, or you can use a cdn for dev if you want like:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Also, the option values should be the font-family name, not the font file name (i.e. Armata-Regular not Armata-Regular.otf).

The following also will not work

p {
    font-family = $font;
}

You need to wrap the PHP variable in PHP tags.

#uName {
    font-family: <?php echo $font; ?>;
}

But this also won't work either, since the variable does not get set before you're attempting to call it on the page.
Ideally, you would save the font-family selection to a database and then pull that name from the database on page load.

The jQuery code I provided was nothing more than a nice touch to show a user the font preview without needing a page reload to display.
To have this all work correctly, there's a number of other pieces that would need to be added.

Edited by pixelsoul
Member Avatar for Gideon_1

I will use ajax and php with to asynchronously to display the username if there is a match in my database

Member Avatar for Niloofar24

Would you please help me more clear? I don't know what to do exactly yet.
I don't want to use many font style just less than 8!

Edited by Niloofar24
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.