Button leads me to another page

Question

so i've had some issues about getting a buy button up and running. Everytime i click on the "Buy now" button it leads me to the About us page. I really don't know what has gone wrong and i hope you can help me. Thank you guys

Emal

<style>
.Button {
    background-color: Plum;
    border: 1px solid;
 border-color: black;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
 font-family: hacked;
 border-radius: 8px;
 text-shadow: 2px 2px grey;
 
}

  .sub {
  position: relative;
}
.itmHolder {
  position: relative;
}

  
  
  .itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
  position: absolute;
  top: 0;
}
.og {
  margin-top: 50px;
  position: center;
  text-align: center;
}
h1 {
    font-size: 400%;
 color: Plum;
 text-shadow: 3px 3px Black;
}
body {  
    background-image: url("lightning.gif");
    background-repeat: no-repeat;
    -webkit-transform: rotateX(0);
    background-size: cover;
    background-position: center center;
   min-height: 100vh;
}
p  {
   color: Plum;
   text-shadow: 2px 2px Black;
}
h2 {
  color: DarkGreen;
  text-shadow: 2px 2px Black;
}

a:link, a:visited {
    color: black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
</style>

<!DOCTYPE html>
<html>
<head>
</head>
<font size=60><center><h1 style="font-family:blowbrush;">Buy now</font></center></h1><form action="side2.html">
<body background="background.jpg">
<title>Our Future</title>
  <div class="og">
  <div class="itmHolder">

  <div class="sub">
       <button type="button" class="Button"><a href="selve_websiten.html">Frontpage</a></button>
    <button type="button" class="Button"><a href="side2.html">About us</a></button>
    </div>
 <br></br>
 
 
 
 
<center><font size=6><p style="font-family:levirebrushed;">No Turning Back - Steam Code</font></p><h2 style="font-family:levirebrushed;"><font size=6> 1,99€</h2></font></center>


<form action="https://www.paypal.com/cgi-bin/webscr" method="post">

  <!-- Identify your business so that you can collect the payments. -->
  <input type="hidden" name="business" value="EmalGod@hotmail.com">

  <!-- Specify a Buy Now button. -->
  <input type="hidden" name="cmd" value="_xclick">

  <!-- Specify details about the item that buyers will purchase. -->
  <input type="hidden" name="item_name" value="No Turning Back - Steam Code">
  <input type="hidden" name="amount" value="1.99">
  <input type="hidden" name="currency_code" value="EUR">

  <!-- Display the payment button. -->
  <input type="image" name="submit" border="0"
  src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/btn_buynow_107x26.png"
  alt="Buy Now">
  <img alt="" border="0" width="1" height="1"
  src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >

</form>
  
  
  
  

</form></center>
</body>
</html>

Which is improperly nested inside a (I believe) deprecated `` tag? — yaakov, Jun 20 '17 at 23:40
Pretty old seems more like it. There just seems to be a lot of overlapping tags and its pretty messy all around. I'll try to fix it up and then you'll see if it works as it should. — yaakov, Jun 20 '17 at 23:41
@EmalGod if you're new to coding, you need better resources to learn. A lot of your code is deprecated and obsolete. — Michael Coker, Jun 20 '17 at 23:41
@GrayCygnus I'm assuming the "buy now" button is the `type="image"` button with `alt="Buy Now"` — Michael Coker, Jun 20 '17 at 23:42
https://jsfiddle.net/yak613/wvduta6z/, this should work right. Some of the problems aren't quite straightened out, but I'm not investing that much effort into this. — yaakov, Jun 20 '17 at 23:46
Thanks, but now it seems like i cant change the size of the h1 text — EmalGod, Jun 20 '17 at 23:53
Why do you have a `form` wrapping most of the page? Your paypal form is within that form, so it's not working. You can't have a form in a form. `
` - what's that for? — Michael Coker, Jun 20 '17 at 23:54

score 1 · Answer 1 · answered Jun 20 '17 at 23:59

<button> tags inside forms act as an <input type="submit">. The problem here is that you have <a> inside your <button>s. It’s up to browser implementation to decide what must happen in that case. In other words, that’s undefined behavior.

Now, you will certainly learn a lot by taking the following challenge: remove all <font> and <center> tags as well as style attributes from your HTML code, link a .css file using a <link> tag, and try to get as close as possible to the original appearance of your page with only style declarations in this external file. This question about <font> size CSS equivalents might help.

Believe me, it will help you a lot.

A `button` won't act as a submit button if you add a `type="button"` to it. — yaakov, Jun 22 '17 at 16:57

Michael Coker · Answer 2 · 2017-06-22T17:13:47.330

Your code is extremely invalid, but the main culprit here is this form <form action="side2.html"> - it wraps the majority of your page, including your paypal form.

A form element can not contain a form element.

https://www.w3.org/TR/html5/forms.html#the-form-element

Content model: Flow content, but with no form element descendants.

Either remove the form (since I don't see a use for it currently...), or only wrap it around elements that need to include it.

You should also run your code through a validator and clean up all of the invalid, incorrectly structured HTML.

.Button {
    background-color: Plum;
    border: 1px solid;
 border-color: black;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
 font-family: hacked;
 border-radius: 8px;
 text-shadow: 2px 2px grey;
 
}

  .sub {
  position: relative;
}
.itmHolder {
  position: relative;
}

  
  
  .itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
  position: absolute;
  top: 0;
}
.og {
  margin-top: 50px;
  position: center;
  text-align: center;
}
h1 {
    font-size: 400%;
 color: Plum;
 text-shadow: 3px 3px Black;
}
body {  
    background-image: url("lightning.gif");
    background-repeat: no-repeat;
    -webkit-transform: rotateX(0);
    background-size: cover;
    background-position: center center;
   min-height: 100vh;
}
p  {
   color: Plum;
   text-shadow: 2px 2px Black;
}
h2 {
  color: DarkGreen;
  text-shadow: 2px 2px Black;
}

a:link, a:visited {
    color: black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

<!DOCTYPE html>
<html>
<head>
</head>
<font size=60><center><h1 style="font-family:blowbrush;">Buy now</font></center></h1>
<body background="background.jpg">
<title>Our Future</title>
  <div class="og">
  <div class="itmHolder">

  <div class="sub">
       <button type="button" class="Button"><a href="selve_websiten.html">Frontpage</a></button>
    <button type="button" class="Button"><a href="side2.html">About us</a></button>
    </div>
 <br></br>
 
 
 
 
<center><font size=6><p style="font-family:levirebrushed;">No Turning Back - Steam Code</font></p><h2 style="font-family:levirebrushed;"><font size=6> 1,99€</h2></font></center>


<form action="https://www.paypal.com/cgi-bin/webscr" method="post">

  <!-- Identify your business so that you can collect the payments. -->
  <input type="hidden" name="business" value="EmalGod@hotmail.com">

  <!-- Specify a Buy Now button. -->
  <input type="hidden" name="cmd" value="_xclick">

  <!-- Specify details about the item that buyers will purchase. -->
  <input type="hidden" name="item_name" value="No Turning Back - Steam Code">
  <input type="hidden" name="amount" value="1.99">
  <input type="hidden" name="currency_code" value="EUR">

  <!-- Display the payment button. -->
  <input type="image" name="submit" border="0"
  src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/btn_buynow_107x26.png"
  alt="Buy Now">
  <img alt="" border="0" width="1" height="1"
  src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >

</form>
  
  
  
  

</center>
</body>
</html>

No point in going after the `center` and `font` tags, then :) — yaakov, Jun 22 '17 at 16:58

Button leads me to another page

` with that text

2 Answers2