点击后提交按钮停留在表单中

Question

enter image description here我想在点击提交按钮后停留在表单视图中 我有一个带按钮的导航栏：

<div class="bar blueGrey">
  <button class="bar-item button tablink orange" onclick="openNavBarChoise(event,'HomePage')">Home</button>
  <button class="bar-item button tablink" onclick="openNavBarChoise(event,'CVsPage')">CV</button>
  <button class="bar-item button tablink" onclick="openNavBarChoise(event,'ContactPage')">Contact</button>
</div>

Javascript 代码：

function openNavBarChoise(evt, choiceName) {
  var i, x, tablinks;
  x = document.getElementsByClassName('choice');
  for (i = 0; i < x.length; i++) {
    x[i].style.display = 'none';
  }
  tablinks = document.getElementsByClassName('tablink');
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(' orange', '');
  }
  document.getElementById(choiceName).style.display = 'block';
  evt.currentTarget.className += ' orange';
}

当有人点击按钮联系人时，请转到联系表。 点击提交后我想留在这个表单中，但是这段代码返回首页。

<!--/*************** Begin Contact Page ***************/-->
<div id="ContactPage" class="container border choice" style="display:none">
  <div class="panelChristos00">
      <div class="ImgFPanel">
          <img class="ImgPP" id="imgJob" src="Icons\contactSupport.png" alt="contactSupport" width="80px">
      </div>

      <div id="ergasia" class="firstLine">
          <h2>Form</h2>
      </div>

      <div class="container">


          <form id="form0" method="post" >

              <div class="requiredM00">
                  <p style="color:red"><?php echo $requiredMessage;?></p><p style="color:blue"><?php echo $completeMessage;?></p>
              </div>
              <label for="name">Name <span class="error" style="color:red">*<?php echo $nameErr;?></span></label>
              <input type="text" name="name" value="<?php echo $name;?>">

              <label for="email">Email <span class="error" style="color:red">* <?php echo $emailErr;?></span></label>
              <input type="text" name="email" value="<?php echo $email;?>">

              <label for="phone">Phone <span class="error" style="color:blue"> <?php echo $phoneErr;?></span></label>
              <input type="text" name="phone" value="<?php echo $phone;?>">

              <label for="subject">Message <span class="error" style="color:red">*<?php echo $subjectErr;?></span></label>
              <textarea id="subject" name="subject" style="height:200px"    ><?php echo $subject; ?></textarea>

              <input type="submit" value="Send">
          </form>
      </div>
  </div>
</div>

Answer 1

默认情况下，表单提交按钮将表单提交给自身以停止在表单提交按钮上使用 evt.preventdefault()

Answer 2

您想留在联系表单中并仍然发送表单，对吗？你需要使用 ajax 才能做到这一点。

将事件处理程序（在提交时）附加到表单并 preventDefault 事件以防止其默认行为（如返回主页）

var form_el = document.getElementById("form0");

form_el.addEventListener("submit", function(e) {
    e.preventDefault(); // this will prevent the page from going back to homepage

    var form  = new FormData(this);

    var XHR = new XMLHttpRequest();

    XHR.open("POST", "server.php", true);

    // response handler
    XHR.onload = function () {
     // do something with the response
      if (xhr.status === 200) {
        var userInfo = JSON.parse(xhr.responseText);
      }
    };

    XHR.send(form);
});

Answer 3

你可以这样做，它将带你到你想要的新标签

 <form action="your file name">
        <input type="text">
        <input onclick="e.preventDefault()" type="submit" formtarget="_blank">
 </form>