Блог

Главная - Вопросы по программированию - Javascript: почему моя функция не вызывается onclick ?

Javascript: почему моя функция не вызывается onclick ?

#javascript #html #forms

#javascript #HTML #формы

Вопрос:

Я пишу проверку формы с использованием 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()"/>

Но во время моего тестирования даже простая кнопка «Нажми на меня!» не работает… Будет ли кто-нибудь, кто раньше задавал подобные вопросы?

Комментарии:

1. onclick атрибут — это значение вместе .. без пробела

2. вот дерьмо .. если я удалю свою функцию validate_form(), кнопка снова заработает

3. означает ли это, что у моей validate_form() функции возникли какие-то проблемы?

4. Если функция получила некоторые ошибки, форма не будет отправлена.

5. вы можете проверить форму в submit событии

Ответ №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>

Ответ №2:

Я проверил, и все работает нормально. Вам не нужен возврат. Вы не возвращаете значение, вы запускаете оповещение.

Кто-то упомянул 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>

Ответ №3:

Вы должны создать настоящую кнопку, например :

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

Вы также можете добавить onsubmit="onSubmit()" в тег формы.

 function onSubmitClick() {
  alert('Submitted');
} 
 <!-- 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>

Ответ №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;
}

Ответ №5:

Удалите return statment

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

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

смотрите Пример события onclick

Метки: