Question

“提交”按钮正在刷新页面，这导致显示元素，我不想被显示。

我尝试使用了preventDefault（）函数，但随后它不提交表单。我尝试了一下，但是如果这样做，表单将提交，但是元素仍然显示。

$(".signupbtn").click(function(e){
    console.log("Sign up clicked");
    document.getElementsByClassName("huhu")[0].style.display = "none";
    document.getElementsByClassName("afterForm")[0].style.display = "block";
    e.preventDefault();
    console.log("Succes")
});


<!-- the output from the form -->
<div class="afterForm" >
    <h3 id="output"/>
</div>

<!-- the submiting -->

  <form class="modal-content" id="myForm" onsubmit="readForm()">
    <div class="container">
      <h1 >Order</h1>
      <p>Please fill in this form to receive your meal. Required fields: *</p>
      <hr>
      <label for="email"><b>Email*</b></label>
      <input type="text" placeholder="zyxzyx@domain.com" name="email" value="" required>

      <label for="adr1"><b>Adress* (Housenumber, Street, City)</b></label>
      <input type="text" placeholder="555, Zxy blvd, San zxy" name="adr1" value="" required>
      <label for="adr2"><b>Adress* (ZIP, State)</b></label>
      <input type="text" placeholder="00000, ZY" name="adr2" value="" required>
      <p>By pressing "Order" you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

      <div class="clearfix">
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
        <button type="submit" class="signupbtn" >Order</button>
      </div>
    </div>
  </form>


<!-- the ordering -->

<div class="huhu">
    <h1 class="ord">Select your order:</h1>
    <input onclick="firstIcon()" id="fIcon" type="image" src="https://dl.dropboxusercontent.com/s/kw6l23hm37kzqq8/sushi.png" />
    <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;vertical-align:middle" class="button">
        <span>Next Step </span>
    </button>
</div>


button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

.signupbtn {
  float: left;
  width: 50%;
}

除单击“订单”按钮后显示的“ huhu”类和显示“ afterForm”的类以外，我都没有。如果未填写表单，请单击“顺序”，然后取消，元素将隐藏但不显示。

除了preventDefault()之外，还有其他解决方案吗？还是比我想象的要容易的解决方案？

使用onsubmit（）隐藏类而不使用preventDefault（）

0 个答案: