时间戳

首页 > 解决方案 > 为什么我不能有两个提供不同功能的提交按钮？

javascript - 为什么我不能有两个提供不同功能的提交按钮？

问题描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="scripts/apply.js"></script>
    <script src="scripts/jobs.js"></script>
    <script src="scripts/enhancements.js"></script>
    <meta charset="UTF-8">
    <title>SwinTech</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body class="applypage">
    <header>
      <div class="main">
        <div class="logo">
          <img src="logo.png" alt="logo">
        </div>
        <ul>
          <li>
            <a href="index.html">Home</a>
          </li>
          <li>
            <a href="jobs.html">Jobs</a>
          </li>
          <li class="active">
            <a href="apply.html">Apply</a>
          </li>
          <li>
            <a href="about.html">About</a>
          </li>
          <li>
          <a href="enhancements2.html">Enhancements</a></li>
        </ul>
      </div>
    </header>
  <section class="applything">
<h2> Warning: you have 3 minutes to fill out the form before being redirected back to previous page </h2>
<br>
    <h2>Job application:</h2>
    <br>
    <div class="containerr">
      <form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform">
        <p>Your Name: <span id="job1"></span></p>
        
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="firstname" placeholder="Your name.." required="required" maxlength="25" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)">


        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lastname" placeholder="Your last name.." required="required" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)">

   <label for="start">Date of birth:</label>
    <input type="date" id="start" required="required" name="date of birth" value="2021-10-04" />
        <br>
        <br>
        <label for="gender"> Select you gender</label>
        <br>
        <br>
        <select name="gender" id="gender" required="required">
          <option value="" selected>Please Select</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
        <br>
        <label for="streetname">Street Address</label>
        <input type="text" id="streetname" name="streetname" required="required" placeholder="Your street name..." maxlength="40" />
        <label for="suburb">Suburb/Town</label>
        <input type="text" id="suburb" name="suburb" required="required" placeholder="Your suburb/town..." maxlength="40">
        <label for="state">Choose a state:</label>
        <br>
        <select name="state" id="state" required="required">
          <option value="">Please Select</option>
          <option value="VIC">VIC</option>
          <option value="NSW">NSW</option>
          <option value="QLD">QLD</option>
          <option value="NT">NT</option>
          <option value="WA">WA</option>
          <option value="SA">SA</option>
          <option value="TAS">TAS</option>
          <option value="ACT">ACT</option>
        </select>
        <br>
        <br>
        <label for="postcode">Postcode</label>
        <input type="text" id="postcode" name="postcode" required="required" placeholder="Your postcode..." maxlength="4" minlength="4" pattern="^[0-9]{4}$">
        <label for="email">Email Address</label>
        <input type="text" id="email" name="emailadd" placeholder="Your email address.." required="required">
        <label for="phone">Phone Number</label>
        <input type="text" id="phone" name="phonenumb" placeholder="e.g. 0451124561" minlength="8" maxlength="12" required="required">
        <br>
        <label>Skills</label>
        <br>
        <br>
        <input type="checkbox" id="skill" name="skill1" value="Javascript">
        <label for="skill1"> Extensive knowledge of Javascript</label>
        <br>
        <br>
        <input type="checkbox" id="skill" name="skill2" value="Python">
        <label for="skill2"> Extensive knowledge of Python</label>
        <br>
        <br>
        <input type="checkbox" id="skill" name="skill3" value="Networking">
        <label for="skill3"> Extensive knowledge of Networking</label>
        <br>
        <br>
        <input type="checkbox" id="skill" name="skill4" value="Data Storage">
        <label for="skill4"> Extensive knowledge of Data storage fundamentals</label>
        <br>
        <br>
        <input type="checkbox" id="skill" name="skill5" value="Security Foundations">
        <label for="skill5"> Extensive knowledge of Security foundations</label>
        <br>
        <br>
        <input type="checkbox" id="skill" name="skill6" value="AWS Service Selection">
        <label for="skill6"> Extensive knowledge of AWS service selection</label>
        <br>
        <br>
        <input type="checkbox" id="skill" name="skill7" value="Teamwork">
        <label for="skill7"> Ability to work in a team</label>
        <br>
        <br>
        <input type="checkbox" id="skill" name="skill8" value="5+ Years">
        <label for="skill8"> 5+ years experience</label>
        <br>
        <br>
        <input type="checkbox" id="skill" name="skill9" value="10+ Years">
        <label for="skill9"> 10+ years experience</label>
        <br>
        <br>
        <input type="checkbox" id="skill" name="skill10" value="20+ Years">
        <label for="skill10"> 20+ years experience</label>
        <br>
        <br>
        <input
    type="checkbox"
    id="other"
    name="other"
    value="other"
    onclick="otherCheckBox()"
  />
        <label for="other"> I have other skills. Please list other skills below.</label>
        <br>
        <br>
        <br>
        <label for="subject">Subject:</label>
        <textarea id="otherbox" name="other skill" placeholder="textarea" style="height:200px"></textarea>

        <input type="submit" value="Apply">
        <br>
        <br>
        <input type="button" id="cancelpurchase" value="Cancel Application"></input>
      </form>
    </div>
  </section>
  <div class="footer">
    <div class="footer-content"></div>
    <div class="footer-bottom"></div> &copy; swintech.com | Designed by Bilal El-leissy
  </div>
