Erel Nahum Erel Nahum - 2 months ago 11
Javascript Question

HTML and JS form, not working

I'm trying to build a website that will download fonts from fontbit (a Hebrew font company).
Here what I did:

<!DOCTYPE html>
<html>
<head>
<title>הורדת פונטים מפונטביט בחינם</title>
</head>
<body align="center">
<form name="form" onsubmit="return downloadFont()" method="post">
<span dir="rtl" align="center">שם הפונט באנגלית:</span><br>
<input type="text" name="name"><br><br>
<input align="left" type="radio" name="fonttype" value="regular">Regular<br>
<input align="left" type="radio" name="fonttype" value="bold">Bold<br><br>
<input type="submit" value="download">
</form>
<script>
function downloadFont() {
var fontName = document.form["form"]["name"].value;
var fontType= document.form["form"]["fonttype"].value;
function bold() {
var url = "http://fontface.co.il/fonts/"+fontName+"boldwebfont.eot";
window.location=url;
}
function regular() {
var url = "http://fontface.co.il/fonts/"+fontName+"regularwebfont.eot";
window.location=url;
}
if (fontType == regular) {
regular();
}
if (fontType==bold) {
bold();
}
else {
alert("error");
}
}

</script>
</body>
</html>


Im a beginner so maybe I did a huge mistake,
the problem is when i click dowload it should take me to a url.
but it's doing nothing.
(the hebrew text is "the font mame in english:")

Answer Source

You have several errors in your code. Just compare you code with this one then you will figure out what wrong you have done. Try this code:

<!DOCTYPE html>
<html>
<head>
<title>הורדת פונטים מפונטביט בחינם</title>
</head>
<body align="center">
<form name="form" onsubmit="return downloadFont()" method="post">
<span dir="rtl" align="center">שם הפונט באנגלית:</span><br>
<input type="text" name="name"><br><br>
<input align="left" type="radio" name="fonttype" value="regular">Regular<br>
<input align="left" type="radio" name="fonttype" value="bold">Bold<br><br>
<input type="submit" value="download">
</form>
<script>
function downloadFont() {
    var fontName = document.forms["form"]["name"].value;
    var fontType= document.forms["form"]["fonttype"].value;

  if (fontType == 'regular') {
    regular(fontName);
  }
  else if (fontType=='bold') {
    bold(fontName);
  }
  else {
    alert("error");
  }  
}
function bold(fontName) {
  var url = "http://fontface.co.il/fonts/"+fontName+"boldwebfont.eot";
  window.open(url, '_blank');
}
function regular(fontName) {
  var url = "http://fontface.co.il/fonts/"+fontName+"regularwebfont.eot";
  window.open(url, '_blank');
}

</script>
</body>
</html>

Maybe there's need a little modification on your url's.