-1

I am gathering customer data from a web app - however once data is input the data displays in the URL search bar and I am just wondering about how to prevent that from happening?

here is my current code:

<form>
<div class="row">
    <div class="col-75">
      <div class="container">
        <form action="/action_page.php", method="POST">
  
          <div class="row">
            <div class="col-50">
              <h3>Billing Address</h3>
              <label for="fname"><i class="fa fa-user"></i> Full Name</label>
              <input type="text" id="fname" name="firstname" placeholder="John M. Doe">
              <label for="email"><i class="fa fa-envelope"></i> Email</label>
              <input type="text" id="email" name="email" placeholder="john@example.com">
              <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
              <input type="text" id="adr" name="address" placeholder="1234 Example Street, Richmond">
              <label for="city"><i class="fa fa-institution"></i> Suburb</label>
              <input type="text" id="city" name="city" placeholder="Melbourne">
  
              <div class="row">
                <div class="col-50">
                  <label for="state">State</label>
                  <input type="text" id="state" name="state" placeholder="Victoria">
                </div>
                <div class="col-50">
                  <label for="postcode">Post Code</label>
                  <input type="text" id="postcode" name="postcode" placeholder="3934">
                </div>
              </div>
            </div>
  
            <div class="col-50">
              <h3>Payment</h3>
              <label for="fname">Accepted Cards</label>
              <div class="icon-container">
                <i class="fa fa-cc-visa" style="color:navy;">Visa</i>
                <i class="fa fa-cc-amex" style="color:blue;">Amex</i>
                <i class="fa fa-cc-mastercard" style="color:red;">Mastercard</i>
              </div>
              <label for="cname">Name on Card</label>
              <input type="text" id="cname" name="cardname" placeholder="John More Doe">
              <label for="ccnum">Credit card number</label>
              <input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444">
              <label for="expmonth">Exp Month</label>
              <input type="text" id="expmonth" name="expmonth" placeholder="September">
  
              <div class="row">
                <div class="col-50">
                  <label for="expyear">Exp Year</label>
                  <input type="text" id="expyear" name="expyear" placeholder="2018">
                </div>
                <div class="col-50">
                  <label for="cvv">CVV</label>
                  <input type="text" id="cvv" name="cvv" placeholder="352">
                </div>
              </div>
            </div>
  
          </div>
          <label>
            <input type="checkbox" checked="checked" name="sameadr"> Shipping address same as billing
          </label>
          <input type="submit" value="Continue to checkout" class="btn">
        </form>
      </div>
    </div>
.row { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap; margin: 0 -16px; } .col-25 { -ms-flex: 25%; /* IE10 */ flex: 25%; } .col-50 { -ms-flex: 50%; /* IE10 */ flex: 50%; } .col-75 { -ms-flex: 75%; /* IE10 */ flex: 75%; } .col-25, .col-50, .col-75 { padding: 0 16px; } .container { background-color: #f2f2f2; padding: 5px 20px 15px 20px; border: 1px solid lightgrey; border-radius: 3px; } input[type=text] { width: 100%; margin-bottom: 20px; padding: 12px; border: 1px solid #ccc; border-radius: 3px; } label { margin-bottom: 10px; display: block; } .icon-container { margin-bottom: 20px; padding: 7px 0; font-size: 24px; } .btn { background-color: #04AA6D; color: white; padding: 12px; margin: 10px 0; border: none; width: 100%; border-radius: 3px; cursor: pointer; font-size: 17px; } .btn:hover { background-color: #45a049; } span.price { float: right; color: grey; } /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (and change the direction - make the "cart" column go on top) */ @media (max-width: 800px) { .row { flex-direction: column-reverse; } .col-25 { margin-bottom: 20px; } }

Any help would be really appreciated :)

ilias-sp
  • 6,135
  • 4
  • 28
  • 41
Poppy
  • 35
  • 4

1 Answers1

0

You have an unnecessary <form> tag on the first line of your HTML and you are missing a closing </div> tag at the end. Changing this seems to resolve the issue:

<div class="row">
  <div class="col-75">
    <div class="container">
      <form action="/action_page.php" , method="POST">

        <div class="row">
          <div class="col-50">
            <h3>Billing Address</h3>
            <label for="fname"><i class="fa fa-user"></i> Full Name</label>
            <input type="text" id="fname" name="firstname" placeholder="John M. Doe">
            <label for="email"><i class="fa fa-envelope"></i> Email</label>
            <input type="text" id="email" name="email" placeholder="john@example.com">
            <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
            <input type="text" id="adr" name="address" placeholder="1234 Example Street, Richmond">
            <label for="city"><i class="fa fa-institution"></i> Suburb</label>
            <input type="text" id="city" name="city" placeholder="Melbourne">

            <div class="row">
              <div class="col-50">
                <label for="state">State</label>
                <input type="text" id="state" name="state" placeholder="Victoria">
              </div>
              <div class="col-50">
                <label for="postcode">Post Code</label>
                <input type="text" id="postcode" name="postcode" placeholder="3934">
              </div>
            </div>
          </div>

          <div class="col-50">
            <h3>Payment</h3>
            <label for="fname">Accepted Cards</label>
            <div class="icon-container">
              <i class="fa fa-cc-visa" style="color:navy;">Visa</i>
              <i class="fa fa-cc-amex" style="color:blue;">Amex</i>
              <i class="fa fa-cc-mastercard" style="color:red;">Mastercard</i>
            </div>
            <label for="cname">Name on Card</label>
            <input type="text" id="cname" name="cardname" placeholder="John More Doe">
            <label for="ccnum">Credit card number</label>
            <input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444">
            <label for="expmonth">Exp Month</label>
            <input type="text" id="expmonth" name="expmonth" placeholder="September">

            <div class="row">
              <div class="col-50">
                <label for="expyear">Exp Year</label>
                <input type="text" id="expyear" name="expyear" placeholder="2018">
              </div>
              <div class="col-50">
                <label for="cvv">CVV</label>
                <input type="text" id="cvv" name="cvv" placeholder="352">
              </div>
            </div>
          </div>

        </div>
        <label>
          <input type="checkbox" checked="checked" name="sameadr"> Shipping address same as billing
        </label>
        <input type="submit" value="Continue to checkout" class="btn">
      </form>
    </div>
  </div>
</div>

(Note: my editor may have formatted your code differently to the original question)

Oliver Jane
  • 164
  • 1
  • 12