</body>
</html>

"use strict"

function otherCheckBox() {
    var checkBox = document.getElementById("other");  //Getting the 'other' CheckBox
    var otherBox = document.getElementById("otherbox");  //Getting the TextBox
    if (checkBox.checked) {
      otherBox.required = "true"; //Setting the 'required' parameter to true if checkbox is checked
    } else {
      otherBox.required = "";  //Setting the 'required' parameter to false if the checkbox is not checked
    }
  }


function validate() {
  var errMsg = "";
  var result = true;

var gender = document.getElementById("gender").value;
var start = document.getElementById("start").value;
var skill = document.getElementById("skill").value;
var other = document.getElementById("other").value;
var otherbox = document.getElementById("otherbox").value;

  var postcode = document.getElementById("postcode").value;
  var state = document.getElementById("state").options[
document.getElementById("state").selectedIndex
  ].text;

  var regex;
  //VIC = 3 OR 8, NSW = 1 OR 2 ,QLD = 4 OR 9 ,NT = 0 ,WA = 6 ,SA=5 ,TAS=7 ,ACT= 0.
  switch (state) {
case "Please Select":
  return false;
case "VIC":
  regex = new RegExp(/(3|8)\d+/);
  break;
case "NSW":
  regex = new RegExp(/(1|2)\d+/);
  break;
case "QLD":
  regex = new RegExp(/(4|9)\d+/);
  break;
case "NT":
  regex = new RegExp(/0\d+/);
  break;
case "WA":
  regex = new RegExp(/6\d+/);
  break;
case "SA":
  regex = new RegExp(/5\d+/);
  break;
case "TAS":
  regex = new RegExp(/7\d+/);
  break;
case "ACT":
  regex = new RegExp(/0\d+/);
  break;
  }
  if (!postcode.match(regex)) {
errMsg = errMsg + "State and postcode do not match\n";
result = false;
  }

  if (errMsg) {
alert(errMsg);
  }

  if (result) {
storeBooking(
  fname,
  lname,
  start,
  email,
  gender,
  phone,
  streetname,
  suburb,
  state,
  postcode,
  other,
  otherbox
);
  }
  return result;
}

function storeBooking(
  fname,
  lname,
  start,
  email,
  gender,
  phone,
  streetname,
  suburb,
  state,
  postcode,
  skill,
  other,
  otherbox
) {
  sessionStorage.fname = fname;
  sessionStorage.lname = lname;
  sessionStorage.start = start;
  sessionStorage.email = email;
  sessionStorage.gender = gender;
  sessionStorage.phone = phone;
  sessionStorage.streetname = streetname;
  sessionStorage.suburb = suburb;
  sessionStorage.state = state;
  sessionStorage.postcode = postcode;
  sessionStorage.skill = skill;
  sessionStorage.other = other;
  sessionStorage.otherbox = otherbox;
}

