Question

无法使用javascript方法中的提交方法提交表单＆amp; onclick事件
在按钮元素上甚至尝试使用表单标记中的onsubmit事件。需要不提交详细信息的原因。您可以复制代码＆amp;运行它更多清晰度。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript">`enter code here`
      function validateForm(form) {
          if (validateNames(form['hallticket'], form['hallticket_help']) && validateNames(form['firstname'], form['firstname_help'])) {
              form.submit();// Form is not getting submit
          }
          else {
              alert("Please Enter the Required Fields");

          }
      }

      function validateNonEmpty(inputField, helpText) {
          return validateRegex(/.+/, inputField.value, helpText, "please Enter a value");
      }

      function validateRegex(regex, input, helpText, helpMessage) {
          if (!regex.test(input)) {
              //Data is mismatched
              if (helpText != null) {
                  helpText.innerHTML = helpMessage;
                  return false;
              }
          }
          else {
              if (helpText != null)
              //data is matched
                  helpText.innerHTML = "";
              return true;
          }
      }

      function validateHallticket(inputField, helpText) {
          if (!validateNonEmpty(inputField, helpText)) {
              return false;
          }
          else 
              return validateRegex(/^\d{2}K91A\d{4}$/, inputField.value, helpText, "Enter valid Hallticket");
      }

      function validateNames(inputField, helpText) {
          // see that input data is non empty
          if (!validateNonEmpty(inputField, helpText)) {
              return false;
          }
          else 
              return validateRegex(/.+/, inputField.value, helpText, "Please Enter only Alphabets");
      }
    </script>
    <link rel="StyleSheet" href="test1.css" type="text/css"></link>
  </head>
  <body>
    <center>
      <font face="Arabic Transparent" size="6" color="Teal">4cUBeS College</font>
    </center>

    <br></br>

    <br></br>

    <form method="post" action="servlet.do" name="myform">
      <table border="1">
        <tr>
          <td>
            HallTicket: 
            <input type="text" name="hallticket" id="hallticket"
                   onblur="validateHallticket(this,document.getElementById('hallticket_help'))"></input>

            <span id="hallticket_help" class="helpcss"> </span>
          </td>
        </tr>

        <tr>
          <td>
            FirstName: 
            <input type="text" name="firstname" id="firstname"
                   onblur="validateNames(this,document.getElementById('firstname_help'))"></input>

            <span id="firstname_help" class="helpcss"> </span>
          </td>
          <td>
            LastName: 
            <input type="text" name="lastname" id="lastname"
                   onblur="validateNames(this,document.getElementById('lastname_help'))"></input>

            <span id="lastname_help" class="helpcss"> </span>
          </td>
        </tr>
      </table>
      <center>
        <input type="button" value="SUBMIT" onclick="validatForm(this.form)"></input>
      </center>
    </form>
  </body>
</html>

Answer 1

请检查您在onclick中调用的函数的拼写，拼写错误为'validatForm'而不是'validateForm'

Answer 2

这解决了很多问题

DEMO

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript">
function validateNonEmpty(inputField, helpTextId) {
  var helpText = document.getElementById(helpTextId);
  return validateRegex(/.+/, inputField.value, helpText, "please Enter a value");
}

function validateRegex(regex, input, helpText, helpMessage) {
  if (regex.test(input)) {
      if (helpText != null) {
        helpText.innerHTML = "";
      }    
      return true;
  }
  //Data is mismatched
  if (helpText != null) {
    helpText.innerHTML = helpMessage;
  }    
  return false;
}

function validateHallticket(inputField, helpText) {
  if (!validateNonEmpty(inputField, helpText)) {
    return false;
  }
  return validateRegex(/^\d{2}K91A\d{4}$/, inputField.value, helpText, "Enter valid Hallticket");
}

function validateNames(inputField, helpText) {
  // see that input data is non empty
  if (!validateNonEmpty(inputField, helpText)) {
    return false;
  }
  return validateRegex(/.+/, inputField.value, helpText, "Please Enter only Alphabets");
}

window.onload=function() {
  document.getElementById("myform").onsubmit=function() {

    if (validateNames(this['hallticket'], 'hallticket_help') &&
        validateNames(this['firstname'], 'firstname_help')  &&
        validateNames(this['lastname'], 'lastname_help')) {
      return true;
    }

    alert("Please Enter the Required Fields");
    return false; // cancel submit
  }
}
    </script>
    <link rel="StyleSheet" href="test1.css" type="text/css"></link>
  </head>
  <body>
    <center>
      <font face="Arabic Transparent" size="6" color="Teal">4cUBeS College</font>
    </center>

    <br></br>

    <br></br>

    <form method="post" action="servlet.do" name="myform" id="myform">
      <table border="1">
        <tr>
          <td>
            HallTicket: 
            <input type="text" name="hallticket" id="hallticket"
                   onblur="validateHallticket(this,'hallticket_help')" />

            <span id="hallticket_help" class="helpcss"> </span>
          </td>
        </tr>

        <tr>
          <td>
            FirstName: 
            <input type="text" name="firstname" id="firstname"
                   onblur="validateNames(this,'firstname_help')" />

            <span id="firstname_help" class="helpcss"> </span>
          </td>
          <td>
            LastName: 
            <input type="text" name="lastname" id="lastname"
                   onblur="validateNames(this,'lastname_help')" />

            <span id="lastname_help" class="helpcss"> </span>
          </td>
        </tr>
      </table>
      <center>
        <input type="submit" value="SUBMIT" />
      </center>
    </form>
  </body>
</html>

Answer 3

除了代码中已经存在的问题之外，还有一个问题。您的按钮提交输入标记是： <input type="button" value="SUBMIT" onclick="validatForm(this.form)"></input>

必须是： <input type="submit" value="SUBMIT" onclick="validateForm(this.form)"/>

无法使用javascript方法中的submit（）提交表单

3 个答案: