Html javascript Submit different form same data type, 2 buttons

Question

Ok, so this is a bit confusing to explain but basically, I am creating a checkout page which users can either choose "delivery" or "Pickup", once chosen it 'unhides' the corresponding form which once filled out will send data to the next page. The problem is that I want to use the same id's for both forms but just add an address to the delivery one but it seems like it will only take data from the first/top form which is the takeaway-

function Delivery1() {
  var x = document.getElementById("Pickup");
  var y = document.getElementById("Delivery");
  var w = document.getElementById("btn1");
  var z = document.getElementById("btn2");

  if (y.style.display === "none") {
    x.style.display = "none";
    y.style.display = "block";
    w.style.backgroundColor = "#b20c0c";
    z.style.backgroundColor = "#cc1400";
  } else {
    y.style.display = "none";

  }
}


function Pickup1() {
  var y = document.getElementById("Delivery");
  var x = document.getElementById("Pickup");
  var w = document.getElementById("btn1");
  var z = document.getElementById("btn2");
  if (x.style.display === "none") {
    x.style.display = "block";
    y.style.display = "none";
    z.style.backgroundColor = "#b20c0c";
    w.style.backgroundColor = "#cc1400";

  } else {
    z.style.backgroundColor = "#cc1400";
    x.style.display = "none";

  }
}

<center>
  <button id="btn1" onclick="Delivery1()" class="btn" style="height:90px; width: 180px">Delivery</button>
  <button id="btn2" onclick="Pickup1()" class="btn" style="height:90px; width: 180px">Pickup</button>
</center>

<div id="Pickup" style="display: none;">
  <form action="order.html" method="post" id="checkout-order-form">


    <fieldset id="fieldset-billing">
      <legend>Pickup</legend>
      <div>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" data-type="string" data-message="This field cannot be empty" />
      </div>
      <div>
        <label for="email">Phone Number</label>
        <input type="text" name="email" id="email" data-type="expression" data-message="Not a valid phone address" />
      </div>

      <div>
        <label for="country">Select Store</label>
        <select name="country" id="country" data-type="string" data-message="This field cannot be empty">
          <option value="">None</option>
          <option value="Leopold">Leopold</option>

        </select>


    </fieldset>
    <p><input type="submit" id="submit-order" value="Submit" class="btn" /></p>
    </div>
  </form>



  <div id="Delivery" style="display: none;">

    <form action="order.html" method="post" id="checkout-order-form">

      <fieldset id="fieldset-shipping">

        <legend>Delivery</legend>

        <div>
          <label for="name">Name</label>
          <input type="text" name="name" id="name" data-type="string" data-message="This field cannot be empty" />
        </div>
        <div>
          <label for="email">Phone Number</label>
          <input type="text" name="email" id="email" data-type="expression" data-message="Not a valid phone number" />
        </div>

        <div>
          <label for="address">Address</label>
          <h3>(Must be in or in neighbouring suburbs of leopold no more than 10km)</h3>
          <input type="text" name="address" id="address" data-type="string" data-message="This field cannot be empty" />
        </div>


      </fieldset>

      <p><input type="submit" id="submit-order" value="Submit" class="btn" /></p>
  </div>
  </form>
</div>



</div>

<footer id="site-info">
  Copyright &copy; Fu Chinese
</footer>

If its needed i can post the javascript form but its quite long. If anyone can help me with a solution or easier way to do this that would be great. Thanks :)

Marlon Assef · Accepted Answer · 2018-07-20 00:41:07Z

2

You cannot have more than one element with the same Id.

The purpose of the ID is to identify elements on page, therefore, you can have only one element per ID.

You can have multiple elements with the same "name" but not with the same ID.

To solve your problem, do the following:

Put a different ID for each form.
Put the attribute form in the input tag in your form.

Form 1:

<form action="order.html" method="post" id="checkout-order-form-billing">

<input type="submit" id="submit-order" value="Submit" class="btn" form="checkout-order-form-billing" />

Form 2:

<form action="order.html" method="post" id="checkout-order-form-shipping">

<input type="submit" id="submit-order" value="Submit" class="btn" form="checkout-order-form-shipping" />

This way, the input tag knows which form to submit.

Hope it helps.

edited Jul 20, 2018 at 0:41

answered Jul 19, 2018 at 23:56

Marlon Assef

1,57118 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

RedstoneMaina Over a year ago

I tried having it such as "sEmail" for one of the forms and even tried to add it to the data area ` var html = "<div class='detail'>"; html += "<h2>Billing and Shipping</h2>"; html += "<ul>"; html += "<li>" + name + "</li>"; html += "<li>" + email + "</li>"; html += "<li>" + country + "</li>"; html += "<li>" + address + "</li>"; html += "</ul></div>";` but it still favors the pickup form

Marlon Assef Over a year ago

@RedstoneMaina. I updated the answer and put a code example.

RedstoneMaina Over a year ago

Ah makes sense, but when it gets to this.$.... = this.$element.find("...") can they have the same value? if not will I have to change/duplicate all items that refer to the this.$... I.e ` this.$checkoutOrderForm = this.$element.find( "#checkout-order-form-shipping" ); this.$checkoutOrderForm = this.$element.find( "#checkout-order-form-billing" ); `

Marlon Assef Over a year ago

@RedstoneMaina Assuming you are trying to get the form element via javascript/jQuery you have to specify the form ID, so if you want to get the #checkout-order-form-shipping form you have to use the this.$element.find( "#checkout-order-form-shipping" ); and if you want the #checkout-order-form-billing use this.$element.find( "#checkout-order-form-billing" ); .

Collectives™ on Stack Overflow

Html javascript Submit different form same data type, 2 buttons

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related