function getBooking() {
  if (sessionStorage.fname != undefined) {
    document.getElementById("confirm_fname").textContent = sessionStorage.fname;
    document.getElementById("confirm_lname").textContent = sessionStorage.lname;
    document.getElementById("confirm_email").textContent = sessionStorage.email;
    document.getElementById("confirm_gender").textContent = sessionStorage.gender;
    document.getElementById("confirm_phone").textContent = sessionStorage.phone;
    document.getElementById("confirm_start").textContent = sessionStorage.start;
    document.getElementById("confirm_streetname").textContent = sessionStorage.streetname;
    document.getElementById("confirm_suburb").textContent = sessionStorage.suburb;
    document.getElementById("confirm_state").textContent = sessionStorage.state;
    document.getElementById("confirm_postcode").textContent = sessionStorage.postcode;
    document.getElementById("confirm_skill").textContent = sessionStorage.skill;
    document.getElementById("confirm_other").textContent = sessionStorage.other;
    document.getElementById("confirm_otherbox").textContent = sessionStorage.otherbox;
    
    
    document.getElementById("a_fname").value = sessionStorage.fname;
    document.getElementById("a_lname").value = sessionStorage.lname;
    document.getElementById("a_email").value = sessionStorage.email;
    document.getElementById("a_gender").value = sessionStorage.gender;
    document.getElementById("a_phone").value = sessionStorage.phone;
    document.getElementById("a_start").value = sessionStorage.start;
    document.getElementById("a_streetname").value = sessionStorage.streetname;
    document.getElementById("a_suburb").value = sessionStorage.suburb;
    document.getElementById("a_state").value = sessionStorage.state;
    document.getElementById("a_postcode").value = sessionStorage.postcode;
    document.getElementById("a_skill").value = sessionStorage.skill;
    document.getElementById("a_other").value = sessionStorage.other;
    document.getElementById("a_otherbox").value = sessionStorage.otherbox;
  }
 }

function prefillcard()
{ 
  document.getElementById("fname").value =  sessionStorage.fname;
  document.getElementById("lname").value =  sessionStorage.lname;
  document.getElementById("email").value =  sessionStorage.email;
  document.getElementById("gender").value =  sessionStorage.gender;
  document.getElementById("phone").value =  sessionStorage.phone;
  document.getElementById("start").value =  sessionStorage.start;
  document.getElementById("streetname").value =  sessionStorage.streetname;
  document.getElementById("suburb").value =  sessionStorage.suburb;
  document.getElementById("state").value =  sessionStorage.state;
  document.getElementById("postcode").value =  sessionStorage.postcode;
  document.getElementById("skill").value =  sessionStorage.skill;
  document.getElementById("other").value =  sessionStorage.other;
  document.getElementById("otherbox").value =  sessionStorage.otherbox;
}

window.addEventListener("DOMContentLoaded", prefillcard);

function init() {
  var regForm = document.getElementById("regform");

  regForm.onsubmit = validate;
}


window.onload = function() {
  init();
  var date = new Date();
  var dd = date.getDate();
  var mm = date.getMonth() + 1;
  var yyyy = date.getFullYear();

  //Add a zero if one Digit (eg: 05,09)
  if (dd < 10) {
    dd = "0" + dd;
  }

  //Add a zero if one Digit (eg: 05,09)
  if (mm < 10) {
    mm = "0" + mm;
  }

  var minYear = yyyy - 80; //Calculate Minimun Age (<80)
  var maxYear = yyyy - 15; //Calculate Maximum Age (>18)

  var min = minYear + "-" + mm + "-" + dd;
  var max = maxYear + "-" + mm + "-" + dd;

  document.getElementById("start").setAttribute("min", min);
  document.getElementById("start").setAttribute("max", max);

};

(function () { //Enhancement 1
    setTimeout(function () {
        history.back();
    }, 180000);
})();

function cancelBooking(){ //Enhancement 2
    window.location = "index.html";
  sessionStorage.clear();
}

function init() {
  document.getElementById("cancelpurchase").addEventListener("click", cancelBooking);
  getBooking();
}

我设置了一个带有提交和取消按钮的表单，提交按钮将所有输入的数据发送到服务器，取消按钮将用户发送到主页。由于某种原因，只能同时存在一个或另一个，不能共存。如果我的取消按钮被激活，我仍然可以提交到服务器并取消表单，但我的所有验证都不起作用。这两个单独的片段位于链接到相同 HTML 的两个单独的外部 JavaScript 文件中。

注意：没有 jQuery 或内联 JavaScript。

标签： javascripthtml

解决方案

问题是这两个按钮都有“提交”类型。

<input type="submit" value="Apply">
        <br>
        <br>
<input type="submit" id="cancelpurchase" value="Cancel Application"></input>

它会导致表单被提交（并onsubmit相应地触发事件）——这是任何浏览器的默认行为。

要解决此问题 -type="button"为您的取消按钮设置。

推荐阅读