Question

我正在使用Jscript编写表单验证，

但我不知道为什么我甚至无法通过onclick调用简单的警报功能。

这是我的代码的一部分

<html>
<head>
<title>Check</title>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script></head>

...

<form name="checkout" id="checkout" method="post" action="1.php">
<table align="center">
<tr>
<td>*Name</td>
<td><input type="text" name="name" id="name" size="40"/></td>
</tr>
<tr>
<td>*Phone</td>
<td><input type="text" name="phone" id="phone" size="40"/></td>
</tr>
<tr>
<td>*Address</td>
<td><textarea rows="4" cols="40" name="address"></textarea></td>
</tr>
</table>
<input type="button" value="Click me!" onclick="return displaymessage()" />
</form>
</html>

我认为该按钮应该是一个提交按钮

<input name="Submit" type="submit" value="Submit"onclick="return validate_form()"/>

但在我的测试中，即使是简单的“点击我！”按钮不起作用......会不会有人像之前那样反击过那样的问题？

Answer 1

这是一个可以使用的示例代码段。

逻辑应该是：

如果验证成功，函数validate_form应返回true;否则false。如果返回值为true，则会提交form。

var validate_form = function() {

  var allGood = true; // all good if validation is successful. 

  // check if name is valid
  allGood = document.querySelector("#name").value.length > 0;

  // do other validataions... and return whether all is good
  if (allGood) {
    console.log("We are okay to proceed");
  } else {
    console.log("Please make sure the form inputs are entered to proceed");
  }
  return allGood;
}

var action_form = function() {
  // validate form..
  var isFormValid = validate_form();

  // do other actions..
  // ... 

  // submit the form...
  if (isFormValid) {
    console.log("submitting the form...");
    document.querySelector("#checkout").submit();
  }
}

<form name="checkout" id="checkout" method="post" action="https://google.com">
  <table align="center">
    <tr>
      <td>*Name</td>
      <td>
        <input type="text" name="name" id="name" size="40" />
      </td>
    </tr>
    <tr>
      <td>*Phone</td>
      <td>
        <input type="text" name="phone" id="phone" size="40" />
      </td>
    </tr>
    <tr>
      <td>*Address</td>
      <td>
        <textarea rows="4" cols="40" name="address"></textarea>
      </td>
    </tr>
  </table>
  <!-- <input type="button" value="Click me!" onclick="action_form()" /> or the below -->
  <input type="submit" value="Click me!" onclick="return validate_form()" />
</form>

Answer 2

你应该创建一个真实的按钮，如：

<button type="submit" onclick="onSubmitClick()">Submit</button>。

您还可以将onsubmit="onSubmit()"添加到表单标记中。

＆＃13;

function onSubmitClick() {
  alert('Submitted');
}

＆＃13;

<!-- Action on the button -->
<form>
  <table align="center">
    <tr>
      <td>*Name</td>
      <td>
        <input type="text" name="name" id="name" size="40" />
      </td>
    </tr>
    <tr>
      <td>*Phone</td>
      <td>
        <input type="text" name="phone" id="phone" size="40" />
      </td>
    </tr>
    <tr>
      <td>*Address</td>
      <td>
        <textarea rows="4" cols="40" name="address"></textarea>
      </td>
    </tr>
  </table>
  <button type="submit" onclick="onSubmitClick()">Submit</button>
</form>

<!-- Action on the form (if multiple submit, it's better) -->
<form onsubmit="onSubmitClick()">
  <table align="center">
    <tr>
      <td>*Name</td>
      <td>
        <input type="text" name="name" id="name" size="40" />
      </td>
    </tr>
    <tr>
      <td>*Phone</td>
      <td>
        <input type="text" name="phone" id="phone" size="40" />
      </td>
    </tr>
    <tr>
      <td>*Address</td>
      <td>
        <textarea rows="4" cols="40" name="address"></textarea>
      </td>
    </tr>
  </table>
  <button type="submit">Submit</button>
</form>

＆＃13;

Answer 3

我查了一下，工作正常。你不需要回报。您没有返回值，而是正在运行警报。

有人提到onSubmitClick，onClick也可以正常工作，不过从技术上讲，你点击它时提交一个表单。 onSubmitClick不会与其他对象一起使用。

<html>
<head>
    <title>Check</title>
    <script type="text/javascript">
        function displaymessage()
        {
            alert("Hello World!");
        }
    </script>
</head>

<body>
    <form name="checkout" id="checkout" method="post" action="1.php">
        <table align="center">
            <tr>
                <td>*Name</td>
                <td><input type="text" name="name" id="name" size="40" /></td>
            </tr>
            <tr>
                <td>*Phone</td>
                <td><input type="text" name="phone" id="phone" size="40" /></td>
            </tr>
            <tr>
                <td>*Address</td>
                <td><textarea rows="4" cols="40" name="address"></textarea></td>
            </tr>
        </table>
        <input type="button" value="Click me!" onclick="displaymessage();" />
    </form>
</body>
</html>

Answer 4

我建议你在提交之前验证表格，就像这样..

<input id="mybtn" type="button" value="Click me!" />

JS：

var form = document.getElementById("checkout");
document.getElementById("mybtn").addEventListener("click", function () {
  if ( validate_form() )
      form.submit();
  else 
      alert("Name is empty");
});

function validate_form(){
   var name = document.getElementById("name").value;
   if ( !value )
       return false;
   else 
       return true;
}

Answer 5

删除return声明

function displaymessage(){
    alert("Hello World!");
}

<input type="button" value="Click me!" onclick="displaymessage()" />

请参阅this

Javascript：为什么onclick没有调用我的函数？

5 个答案: