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
  • 442 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Niloofar24

Dani AI

Generated

Recommended approach: do the instant preview in the browser with JavaScript and use PHP only to save the final choice. JavaScript (or jQuery) can change the preview element’s font as soon as the user picks an item; submitting the form on change (as suggested) works too but forces a full reload and requires server logic to remember which option was chosen. For a smooth UX use client-side change handlers for preview and only persist the selection when the user explicitly saves (or via AJAX).

Practical steps to implement (no code shown here): 1) Declare each font with a CSS font-family name (either with @font-face or a hosted web font) and make the select option values equal those family names — don’t use raw file names as the value. 2) Add a change handler that reads the selected value and applies it to the preview element’s style or class so the name updates immediately. If you use jQuery, include the library before your script and run the handler after the DOM is ready. 3) To keep the choice after a reload, either persist it client-side (localStorage/cookie) or send it to the server (AJAX or form submit) and have PHP print the saved choice back into the rendered HTML when the page loads.

Troubleshooting and gotchas: if the page returns to the default option after submit it’s because the server-rendered HTML isn’t marking the submitted option as selected and/or the font-name wasn’t echoed into the stylesheet. Verify your server code sets the value before you output styles, and use proper CSS property syntax. For persistence via PHP, compare the posted value to each option when rendering and output the selected attribute for the match.

Performance tips: with fewer than eight fonts you can bundle them, but consider lazy/demand loading or using font-display to avoid slow page loads. Follow and on preview and dynamic-loading ideas, and consider ’s AJAX suggestion if you need server-side storage.

Recommended Answers

All 7 Replies

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.