Javascript: Why my function isn't called by onclick?

Question

I'm writing a form validation using Jscript,

But I don't know why I just can't even call a simple alert function by onclick.

Here's part of my code

<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>

I suppose the button should be a submit button

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

But during my testing, even a simple "Click me!" button doesn't work... Will there be anyone who countered kind of question like that before?

oh crap.. if i remove my validate_form() function then the button works again — hoho97
– hoho97, Commented Oct 16, 2016 at 12:04
does it means my validate_form() function having some problems? — hoho97
– hoho97, Commented Oct 16, 2016 at 12:05
If the function got some errors, the form won't be submitted. — kind user
– kind user, Commented Oct 16, 2016 at 12:06

jl_ · Accepted Answer · 2016-10-16 13:25:21Z

Here is a sample snippet to play around with.

The logic should be:

The function validate_form should return true if validation is successful; otherwise false. If the return value is true the form would be submitted.

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>

Christopher Vickers · Accepted Answer · 2016-10-16 12:12:29Z

I checked and it works fine. You don't need the return. You aren't returning a value, you are running an alert.

Someone has mentioned onSubmitClick, onClick will work just as well, though technically you submitting a form when you click it. onSubmitClick wouldn't work with other objects.

<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>

C0ZEN · Accepted Answer · 2016-10-16 12:12:40Z

You should create a real button like :

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

You can also add onsubmit="onSubmit()" into the form tag.

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>

BrTkCa · Accepted Answer · 2016-10-16 12:12:41Z

0

I suggest you to validate the form before the submit it, something like this..

<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;
}

answered Oct 16, 2016 at 12:12

BrTkCa

4,7934 gold badges28 silver badges46 bronze badges

Comments

Merlin · Accepted Answer · 2016-10-16 12:12:53Z

0

Remove the return statment

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

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

see the onclick event example

answered Oct 16, 2016 at 12:12

Merlin

4,9252 gold badges35 silver badges53 bronze badges

Collectives™ on Stack Overflow

Javascript: Why my function isn't called by onclick?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related